/*
E-Delivery Image Slider

Version: 0.3

License:
MIT-style license. (http://opensource.org/licenses/mit-license.php)

Copyright:
Copyright (c) 2009 [Ruben Sosenke]

Author:
Ruben Sosenke
	
Redistributions of source code must retain the above license, copyright and author notice

TODO:
Css classes as options

*/

var eImageSlider = new Class({

    Implements: [Options],
    options: {
        elapse: 2, //transition time
        images: 0, //images quantity
        numbersPositionV:'top', //vertical numbers position
        numbersPositionH:'left',//horizontal numbers position
        showNumbers:true,//show the numbers
        showPreload:false
    },
    initialize: function(containerId, options) {
        this.setOptions(options);
        this.container = $(containerId);
        this.width = this.container.getStyle('width').toInt();
        this.list = this.container.getElements('ul')[0];
        var lis = this.list.getElements('li');
        if(this.options.images === 0 || this.options.images > lis.length){
            this.options.images = lis.length;
        }else{
            this.removeImages();
        }
        this.list.setStyle('width',this.width * this.options.images);
        this.timerId = 0;
        this.currentImage = 0;
        if(this.options.showPreload){
           this.createLoader();
        }else{
            if(this.options.showNumbers){
                this.createNumbers();
                this.setNumbersPosition();
            }
            this.start();
        }
    },
    removeImages:function(){
        if(this.options.images< this.list.getElements('li').length){
            this.list.getElements('li').each(function(item, index){
                if(index+1>this.options.images){
                    item.destroy();
                }
            }.bind(this));
        }
    },
    createLoader:function(){
        var loader = new Element('div',{
            'class':'slider_progress',
            'styles':{
                'width':this.container.getStyle('width').toInt()-50,
                'margin':'0 auto',
                'margin-top':this.container.getStyle('height').toInt()/2
            }
        });
        var progress = new Element('div');
        progress.inject(loader);
        loader.fade('out');
        loader.inject(this.container);
        loader.fade('in');
        var images = this.list.getElements('img');
        var imagesAr = new Array();
        images.each(function(item, index){
            item.setStyle('display','none');
            imagesAr.push(item.get('src'));
        });
        var myImages = new Asset.images(imagesAr, {
            onComplete: function(){
                images.each(function(item, index){
                    item.setStyle('display','');
                });
                loader.fade('out');
                loader.destroy();
                if(this.options.showNumbers){
                    this.createNumbers();
                    this.setNumbersPosition();
                }
                this.start();
            }.bind(this),
            onProgress:function(counter, index){
                var x = ((this.container.getStyle('width').toInt()-50) * (counter+1))/this.options.images;
                progress.tween('width',x);
            }.bind(this),
            onError:function(counter, index){
                
            }
        });
    },
    setNumbersPosition:function(){
        var numList=this.container.getElements('ul.slider_num_list')[0];
        var lis=numList.getElements('li');
        var totalW = this.width;var totalH = this.container.getStyle('height').toInt();
        var lisSizeW=0;var lisSizeH=0;var top=0;var left=0;
        lis.each(function(item, index){
            lisSizeW+= item.getSize().x;lisSizeH= item.getSize().y;
        });
        if(this.options.numbersPositionH === 'right'){
            left=totalW-lisSizeW - ((lisSizeW/this.options.images)/2 *(this.options.images-1));
        }else{left=lisSizeW/this.options.images;}
        if(this.options.numbersPositionV === 'bottom'){
            top=lisSizeH*2*-1;
        }else{top=(totalH+ (lisSizeH/2))*-1;}
        numList.setStyles( {'left': left+'px','top': top+'px'});
    },
    createNumbers: function() {
        var ul = new Element('ul', {
            'styles': {'position': 'relative','padding-left': '0','list-style': 'none'},
            'class':'slider_num_list'
        });
        var cssClass = 'selected_slide';
        for (var i = 0; i < this.options.images; i+=1) {
            if (i > 0) { cssClass = 'regular_slide'; }
            cssClass+=" slider_numbers";
            var li = new Element('li', {
                'id': this.container.get('id')+'_li_' + i,
                'events': {
                    'click': function(evt) {
                        $clear(this.timerId);
                        this.enableNumber(this.container.get('id')+'_li_' + this.currentImage,false);
                        this.enableNumber(evt.target,true);
                        var n = evt.target.get('id').split('_')[evt.target.get('id').split('_').length-1];
                        this.currentImage = n.toInt();
                        this.list.tween('left', (this.currentImage * this.width) * (-1));
                        this.timerId = this.moveForward.periodical(this.options.elapse * 1000, this);
                    } .bind(this)
                },
                'html': i + 1,
                'styles': {'float': 'left','cursor': 'pointer'},
                'class': cssClass
            });
            li.inject(ul);
        }
        ul.inject(this.container);
    },
    moveForward: function() {
        if(this.options.showNumbers){
            this.enableNumber(this.container.get('id')+'_li_' + this.currentImage,false);
        }
        this.currentImage = this.currentImage + 1;
        if (this.currentImage == this.options.images) { this.currentImage = 0; }
        if(this.options.showNumbers){
            this.enableNumber(this.container.get('id')+'_li_' + this.currentImage,true);
        }
        this.list.tween('left', (this.currentImage * this.width) * (-1));
    },
    start: function() {
        this.list.setStyle('left', '0');
        this.timerId = this.moveForward.periodical(this.options.elapse * 1000, this);
    },
    enableNumber:function(liId, enable){
        var li = $(liId);
        if(enable){
            li.addClass('selected_slide');li.removeClass('regular_slide');
        }else{
            li.removeClass('selected_slide');li.addClass('regular_slide');
        }
    }
});