var StartGallery = new Class({
    
    Implements: [Options],
    
    currentIndex: 0,
	bgPics: {},
    background: null,
    running: false,
    timer: null,
    
    options: {
		ratio: 1.8617,			// aspect ratio of the bg pic
		minWidth: 1007,			// min width of bg pic
        picWidth: 1400,			// standard width of bg pic
        picHeight: 702,			// standard height of the bg pic
        headerHeight: 193,		// height to subtract from content (window.height - headerHeight)
        contentHeight: 0,       // height of the subnavi and its content
        interval: 5000			// periodical intervall in ms
    },
    
    initialize: function(backgroundPics, options){
        this.bgPics = backgroundPics;
		this.setOptions(options);
        this.options.contentHeight = Globals.dynElements.contentArea.getSize().y;
		
        this.headerPics = $$('.header_pic');
        this.background = $('header');
		
		this.loadHeaderPics(0);
        
        this.background.removeClass('hidden');
        this.resizeBackground();
    },
    
    loadHeaderPics: function(index){
		//var item = this.bgPics[index];
		new Asset.image(this.bgPics[index], {
			onLoad: function() {
				this.build(index);
				this.resizeBackground();
				this.set(0);
				if(index < this.bgPics.length - 1)
					this.loadHeaderPics.delay(100, this, [index + 1]);
				//else
				// all pics loaded
				//	this.attachEvent(index);
			}.bind(this)
		});
        if((index == 2 || index == this.bgPics.length - 1) && !this.running)
            this.start();
    },
    
    build: function(index){
        var el = new Element('img', {
                    src: this.bgPics[index],
                    'class': 'header_pic'
        });
		
        el.inject(this.background);
        this.headerPics.push(el);
		this.attachEvent(index);
        
        return this;
    },
    
    attachEvent: function(index){
        var button = Globals.naviButtons[index];
		var pic = this.headerPics[index];
        pic.set('tween', { duration: 200, transition: 'sine:out' });
        
        /*
        button.addEvents({
            'mouseover': function(){
                //pic.fade('in');
				this.show(index);
            }.bind(this)
        });
        */
    },
    
    resizeBackground: function() {
        var size = window.getSize();
        var width = 0;
        var height = 0;
		if(size.x <= this.options.minWidth) {
			width = this.options.minWidth;
			height = this.options.minWidth / this.options.ratio;
		}
        else {
            width = size.x;
			height = size.x / this.options.ratio;
        }
        this.headerPics.each(function(el){
            el.setStyles({
                'height': height,
                'width':  width
            });
        }, this);
        // position absolute elements
        for(var i in Globals.dynElements.topPosition){
            var item = Globals.dynElements.topPosition[i];
            var top = item.startY + size.y - 585 - this.options.contentHeight;
            if(size.y - height > 400 - this.options.contentHeight)
                top -= (size.y - height - 400 + this.options.contentHeight);
            item.element.setStyle('top', top);
        };
        // scale absolute elements
        for(var i in Globals.dynElements.sizeY){
            var item = Globals.dynElements.sizeY[i];
            var eleHeight = item.sizeY + size.y - 565 - this.options.contentHeight;
            if(eleHeight > height)
                eleHeight = height;
            item.element.setStyle('height', eleHeight);
        };
    },
    
    start: function(){
        $clear(this.timer);
        this.timer = this.showNext.periodical(this.options.interval, this);
    },
    
    stop: function(){  
        $clear(this.timer.id);
    },
    
    validateIndex: function(index) {
        if(index > this.headerPics.length - 1) index = 0;
        if(index < 0) index = this.headerPics.length - 1;
        return index;
    },
    
    showPrev: function(){
        var index = this.validateIndex(this.currentIndex - 1);
        this.show(index);
    },
    
    showNext: function(){
        var index = this.validateIndex(this.currentIndex + 1);
        this.show(index);
    },
    
    set: function(index) {
        return this.show(index, true);
    },
    
    show: function(index, now) {
        now = now || false;
        
        this.currentIndex = index;
        var previous = index - 1;
        if(previous < 0)
            previous = this.bgPics.length - 1;
        
        //this.resetTimer();

        // prepare fading - important for restarting loop (avoids bug)
        this.headerPics.each(function(item, i){
            if(i != previous && i != index) {
                item.setStyle('z-index', 0);
                item.fade('hide');
            }
        });

        this.headerPics.each(function(item, i){
            if (i != index){
                // current visible?
                if(item.getStyle('z-index') == 1)
                    item.setStyle('z-index', 0);
                else
                    item.fade(now ? 'hide' : 'out').setStyle('z-index', 0);
            }
            else {
                item.fade('hide');
                if(now)
                    item.fade('show').setStyle('z-index', 1);
                else {
                    new Fx.Tween(item, { duration:800, property: 'opacity'}).start(0,1);
                    item.setStyle('z-index', 1);
                }
            }
        });
        
        return this;
    },
    
    onTimerTick: function() {
        this.timer.value += 2;
        if(this.timer.value > 200) {
            this.showNext();
            return;
        }
        this.timer.el.setStyle('background-position', this.timer.value);
    },
    
    resetTimer: function() {
        this.timer.value = 0;
        this.timer.el.setStyle('background-position', this.timer.value);
    }
 });