var LPA;

$(document).ready(function() {
    LPA = new LPASite();
    LPA.init();
});

function LPASite() {
}

LPASite.prototype = {
    listeningForHashChanges: true,

    photoGridDimensions: [ 200, 136 ],
    photoGrids: {
        'photographers': [
            [0, 0, 1, 1],
            [0, 1, 0, 0],
            [0, 0, 0, 1],
            [0, 0, 0, 0],
            [1, 0, 1, 0],
            [0, 1, 0, 1],
            [1, 0, 0, 0],
            [0, 1, 1, 1],
            [0, 0, 0, 0],
            [0, 0, 0, 0],
            [1, 1, 0, 0]
        ],
        'futures': [
            [0, 0, 0, 0],
            [0, 1, 1, 1],
            [0, 0, 0, 0],
            [1, 1, 0, 0],
        ],
        'style': [
            [0, 0, 1, 0],
            [0, 1, 0, 1],
            [0, 1, 0, 0],
            [1, 0, 0, 0],
            [0, 0, 1, 0],
            [1, 1, 0, 0],
        ],
        'production': [
            [0, 0, 1, 1],
            [0, 0, 1, 0],
            [0, 0, 0, 1],
            [1, 0, 0, 0],
            [0, 0, 1, 1],
            [0, 1, 0, 1],
        ]
    },

    init: function() {
        this.initLayout();
        // Should happen only if...
        this.initHomepage();
        this.initPhotographer();
        this.initRollovers();
    },

    initHomepage: function() {
        $('div.homepage div.item').each(function() {
            if($(this).height() < 266) {
                $(this).addClass('item-landscape');
            } else {
                $(this).addClass('item-portrait');
            }
            $(this).click(function() {
                window.location.href = $(this).attr('href');
            });
        });
    },

    initLayout: function() {
        Cufon.replace('h2', { fontFamily: 'VAG Rounded' });
        Cufon.replace('div.item div.rollover span', { fontFamily: 'VAG Rounded' });
    },

    setupPhotoGrid: function(section, images) {
        if(!images.length) {
            return;
        }

        var grid = this.photoGrids[section];
        var numberOfGrids = Math.ceil(images.length / grid.length);

        for(var i=1; i<numberOfGrids; i++) {
            grid = grid.concat(grid);
        }

        var count = 0;
        loop:
            for(var y in grid) {
                for (var x in grid[y]) {
                    if(grid[y][x]) {
                        this.createGridImageAt(images[count], x, y, section);
                        count++;

                        if(count >= images.length) {
                            break loop;
                        }
                    }
                }
            }

        Cufon.replace('div.item div.rollover span', { fontFamily: 'VAG Rounded' });
        this.initRollovers();
    },

    createGridImageAt: function(image, x, y, section) {
        var imageDiv = $('<div class="item '+section+'" style="left: '+(x * this.photoGridDimensions[0])+'px; top: '+(y * this.photoGridDimensions[1])+'px"><div class="item-content image"><img src="'+image.src+'"/></div>'+(image.readableId ? '<div class="rollover"><span>'+image.name+'<br/>'+image.section+'</span></div>' : '')+'</div>'); 
        var readableId = image.readableId;
        var imageId = image.id;
        if(readableId) {
            imageDiv.click(function() {
                window.location.href = window.location.href + '/' + readableId + '#image_' + imageId;
            });
        }

        var image = $('#photo-grid').append(imageDiv);

        imageDiv.find('img')[0].onload = function(ev) {
            var img = this;
            setTimeout(function() {
                var imgWidth = img.width;
                var imgHeight = img.height;
                var itemDiv = $(img).parent().parent()
                itemDiv.height(imgHeight);
                itemDiv.width(imgWidth);
                if(imgHeight > 263) {
                    itemDiv.addClass('item-portrait')
                } else {
                    itemDiv.addClass('item-landscape')
                }
                itemDiv.fadeIn(1000);
            }, 1000);
        };
    },

    initPhotographer: function() {
        var _this = this;

        $(window).bind('hashchange', function() {
            if(!_this.listeningForHashChanges) {
                return;
            }
            if(window.location.hash == "images") {
                _this.gotoImages();
            } else if(window.location.hash.substr(0,7) == '#image_'){
                _this.gotoImages(null, window.location.hash);
            } else {
                _this.gotoThumbnails();
            }
        });

        if(window.location.hash.substr(0,7) == '#image_') {
            $(window).trigger('hashchange');
        }

        $('ul.thumbnails li a').click(function() {
            var index = $(this).parent().prevAll().length;
            _this.gotoImages(index+1);
        });

        $('ul.photographer-nav li.thumbnail a').click(function() {
            _this.gotoThumbnails();
        });
    },

    gotoImages: function(index, id) {
        if(!id) {
            this.setHash('images');
        }
        $('ul.photographer-nav').addClass('fixed');
        $('ul.thumbnails').hide();
        $('ul.fullsize').show();
        if(id) {
            $(window).scrollTop($('ul.fullsize li#'+id).position().top - $('ul.photographer-nav.fixed').height());
        }
        if(index) {
            $(window).scrollTop($('ul.fullsize li:nth-child('+index+')').position().top - $('ul.photographer-nav.fixed').height());
        }
    },

    gotoThumbnails: function() {
        this.setHash('thumbnails');
        $('ul.photographer-nav').removeClass('fixed');
        $('ul.thumbnails').show();
        $('ul.fullsize').hide();
        $(window).scrollTop(0);
    },

    setHash: function(value) {
        var _this = this;
        this.listeningForHashChanges = false;
        window.location.hash = value;
        setTimeout(function() { _this.listeningForHashChanges = true; }, 200);
    },

    initRollovers: function() {
        $('div.item').hover(function() {
            if($(this).children('div.rollover').length) {
                $(this).children('div.rollover').fadeIn();
                $(this).children('div.item-content').fadeOut();
            }
        },
        function() {
            if($(this).children('div.rollover').length) {
                $(this).children('div.rollover').fadeOut();
                $(this).children('div.item-content').fadeIn();
            }
        });
    }
}