/**************************************************************
	Script		: StripViewer
	Version		: 1.0
	Authors		: Pieter Soudan
	Desc		: a CoverFlow Class for controlling cover slides.
	Licence		: property of Red & Ivory
**************************************************************/

var StripViewer = new Class({
    Implements: Options,
    options: {
        server: '',
        slideanim: 1000,
        indicatorborder:6,
        opacity: 0.8
    },
    
    initialize: function(el, opt){
        this.setOptions(opt);
        this.el = el;
        this.nbBands = this.el.getProperty('rel').toInt();
        this.viewport = this.el.getElement('.viewport');
        this.height = this.viewport.getDimensions().y;
        this.cntnr = this.viewport.getElement('.container');
        this.selector = this.el.getElement('.selector');
        this.selector.setStyle('position', 'relative');
        sD = this.selector.getDimensions();
        this.sheight = Math.floor(sD.y / this.nbBands);
        margin = sD.y - (this.sheight * this.nbBands);
        this.selectors = [];
        this.activeS = 0;
        
        window.addEvent('keydown', this.pushKey.bindWithEvent(this));
        
        //create hitareas on selector
        
        for(var i=0; i<this.nbBands; i++){
            var s = new Element('div', {'class':'hitarea'});
            if(i == (this.nbBands-1)) s.setStyle('height', this.sheight+margin);
            else s.setStyle('height', this.sheight);
            s.setStyle('width', sD.x);
            s.inject(this.selector);
            s.setStyle('opacity', this.options.opacity);
            s.addEvents({
                'mouseover': this.enterSelector.bind(this, [i,s]),
                'click': this.selectSelector.bind(this, i)
            });
            this.selectors[i] = s;
        }
        
        this.indicator = new Element('div', {'class':'indicator'});
        this.indicator.inject(this.selector);
        this.indicator.setStyle('border-width', this.options.indicatorborder);
        if(Browser.Engine.trident)this.indicator.setStyle('height', this.sheight);
        else this.indicator.setStyle('height', this.sheight-2*this.options.indicatorborder);
        if(Browser.Engine.trident) this.indicator.setStyle('width', sD.x);
        else this.indicator.setStyle('width', sD.x-2*this.options.indicatorborder);
        this.indicator.setStyle('position', 'absolute');
        this.indicator.setStyle('top', 0);
        this.indicator.addEvents({
                'mouseover': this.skipIndicator.bind(this)
        });
        
        this.cntnr.setStyle('position', 'absolute');
        this.bands = [];
        this.loadedBands = [];
        this.placedBands = [];
        this.scrollFx = new Fx.Elements([this.cntnr, this.indicator], {duration: this.options.slideanim, transition: Fx.Transitions.Cubic.easeOut, wait:false});
        this.active = -1;
        this.addBand(0);
        this.nextBand();
        this.enterSelector(0, this.selectors[0]);
    },
    
    pushKey: function(event){
        if(event.key=='left' || event.key=='up'){
            this.prevBand();
        }
        else if(event.key=='right' || event.key=='down'){
            this.nextBand();
        }
    },
    
    addBand: function(nb){
        if(this.bands[nb]) return false;
        var url = this.options.server+'images/band'+nb+'.jpg';
        this.bands[nb] = url;
        //preload image
        this.tempimg = new Asset.image(url, {onload: this.bandLoaded.bind(this, [nb])});
        return true;
    },
    bandLoaded: function(nb){
        //add element
        this.loadedBands[nb] = true;
        if(nb==0 || this.placedBands[nb-1]) {
            var img = new Element('img', {src:this.bands[nb]});
            img.inject(this.cntnr);
            img.addEvent('click', this.nextBand.bind(this));
            this.placedBands[nb] = true;
        }
        if(this.loadedBands[nb+1] && !this.placedBands[nb+1]) this.bandLoaded(nb+1);
    },
    switchBand: function(nb){
        if(this.activeS > -1) this.leaveSelector(this.activeS, this.selectors[this.activeS]);
        this.activeS = nb;
        this.selectors[nb].addClass('entered');
        this.selectors[nb].setStyle('opacity', 0.01);
        
        check = 0;
        //preload this and all previous
        while(check < nb+1){
            this.addBand(check++);
        }
        var to = -nb*this.height;
        this.scrollFx.start({'0':{'top':this.height*nb*-1},'1':{'top':this.sheight*nb}});//.chain(function(){this.active++});
        this.active = nb;
        //preload and place next band
        if(this.active+1 < this.nbBands) this.addBand(this.active+1);
    },
    nextBand: function(){
        if(this.bands[this.active+1]) this.switchBand(this.active+1);
    },
    prevBand: function(){
        if(this.active > 0) this.switchBand(this.active-1);
    },
    enterSelector: function(nb, s){
        this.switchBand(nb);
    },
    leaveSelector: function(nb, s){
        s.setStyle('opacity', this.options.opacity);
        s.removeClass('entered');
    },
    selectSelector: function(nb){
        this.switchBand(nb);
    },
    skipIndicator: function(){
        this.enterSelector(this.activeS,this.selectors[this.activeS]);
    }
    
});