/**
 * @author Dipl.-Ing. (FH) André Fiedler <a.fiedler@oe-konzept.de>
 */
 
var OeStartGallery = new Class({
    
    Implements: [Options],
    
    currentIndex: 0,
    highlights: [],
    background: null,
    content: null,
    raster: null,
    timer: {
        id: null,
        value: 0,
        el: null
    },
    
    options: {
        ratio:        2.3333,  // ratio of bg pic
        headerHeight: 144,     // height to subtract from content (window.height - headerHeight)
        interval:     100      // periodical intervall in ms
    },
    
    initialize: function(highlightInfos, options){
        this.highlightInfos = highlightInfos;
    
        this.setOptions(options);
    
        this.timer.el = $$('.timer');
        this.highlights = $$('.ref_fullsize_bg');
        this.background = $('bg');
        this.content = $('content');
        this.raster = $('ref_raster');
        this.indexerContainer = $$('.indexes ul')[0];
        this.indexer = $$('.refSetter');
        this.indexerImg = $$('.refSetter img');
        this.infobox = $$('.ref_infobox')[0];
        this.refName = $('ref_name');
        this.refInfo = $('ref_info');
        this.infoboxSection = $('service_section');
        
        this.loadHighlight(0);
            
        this.infobox.addEvent('mouseenter', function() { this.infoBoxIsUsed = true; }.bind(this));
        this.infobox.addEvent('mouseleave', function() { this.infoBoxIsUsed = false; }.bind(this));
        
        this.makeDragable();
        this.attachEvents();
        
        this.background.removeClass('hidden');
        this.content.removeClass('hidden');
        this.resizeBackground();
    },
    
    loadHighlight: function(index){
        var item = this.highlightInfos[index];
        new Asset.image(item.image, {
           onLoad: function() {
               this.build(index);
               this.resizeBackground();
               this.set(0);
               this.attachEvent(index);
               if(index < this.highlightInfos.length - 1)
                   this.loadHighlight.delay(100, this, [index + 1]);
               else
                   this.loadComplete();
           }.bind(this)
       });
    },
    
    build: function(index){
        var item = this.highlightInfos[index];
        var el;
        switch(item.type){
            case 'image':
                el = new Element('img', {
                    src: item.image,
                    'class': 'ref_fullsize_bg'
                });
                break;
                
            case 'block':
                el = new Element('div', {
                    'class': 'ref_fullsize_bg bg_' + item.section
                }).adopt(new Element('div', {
                    'class': 'newstext'
                }).adopt(new Element('img', {
                    src: item.image
                })));
                break;
        }
        el.inject(this.background);
        this.highlights.push(el);
        
        // indexer
        var indexer = new Element('li', {
            'class': 'container' + index + ' indexer'
        });
        var refSetter = new Element('a', {
            'class': 'refSetter',
            href: '#'
        })
        var refSetterImg = new Element('img', {
            src: 'grafiken/infobox/indexer/' + (index < 9 ? '0' : '') + (index + 1) + 'a.gif',
            width: 16,
            height: 16
        });
        indexer.inject(this.indexerContainer);
        indexer.adopt(refSetter);
        refSetter.adopt(refSetterImg);
        
        this.indexer.push(refSetter);
        this.indexerImg.push(refSetterImg);
        
        return this;
    },
    
    attachEvents: function(){
        
        this.content.addEvent('click', function(e) {
            if (!this.infoBoxIsUsed) {
                e.stop();
                document.location.href = this.highlightInfos[this.currentIndex].link;
            }
        }.bind(this));
        
        this.raster.addEvent('click', function(e) {
            if (!this.infoBoxIsUsed) {
                e.stop();
                document.location.href = this.highlightInfos[this.currentIndex].link;
            }
        }.bind(this));
        
        $('next_ref').addEvent('click', function(e){
            e.stop();
            e.target.blur();
            this.showNext();
        }.bind(this));
        
        $('prev_ref').addEvent('click', function(e){
            e.stop();
            e.target.blur();
            this.showPrev();
        }.bind(this));
        
        // add click events for markers
        // add events to all indexer
        this.indexer.each(function(item, index) {
            this.attachEvent(index);
        }, this);
    },
    
    attachEvent: function(index){
        var item = this.indexer[index];
        this.indexerImg[index].set('tween', { duration: 200, transition: 'sine:out' });
        
        item.addEvents({
            'mouseover': function(){
                this.indexerImg[index].fade("show");
            }.bind(this),
            'mouseout': function(){
                if(this.currentIndex != index)
                    this.indexerImg[index].fade('hide');
            }.bind(this),
            'click': function(e){
                e.stop();
                e.target.blur();
                this.show(index);
            }.bind(this)
        });
    },
    
    makeDragable: function(){
        if (Browser.ie6) { // IE6 Bugfix
            this.infobox.makeDraggable({
                container: this.content
            });
        }
        else {
            this.raster.setStyle('display', 'block');
            this.infobox.makeDraggable({
                container: this.raster
            });
        }
    },
    
    resizeBackground: function() {
        var size = window.getSize();
        var width = 0;
        var height = 0;
        if(size.x / (size.y - this.options.headerHeight) > this.options.ratio) {
            width = size.x;
            height = size.x / this.options.ratio;
        }
        else {
            height = size.y - this.options.headerHeight;
            width = height * this.options.ratio;
        }
        this.highlights.each(function(el){
            el.setStyles({
                'height': height,
                'width':  width
            });
            this.background.setStyle('margin-left', (width * -0.5));
        }, this);
        this.raster.setStyles({
            'height': height,
            'width':  width
        });
        this.content.setStyle('height', height);
    },
    
    loadComplete: function(){
        this.start();
    },
    
    start: function(){
        $clear(this.timer.id);
        this.timer.id = this.onTimerTick.periodical(this.options.interval, this);
    },
    
    stop: function(){  
        $clear(this.timer.id);
    },
    
    validateIndex: function(index) {
        if(index > this.highlights.length - 1) index = 0;
        if(index < 0) index = this.highlights.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;
        
        this.resetTimer();
        
        // hide references excepting first one
        this.highlights.each(function(item, i){
            if (i != index){
                item.fade('hide').setStyle('z-index', 0);
                //item.fade(now ? 'hide' : 'out').setStyle('z-index', 0);
            }
            else {
                item.fade('show').setStyle('z-index', 1);
                //item.fade(now ? 'show' : 'in').setStyle('z-index', 1);
            }
        });
        
        // hide all indexer excepting first one
        this.indexerImg.each(function(item, i){
            if (i != index){
                item.fade('hide');
            }
            else {
                item.fade('show');
            }
        });
        
        // TODO: animieren mit http://github.com/SunboX/mootools-fx-text ?
        this.refName.set('html', this.highlightInfos[index].name).set('href', this.highlightInfos[index].link);
        this.refInfo.set('text', this.highlightInfos[index].info);
        this.infoboxSection.removeClasses();
        this.infoboxSection.addClass(this.highlightInfos[index].section);
        
        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);
    }
 });