/*
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.isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
        if (!this.isIE6) {
            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 * -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');
        }
    }
});