/**
 * MooFlow - Image gallery
 *
 * Dependencies: MooTools 1.2
 *
 * @version         0.2.1
 *
 * @license         MIT-style license
 * @author          Tobias Wetzel <info [at] outcut.de>
 * @copyright       Author
 * @docmentation    http://outcut.de/MooFlow/Docmentation.html
 */ 

var MooFlow = new Class({

    Implements: [Events, Options],
    
    options: {
        onStart: $empty,
        onClickView: $empty,
        onAutoPlay: $empty,
        onAutoStop: $empty,
        onRequest: $empty,
        onResized: $empty,
        onEmptyinit: $empty,
        reflection: 0.4,
        heightRatio: 0.6,
        offsetY: 0,
        startIndex: 0,
        interval: 3000,
        factor: 115,
        bgColor: '#000',
        useCaption: false,
        useResize: false,
        useSlider: false,
        useWindowResize: false,
        useMouseWheel: true,
        useKeyInput: false,
        useViewer: false
    },
    
    initialize: function(element, options){
        this.MooFlow = element;
        this.setOptions(options);
        this.foc = 150;
        this.factor = this.options.factor;
        this.offY = this.options.offsetY;
        this.isFull = false;
        this.isAutoPlay = false;
        this.isLoading = false;
        this.inMotion = false;
        
        this.MooFlow.addClass('mf').setStyles({
            'overflow':'hidden',
            'background-color':this.options.bgColor,
            'position':'relative',
            'height':this.MooFlow.getSize().x*this.options.heightRatio,
            'opacity':0
        });
        
        if(this.options.useWindowResize) window.addEvent('resize', this.update.bind(this, 'init'));
        if(this.options.useMouseWheel || this.options.useSlider) this.MooFlow.addEvent('mousewheel', this.wheelTo.bind(this));
        if(this.options.useKeyInput) document.addEvent('keydown', this.keyTo.bind(this));
        
        this.getElements(this.MooFlow);
    },
    
    clearInit: function(){
        this.fireEvent('emptyinit');
    },
    
    getElements: function(el){
        this.master = {'images':[]};
        var els = el.getChildren();
        if(!els.length) {this.clearInit(); return;}
        $$(els).each(function(el){
            var hash = $H(el.getElement('img').getProperties('src','title','alt','longdesc'));
            if(el.get('tag') == 'a') hash.combine(el.getProperties('href','rel','target'));
            this.master['images'].push(hash.getClean());
            el.dispose();
        }, this);
        this.clearMain();
    },
    
    clearMain: function(){
        if(this.cap){this.cap.fade(0);}
        if(this.nav){
            new Fx.Tween(this.nav, {
                'onComplete': function(){
                    this.MooFlow.empty();
                    this.createAniObj();
                }.bind(this)
            }).start('bottom', -50);
        }
        if(!this.nav && !this.cap){
            this.MooFlow.empty();
            this.createAniObj();
        }
    },
    
    getMooFlowElements: function(key){
        var els = [];
        this.master.images.each(function(el){ 
            els.push(el[key]); 
        });
        return els;
    },
    
    createAniObj: function(){
        this.aniFx = new Fx.Value({
            'transition': Fx.Transitions.Expo.easeOut,
            'link': 'cancel',
            'duration': 750,
            onMotion: this.process.bind(this),
            'onStart': this.flowStart.bind(this),
            'onComplete': this.flowComplete.bind(this)
        });
        this.addLoader();
    },
    
    addLoader: function(){
        this.MooFlow.store('height', this.MooFlow.getSize().y);
        this.loader = new Element('div',{'class':'loader'}).inject(this.MooFlow);
        new Fx.Tween(this.MooFlow, {
            'duration': 800,
            'onComplete': this.preloadImg.bind(this)
        }).start('opacity', 1);
    },
    
    preloadImg: function(){
        this.loadedImages = new Asset.images(this.getMooFlowElements('src'), {
            'onComplete': this.loaded.bind(this),
            'onProgress': this.createMooFlowElement.bind(this)
        });
    },
    
    createMooFlowElement: function(counter, i){
        var obj = this.getCurrent(i);
        var img = this.loadedImages[i];
        obj['width'] = img.width;
        obj['height'] = img.height;
        img.removeProperties('width','height');

        obj['div'] = new Element('div').setStyles({
            'position':'absolute',
            'display':'none',
            'height': this.MooFlow.getSize().y
        }).inject(this.MooFlow);
        obj['con'] = new Element('div').inject(obj['div']);
        img.setStyles({'vertical-align':'bottom', 'width':'100%', 'height':'50%'});
        img.addEvents({'click': this.clickTo.bind(this, i), 'dblclick': this.viewCallBack.bind(this, i)});
        img.inject(obj['con']);
        
        new Element('div').reflect({ 'img': img,
            'ref': this.options.reflection,
            'height': obj.height,
            'width': obj.width,
            'color': this.options.bgColor
        }).setStyles({'width':'100%','height':'50%','background-color': this.options.bgColor}).inject(obj['con']);
        
        this.loader.set('text', (counter+1) + ' / ' + this.loadedImages.length);
    },
    
    loaded: function(){
        this.index = this.options.startIndex;
        this.iL = this.master.images.length-1;
        new Fx.Tween(this.loader, {
            'duration': 800,
            'onComplete': this.createUI.bind(this)
        }).start('opacity', 0);
    },
    
    createUI: function(){
        this.loader.dispose();
        if(this.options.useCaption){
            this.cap = new Element('div').addClass('caption').set('opacity',0).inject(this.MooFlow);
        }   
        this.nav = new Element('div').addClass('mfNav').setStyle('bottom','-50px');
        this.autoPlayCon = new Element('div').addClass('autoPlayCon');
        this.sliderCon = new Element('div').addClass('sliderCon');
        this.resizeCon = new Element('div').addClass('resizeCon');      
        if(this.options.useAutoPlay){
            this.autoPlayCon.adopt(
                new Element('a',{'class':'stop','events': {'click':this.stop.bind(this)}}), 
                new Element('a',{'class':'play','events': {'click':this.play.bind(this)}})
            );
        }
        if(this.options.useSlider){
            this.sliPrev = new Element('a',{'class':'sliderNext','events': {'click':this.prev.bind(this)}});
            this.sliNext = new Element('a',{'class':'sliderPrev','events': {'click':this.next.bind(this)}});
            this.knob = new Element('div',{'class':'knob'});
            this.knob.adopt(new Element('div',{'class':'knobleft'}));
            this.slider = new Element('div',{'class':'slider'}).adopt(this.knob);
            this.sliderCon.adopt(this.sliPrev,this.slider,this.sliNext);
            this.slider.store('parentWidth', this.sliderCon.getSize().x-this.sliPrev.getSize().x-this.sliNext.getSize().x);
        }
        if(this.options.useResize){
            this.resizeCon.adopt(new Element('a',{'class':'resize','events': {'click':this.setScreen.bind(this)}}));
        }       
        this.MooFlow.adopt(this.nav.adopt(this.autoPlayCon, this.sliderCon, this.resizeCon));   
        this.showUI();
    },
    
    showUI: function(){
        if(this.cap) this.cap.fade(1);
        this.nav.tween('bottom', 20);
        this.fireEvent('start');
        this.update();
    },
    
    update: function(e){
        if(e == 'init') return;
        this.oW = this.MooFlow.getSize().x;
        this.sz = this.oW * 0.5;
        if(this.options.useSlider){ 
            this.slider.setStyle('width',this.slider.getParent().getSize().x-this.sliPrev.getSize().x-this.sliNext.getSize().x-1);
            this.knob.setStyle('width',(this.slider.getSize().x/this.iL));
            this.sli = new SliderEx(this.slider, this.knob, {steps: this.iL}).set(this.index);
            this.sli.addEvent('onChange', this.glideTo.bind(this));
        }
        this.glideTo(this.index);
        this.isLoading = false;
    },
    
    setScreen: function(){
        if(this.isFull = !this.isFull){
            this.holder = new Element('div').inject(this.MooFlow,'after');
            this.MooFlow.wraps(new Element('div').inject(document.body));
            this.MooFlow.setStyles({'position':'absolute','z-index':'100','top':'0','left':'0','width':window.getSize().x,'height':window.getSize().y});
            if(this.options.useWindowResize){
                this._initResize = this.initResize.bind(this);
                window.addEvent('resize', this._initResize);
            }
        } else {
            this.MooFlow.wraps(this.holder);
            window.removeEvent('resize', this._initResize);
            delete this.holder, this._initResize;
            this.MooFlow.setStyles({'position':'relative','z-index':'','top':'','left':'','width':'','height':this.MooFlow.retrieve('height')});
            this.slider.setStyle('width',this.slider.retrieve('parentWidth'));
        }
        this.fireEvent('resized', this.isFull);
        this.update();
    },
    
    initResize: function(){
        this.MooFlow.setStyles({'width':window.getSize().x,'height':window.getSize().y});
        this.update();
    },
    
    getCurrent: function(index){
        return this.master.images[$chk(index) ? index : this.index];
    },
    
    loadJSON: function(url){
        if(!url || this.isLoading) return;
        this.isLoading = true;
        new Request.JSON({
            'onComplete': function(data){
                if($chk(data)){
                    this.master = data;
                    this.clearMain();
                    this.fireEvent('request', data);
                }
            }.bind(this)
        }, this).get(url);
    },
    
    loadHTML: function(url, filter){
        if(!url || !filter || this.isLoading) return;
        this.isLoading = true;
        new Request.HTML({
            'onSuccess': function(tree, els, htm){
                var result = new Element('div', {'html': htm}).getChildren(filter);
                this.getElements(result);
                this.fireEvent('request', result);
            }.bind(this)
        }, this).get(url);
    },
    
    flowStart: function(){
        this.inMotion = true;
    },
    
    flowComplete: function(){
        this.inMotion = false;
    },
    
    viewCallBack: function(index){
        if(this.index != index || this.inMotion) return;
        var el = $H(this.getCurrent());
        var returnObj = {};
        returnObj['coords'] = el.div.getElement('img').getCoordinates();
        el.each(function(v, k){
            if($type(v) == 'number' || $type(v) == 'string') returnObj[k] = v;
        }, this);
        this.fireEvent('clickView', returnObj);
    },
    prev: function(){
        if(this.index > 0) this.clickTo(this.index-1);
    },
    next: function(){
        if(this.index < this.iL) this.clickTo(this.index+1);
    },
    stop: function(){
        $clear(this.autoPlay);
        this.isAutoPlay = false;
        this.fireEvent('autoStop');
    },
    play: function(){
        this.autoPlay = this.auto.periodical(this.options.interval, this);
        this.isAutoPlay = true;
        this.fireEvent('autoPlay');
    },
    auto: function(){
        if(this.index < this.iL) this.next();
        else if(this.index == this.iL) this.clickTo(0);
    },
    keyTo: function(e){
        switch (e.code){
            case 37: e.stop(); this.prev(); break;
            case 39: e.stop(); this.next();
        }
    },
    wheelTo: function(e){
        if(e.wheel > 0) this.prev();
        if(e.wheel < 0) this.next();
        e.stop().preventDefault();
    },
    clickTo: function(index){
        if(this.index == index) return;
        //this.aniFx.cancel();
        if(this.sli) this.sli.set(index);
        this.glideTo(index);
    },
    glideTo: function(index){
        this.index = index;
        this.aniFx.start(this.aniFx.get(), index*-this.foc);
        if(this.cap) this.cap.set('html', this.getCurrent().title);
    },
    process: function(x){
        var z,W,H,zI=this.iL,foc=this.foc,f=this.factor,sz=this.sz,oW=this.oW,offY=this.offY,div,elh,elw;
        this.master.images.each(function(el){
            div = el.div.style;
            elw = el.width;
            elh = el.height;
            if(x>-foc*6 && x<foc*6){
                with (Math) {
                    z = sqrt(10000 + x * x) + 100;
                    H = round((elh / elw * f) / z * sz);
                    W = round(elw * H / elh);
                    if(H >= elw * 0.5) {W = round(f / z * sz);}
                    div.left = round(((x / z * sz) + sz) - (f * 0.5) / z * sz) + 'px';
                    div.top = round(oW * 0.4 - H) + offY + 'px';
                }   
                el.con.style.height = H*2 + 'px';       
                div.width = W + 'px';
                div.zIndex = x < 0 ? zI++ : zI--;
                div.display = 'block';
            } else {
                div.display = 'none';
            }
            x += foc;
        });
    }
});

var SliderEx = new Class({
    Extends: Slider,
    set: function(step){
        this.step = Math.round(step);
        this.fireEvent('tick', this.toPosition(this.step));
        return this;
    },
    clickedElement: function(event){
        var dir = this.range < 0 ? -1 : 1;
        var position = event.page[this.axis] - this.element.getPosition()[this.axis] - this.half;
        position = position.limit(-this.options.offset, this.full -this.options.offset);
        this.step = Math.round(this.min + dir * this.toStep(position));
        this.checkStep();
        this.fireEvent('tick', position);
    }
});

Fx.Value = new Class({
    Extends: Fx,
    compute: function(from, to, delta){
        this.value = Fx.compute(from, to, delta);
        this.fireEvent('motion', this.value);
        return this.value;
    },
    get: function(){
        return this.value || 0;
    }
});

Element.implement({
    reflect: function(arg){
        i = arg.img.clone();
        if(Browser.Engine.trident){
            i.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity=20, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+100*arg.ref+')';
            i.setStyles({'width':'100%', 'height':'100%'});
            return new Element('div').adopt(i);
        } else {
            var can = new Element('canvas').setProperties({'width':arg.width, 'height':arg.height});
            if(can.getContext){
                var ctx = can.getContext("2d");
                ctx.save();
                ctx.translate(0,arg.height-1);
                ctx.scale(1,-1);
                ctx.drawImage(i, 0, 0, arg.width, arg.height);
                ctx.restore();
                ctx.globalCompositeOperation = "destination-out";
                ctx.fillStyle = arg.color;
                ctx.fillRect(0, arg.height*0.5, arg.width, arg.height);
                var gra = ctx.createLinearGradient(0, 0, 0, arg.height*arg.ref);                    
                gra.addColorStop(1, "rgba(255, 255, 255, 1.0)");
                gra.addColorStop(0, "rgba(255, 255, 255, "+(1-arg.ref)+")");
                ctx.fillStyle = gra;
                ctx.rect(0, 0, arg.width, arg.height);
                ctx.fill();
                delete ctx, gra;
            }
            return can;
        }
    }
});

window.addEvent('domready', function(){
    $$('.MooFlowieze').each(function(mooflow){
        new MooFlow(mooflow);
    });
});