var Headers = {
    DURATION : 1.0,
    images : [],
    thumbnails : [],
    pictures : [],
    current : 1,
    next : 0,
    transition : Effect.Transitions.sinoidal,
    loaded : 0,
    init: function() {
        if (Headers.getCurrent()) {
            Headers.current = Headers.getCurrent();
        }

        Headers.thumbnails = $$('.headers-select-image');
        if(Headers.thumbnails.length <= 1)
            return;

        Headers.images = $$('.headers-show')[0].childNodes;
        if(Headers.images.length <= 1)
            return;
        
        var counter = 0;
        for(var i = 0; i < Headers.images.length; i ++) {
            if( Headers.images[i].className ) {
                if ( Headers.images[i].className.include(Headers.current + "_") ) {
                    Headers.images[i].style.display = 'block';
                } else {
                    Headers.images[i].style.display = 'none';
                }
                Headers.pictures[counter] = Headers.images[i].style.backgroundImage;
                counter++;
            }
        }
        Headers.pictures = Headers.pictures.uniq();
        Headers.preLoad();

        for(var i = 0; i < Headers.thumbnails.length; i ++) {
            Headers.thumbnails[i].id = Headers.thumbnails[i].className.replace('headers-select-image ', '');
            Event.observe(Headers.thumbnails[i], 'click', Headers.changePicture);
            Event.observe(Headers.thumbnails[i], 'mouseover', Headers.greyOut);
            Event.observe(Headers.thumbnails[i], 'mouseout', Headers.greyUp);
        }
    },

    preLoad : function () {

        for(var i = 0; i < Headers.pictures.length; i++) {
            var url = '';
            url = Headers.pictures[i].replace('url(', '');
            url = url.replace(')', '');
            Headers.pictures[i] = new Image();
            Headers.pictures[i].onload = Headers.addLoaded;
            Headers.pictures[i].src = url;
        }
    },

    addLoaded: function () {
        Headers.loaded++;
    
    },

    isLoaded: function () {
        if (Headers.loaded == Headers.pictures.length) {
            return true;
        }
        if ( Prototype.Browser.Opera ) {
            var trigger = 0;
            for(var i = 0; i < Headers.pictures.length; i++) {
                if ( Headers.pictures[i].complete ) {
                    trigger++;
                }
            }
            if( trigger == Headers.pictures.length ) {
                return true;
            }
        }
        return false;
    },

    setCurrent : function(current) {
        document.cookie = "currentHeader=" + current;
        Headers.current = current;
    },

    getCurrent : function() {
        //set begin index to 1st letter of value ("W")
        if (document.cookie.indexOf("currentHeader") < 0) {
            return false;
        }
        var beginindex = document.cookie.indexOf("currentHeader") + 14;
        var endindex = beginindex;
        //while we haven't hit ";" and it's not end of cookie
        while (document.cookie.charAt(endindex) != ";" && endindex <= document.cookie.length) {
            endindex++;
        }
        return document.cookie.substring(beginindex, endindex);
    },

    greyOut : function() {
        this.style.cursor = 'pointer';
        var scope = 'menu_' + this.id;
        new Effect.Opacity(this, {from: 1.0, to: 0.3, duration: 0.2, queue: {position: 'end', scope: scope}});
    },

    greyUp : function() {
        var scope = 'menu_' + this.id;
        new Effect.Opacity(this, {from: 0.3, to: 1.0, duration: 0.2, queue: {position: 'end', scope: scope}});
    },

    changePicture : function() {
        if(Headers.current == this.id)
            return;
 
        var queue = Effect.Queues.get('header');
        queue = queue.toArray();
        if(queue.length > 0) {
            return;
        }

        for(var i = 0; i < Headers.images.length; i ++) {
            var img = Headers.images[i];
            if(img.className && img.className.include(this.id + "_")) {
                img.style.display = 'block';
                img.style.zIndex = '1';
            }
            
            if(img.className && img.className.include(Headers.current + "_")) {
                img.style.zIndex = '2';
            }
        }

        Headers.next = this.id;
        
        new Effect.Parallel([
        
        new Effect.Morph($$('.' + Headers.current + "_1")[0], {
            style: {
                width:  '0px',
                left:   '0px'
            }, 
            sync: true
        }),
        new Effect.Morph($$('.' + Headers.current + "_2")[0], {
            style: {
                top:    '0px',
                height: '0px'
            },
            sync: true
        }),
        new Effect.Morph($$('.' + Headers.current + "_3")[0], {
            style: {
                top:    '137px',
                height: '0px'
            }, 
            sync: true
        }),
        new Effect.Morph($$('.' + Headers.current + "_4")[0], {
            style: {
                width:  '0px',
                left:   '453px'
            }, 
            sync: true
        }),
        new Effect.Morph($$('.' + Headers.current + "_5")[0], {
            style: {
                top:    '137px',
                height: '0px'
            }, 
            sync: true
        }),
        new Effect.Morph($$('.' + Headers.current + "_6")[0], {
            style: {
                left:   '302px',
                width:  '0px'
            }, 
            sync: true
        }),
        new Effect.Morph($$('.' + Headers.current + "_7")[0], {
            style: {
                top:    '137px',
                height: '0px'
            }, 
            sync: true
        }),
        new Effect.Morph($$('.' + Headers.current + "_8")[0], {
            style: {
                top:    '274px',
                height: '0px'
            }, 
            duration: Headers.DURATION
        }),
        new Effect.Morph($$('.' + Headers.current + "_9")[0], {
            style: {
                left:   '152px',
                width:  '0px'
            }, 
            sync: true
        }),
        new Effect.Morph($$('.' + Headers.current + "_10")[0], {
            style: {
                top:    '411px',
                height: '0px'
            }, 
            sync: true
        }),
        new Effect.Morph($$('.' + Headers.current + "_11")[0], {
            style: {
                width:  '0px',
                left:   '302px'
            }, 
            sync: true
        }),
        new Effect.Morph($$('.' + Headers.current + "_12")[0], {
            style: {
                top:    '274px',
                height: '0px'
            }, 
            sync: true
        })

        ], {
            duration: Headers.DURATION,
            queue: { position: 'end', scope: 'header' },
            transition: Headers.transition,
            afterFinish: function(){Headers.resetStyle(Headers.current); Headers.setCurrent(Headers.next);}
        });

    },

    resetStyle: function(id) {
        for(var i = 0; i < Headers.images.length; i ++) {
            if(Headers.images[i].className && Headers.images[i].className.include(id + "_")) {
                Headers.images[i].style.width = "";
                Headers.images[i].style.height = "";
                Headers.images[i].style.top = "";
                Headers.images[i].style.left = "";
                Headers.images[i].style.display = "none";
            }
        }
    }
};

//Event.observe(window, 'load', Headers.init);
document.observe("dom:loaded", Headers.init);