var PhotoBox = {
    MAIN_DIV_ID: 'pBox',
    WINDOW_DIV_ID: 'pBoxWindow',
    CONTENT_DIV_ID: 'pBoxContent',
    //FOOTER_DIV_ID: 'pBoxFooter',        
    //TITLE_DIV_ID: 'pBoxTitle',
    LOADING_DIV_ID: 'pBoxloading',

    STATE_NONE: 'none',
    STATE_LOADING: 'loading',
    STATE_VISIBLE: 'visible',

    onLoad: function() {
        PhotoBox.state = PhotoBox.STATE_NONE;

        $(document.body).insert(
            '<div id="'+PhotoBox.LOADING_DIV_ID+'" onclick="PhotoBox.cancel();" style="display:none;">&nbsp;</div>' +
            '<div id="'+PhotoBox.MAIN_DIV_ID+'" onclick="PhotoBox.cancel();" style="display:none;">'+
                '<div id="'+PhotoBox.MAIN_DIV_ID+'Background" onclick="PhotoBox.cancel();">&nbsp;</div>'+
                '<div id="'+PhotoBox.WINDOW_DIV_ID+'">'+
                    '<div id="'+PhotoBox.CONTENT_DIV_ID+'">&nbsp;</div>' +
                    /*'<div id="'+PhotoBox.FOOTER_DIV_ID+'">'+
                        '<div id="'+PhotoBox.TITLE_DIV_ID+'">&nbsp;</div>' +
                    '</div>' +*/
                '</div>' +
            '</div>'
        );
        $$('a.photo').each(function(item) {
            PhotoBox.preload(item);
            item.observe('click', function(event) {
                event = Event.extend(event);

                var element = event.element();
                if(element.tagName != 'A') {
                    element = event.findElement('A');
                }
                PhotoBox.onClick(element);
                event.stop();
                return false;
            });
        });
    },

    preloadImages: $H(),
    preload: function(item) {
        var url = item.readAttribute('href');
        if(!PhotoBox.preloadImages.get(url)) {
            var preloadImage = new Image();
            preloadImage.src = url;
            PhotoBox.preloadImages.set(url, preloadImage);
        }
    },

    onClick: function(event) {
        if(PhotoBox.state == PhotoBox.STATE_LOADING || PhotoBox.state == PhotoBox.STATE_VISIBLE || $(PhotoBox.MAIN_DIV_ID).visible()) {
            PhotoBox.cancel();
        } else {
            PhotoBox.loadAndShow(event);
        }
        return false;
    },

    loadAndShow: function(element) {
        var url = element.readAttribute('href');

        var preloadImage = PhotoBox.preloadImages.get(url);
        if(preloadImage.complete) {
            PhotoBox.showImage(element);
        } else {
            PhotoBox.showLoad(element);
            preloadImage.onload = PhotoBox.showImage.curry(element);
        }
    },

    showLoad: function(element) {
        var elementPosistion = element.cumulativeOffset();
        var loadingDiv = $(PhotoBox.LOADING_DIV_ID);
        loadingDiv.setStyle({
            left: elementPosistion.left + "px",
            top: elementPosistion.top + "px",
            position: 'absolute'

        });
        loadingDiv.show();
        PhotoBox.state = PhotoBox.STATE_LOADING;
    },

    showImage: function(element) {
        var url = element.readAttribute('href');
        var img = PhotoBox.preloadImages.get(url);
        var imgSize = PhotoBox.fitToViewport(img);

        var contentElement = $(PhotoBox.CONTENT_DIV_ID);
        contentElement.update('<img src="'+url+'" style="width: '+imgSize.width+'px;height: '+imgSize.height+'px;" />');

        var title = element.readAttribute('title');
        //Element.update(PhotoBox.TITLE_DIV_ID, title);
        
        $(PhotoBox.LOADING_DIV_ID).hide();
        $(PhotoBox.MAIN_DIV_ID).show();
        Position.center($(PhotoBox.WINDOW_DIV_ID));

        PhotoBox.state = PhotoBox.STATE_VISIBLE;
    },

    cancel: function() {
        $(PhotoBox.LOADING_DIV_ID).hide();
        $(PhotoBox.MAIN_DIV_ID).hide();
        Element.update(PhotoBox.CONTENT_DIV_ID, '');
        /*if($(PhotoBox.MAIN_DIV_ID).visible()) {
            var dims = $(PhotoBox.CONTENT_DIV_ID).getDimensions();
            Element.update(PhotoBox.CONTENT_DIV_ID, '<div style="background-color:#fff;border:1px solid red;filter: alpha( opacity = 1 );opacity: 0.01;width: '+(dims.width/2)+'px;height: '+(dims.height/2)+'px;">&nbsp;');
            Position.center($(PhotoBox.WINDOW_DIV_ID));
            Element.hide.delay(.5, PhotoBox.MAIN_DIV_ID);
        }*/

        PhotoBox.state = PhotoBox.STATE_NONE;
    },

    fitToViewport: function(img) {
        var windowSize = document.viewport.getDimensions();
        windowSize.width -= 15;
        windowSize.height -= 35;

        var width = img.width;
        var height = img.height;

        if(width > windowSize.width) {
            width = windowSize.width;
            width = img.height * windowSize.width / img.width;
        } if(height > windowSize.height) {
            height = windowSize.height;
            width = img.width * windowSize.height / img.height;
        }


        return {width: width, height: height};
    }
}