/**
 *  Document   : BannerAds
 *  Created on : 28-Jul-2010, 11:38:39
 *  Author     : Michal Wrzesniewski <mike@3wise-solutions.com>
 */

Effect.Scroll = Class.create(Effect.Base, {
    initialize: function(element) {
        this.element = $(element);
        var options = Object.extend({
            x:    0,
            y:    0,
            mode: 'absolute'
        } , arguments[1] || {} );
        
        this.start(options);
        
    },
    setup: function() {
        if (this.options.continuous && !this.element._ext ) {
            this.element.cleanWhitespace();
            this.element._ext = true;
            this.element.appendChild(this.element.firstChild);
        }

        this.originalLeft = this.element.scrollLeft;
        this.originalTop = this.element.scrollTop;

        if(this.options.mode == 'absolute') {
            this.options.x -= this.originalLeft;
            this.options.y -= this.originalTop;
        } else {

    }
    },
    update: function(position) {
        this.element.scrollLeft = this.options.x * position + this.originalLeft;
        this.element.scrollTop  = this.options.y * position + this.originalTop;
    }
});



var Slideshow = Class.create({
    initialize: function(conf) {
        Object.extend(this, conf || {});
        if(this.id && $(this.id)) {
            this.element = $(this.id);
        }
        this.links = [];
        this.images = [];
    },
    id:'slideshow',
    width:400,
    height:200,
    effect:'scroll',
    slideDuration: 4,
    transitionDuration: 2,
    showLinks: false,
    linkStyle: 'dots', //- 'numbers' or 'dots'
    linkAlign: 'center', //- left right or center

    imageContainerId: 'scroll-inner',
    linkContainerId: null,
    loadCount: 0,
    links: null,
    images: null,
    scroll: null,
    currentLink : null,
    currentSlide : 1,
    isLoaded: false,
    
    addImage : function (options) {
        //this.imageCount++;

        var i = this.images.length;
        this.images[i] = new Element("IMG");
        this.images[i].setAttribute("src", options.image);
        this.images[i].setAttribute("id", this.id+"-item-" + (i+1));
        this.images[i].setStyle({
            width: this.width + 'px'
//            ,height: this.height + 'px'
        });
        

        if(i == 0) { //- adjust size of banner viewport to first image (they should all be the same size anyway)

            this.render();


        }
        

        this.images[i].className = "item";

        if(this.effect == 'fade') {
            this.images[i].setStyle({display:'none'});
        }

        this.scrollInner.appendChild(this.images[i]);

        this.images[i] = $(this.images[i]);

        if(options.url) {
            this.images[i].observe('mouseover', function(event) {
                Event.stop(event);
                this.style.cursor = "pointer";
            });
            
        }
        this.images[i].observe('click', function(event, options) {
            if(this.timer) clearInterval(this.timer);
            Event.stop(event);
            if(!options.url) return;
            if(options.target == '_blank') {
                window.open(options.url, '');
            }
            else {
                window.location.href = options.url;
            }
        }.bindAsEventListener(this, options));


        this.images[i].observe("load", this.checkAllLoaded.bindAsEventListener(this));
        this.checkAllLoaded();

        //- if we want number links and if theres somewhere to put them!
        if(this.showLinks && this.scrollLinks) {
            
            i = this.links.length;
            this.links[i] = new Element('A');
            this.links[i].writeAttribute("href", "#");
            this.links[i].writeAttribute("rel", ''+(i+1));
            this.links[i].id = this.id+'-link' + (i+1);
            if(!i) {
                this.currentLink = this.links[i];
                this.links[i].className = 'active_link';
            }

            if(this.linkStyle == 'numbers') {
                this.links[i].style.margin = '0 5px';
            }

            this.links[i].update( this.linkStyle == 'dots' ? '&bull;' : (i+1) );
            $(this.id+'-scroll-links').appendChild(this.links[i]);
            this.links[i] = $(this.links[i]);

            this.links[i].observe("click", function(event) {
                Event.stop(event);
                var el = Event.element(event);
                this.currentLink.className = "";
                el.className = "active_link";
                el.siblings().invoke("removeClassName", "active_link");
                this.currentLink = this;
                this.showSlide( el.getAttribute('rel') );

                return false;
            }.bindAsEventListener(this));

        }
    },
    checkAllLoaded : function(event) {

        this.loadCount++;

        if(!this.isLoaded && this.loadCount >= this.images.length) {
            this.isLoaded = true;

            // make sure we are on the first frame
            this.showSlide(1);

            if(this.showLinks) {
                $(this.linkContainerId).appear({
                    duration: 1
                });
            }

        }
    },
    
    showSlide: function(index) {

        if(this.timer) {
            window.clearTimeout(this.timer);
            this.timer = null;
        }

        this.currentSlide = index;

//        var container = $(this.id+'-scroll-wrapper');
        var element = $(this.id+'-item-' + index);




        var container_y = Position.cumulativeOffset(this.scrollWrapper)[1];
        var container_x = Position.cumulativeOffset(this.scrollWrapper)[0];

        var element_y = Position.cumulativeOffset($(element))[1];
        var element_x = Position.cumulativeOffset($(element))[0];

        if(this.currentEffect && this.currentEffect.state === "running") {
            this.currentEffect.cancel();
        }

        var effectAfterFinish = function() {
            this.timer = window.setTimeout(this.nextSlide.bind(this), (this.slideDuration*1000));
        }.bind(this);

        if(this.effect=='scroll'){
            this.currentEffect = new Effect.Scroll(this.scrollWrapper, {
                x:(element_x - container_x),
                y:(element_y - container_y),
                duration: this.transitionDuration,
                afterFinish: effectAfterFinish,
                transition: Effect.Transitions.sinoidal
            });
        }
        else if(this.effect=='fade'){
            
            element.appear({
                duration: this.transitionDuration,
                afterFinish: effectAfterFinish
            })
            .siblings()
            .invoke('fade', {
                duration: this.transitionDuration
            });

        }

    },
    nextSlide: function() {

        this.currentSlide++;
        if(this.currentSlide > this.images.length)
            this.currentSlide = 1;

        if(this.showLinks) {
            this.currentLink.className = "";
            this.currentLink = $(this.id+'-link' + this.currentSlide);
            if(this.currentLink) {
                this.currentLink.siblings().invoke("removeClassName", "active_link");
                this.currentLink.className = "active_link";
            }
        }

        //Slider.scroll.toElement("item_" + this.currentSlide);
        //Effect.ScrollTo("item_" + this.currentSlide);
        this.showSlide(this.currentSlide);

    },
    render: function() {
        
            this.element.addClassName(this.effect);

            this.scrollBg = new Element('DIV',{
                id:this.id+'-scroll-bg',
                className:'scroll-bg',
                style:'width:'+ this.width + 'px'//;height:'+this.height+'px;'
            })

            this.scrollWrapper = new Element('DIV',{
                id: this.id+'-scroll-wrapper',
                className: 'scroll-wrapper',
                style:'width:'+ this.width + 'px'//;height:'+this.height+'px;'
            });

            this.scrollLinks = new Element('DIV',{
                id:this.id + '-scroll-links',
                className:'scroll-links',
                style:'display:none;width:'+this.width+'px'
            });

            this.scrollInner = new Element('DIV',{
                id:this.id+'scroll-inner',
                className:'scroll-inner'
            })

            this.element.insert(this.scrollBg);
            
            this.scrollBg.insert({
                top: this.scrollWrapper,
                bottom: this.scrollLinks
            });

            this.scrollWrapper.insert(this.scrollInner)
            
            this.linkContainerId = this.id+'-scroll-links';
    }
});