var Jsbanner = Class.create();
//the following variables overwrite the jsbanner's magento back-end set up slide time, width and height
//var positionTop = 20; //buttons container div position top
//var positionLeft = 20; //buttons container div position left
//var transitionTime = 4000; //miliseconds, delay between slides
//var sliderWidth = 300; //slider width in pixels
//var sliderHeight = 200; //slider height in pixels


Jsbanner.prototype = {
    
    initialize: function(id, time, width, height, positionTop, positionLeft){
        this.id = id;
        this.skinUrl = null;
        this.prevId = null;
		this.time = time;
		this.width = width;
        this.height = height;
		//this.time = transitionTime;
		//this.width = sliderWidth;
		//this.height = sliderHeight;
		this.banners = Array();
		this.currentSlide = 1;		
		this.bannerCount = 0; 
		this.timer = null;
		this.transitionTimer = null;
		this.nextSlideTimer = null;
		this.positionTop = positionTop;
		this.positionLeft = positionLeft;


		//additional classes for the containing div
		var mainContainer = $('banner-main-container');
		mainContainer.setAttribute('style', 'height:' + this.height + 'px; width:' + this.width + 'px; overflow: hidden;');
		
    },
	
    run: function() {
        var fname = this.id + ".transition()";
        this.timer = setTimeout(fname, this.time);
        index = 1;
        var bannerId = this.id + "-" + index;
        new Effect.Move($(bannerId), {  y: -1 * this.height, mode: 'relative', transition: Effect.Transitions.full});
        $(bannerId).setStyle({ zIndex : '1' });
        $(bannerId).show();
        new Effect.Opacity($(bannerId), { duration:0.5, from: 0, to: 1 });
        this.setListIndicator(index);
    },
    
    createImageLinks: function(skinUrl, num) {
        this.skinUrl = skinUrl;
        var divContainer = $('promo-slider-image-container');
        var imSize = (21 * num) + 28;
        divContainer.setAttribute('style', 'float:left;');   
		divContainer.setAttribute('style', 'overflow:hidden;'); 		
        divContainer.style.width = imSize + 'px';
        divContainer.style.left = (this.positionLeft) + 'px';        
        divContainer.style.position = 'absolute';        
        divContainer.style.top = this.positionTop + 'px';        
        var imContainer = $('promoImages');
        imContainer.innerHTML = '';
        for(var i = 0; i < num; i++) {
            var imEl = document.createElement('img');
            imEl.setAttribute('id', 'imgBannerId_' + (i + 1));
            imEl.setAttribute('src', this.skinUrl + 'images/promo-slider-img.png');
            imEl.setAttribute('style', 'position:relative;  display:block;z-index:1000;');
            var aEl = document.createElement('a');            
            aEl.setAttribute('onclick', this.id + '.jumpToBanner(' + (i + 1) + ')');
            aEl.appendChild(imEl);
            var liEl = document.createElement('li');
            liEl.setAttribute('style', 'float:left;margin:0 6px 0 0;list-style:none;padding:0;');
            liEl.appendChild(aEl);
            imContainer.appendChild(liEl);
        }      
    },
   
    setListIndicator: function(index) {
        if(this.prevId != null) {
            var oldId = 'imgBannerId_' + this.prevId;
            $(oldId).src = this.skinUrl + 'images/promo-slider-img.png';
        }
        this.prevId = index;
        var imgId = 'imgBannerId_' + index;
        $(imgId).src = this.skinUrl + 'images/promo-slider-img-selected.png';                
    },
    
    jumpToBanner: function(index) {
        
		index--;
        clearTimeout(this.timer);
        this.currentSlide = index;
        this.showBanner();
        
        // Hide the previous banner
        var bannerId = this.id + "-" + this.prevId;
        $(bannerId).setStyle({ zIndex :'0'});
        new Effect.Move($(bannerId), {  y: this.height, mode: 'relative'});
       
        // Set the next banner to show
        this.advanceSlide(index);
        var fname = this.id + ".transition()";
        this.setListIndicator(this.currentSlide);
        this.timer = setTimeout(fname, this.time);
        
    },
    
    clearTimeouts: function() {
        $$('.jsbanner-image').each(function(e) {
		alert(e.identify());
            clearTimeout(e.identify());  
        });
        clearTimeout(this.id);    
    },
    
	transition: function() {        
        this.showBanner();
        this.hideBanner();
        this.advanceCurrentSlide();
        var fname = this.id + ".transition()";
		//alert(fname);
        this.setListIndicator(this.currentSlide);
        this.timer = setTimeout(fname, this.time);
	},

    setNextSlide: function() {
        this.advanceCurrentSlide();
        var fname = this.id + ".transition()";
        this.nextSlideTimer = setTimeout(fname, this.time);        
    },
    
    showBanner : function(){
        index = this.nextSlide();
        var bannerId = this.id + "-" + index;
        new Effect.Move($(bannerId), {  y: -1 * this.height, mode: 'relative', transition: Effect.Transitions.full});
        $(bannerId).setStyle({ zIndex :'1'});
        $(bannerId).show();
        new Effect.Opacity($(bannerId), { duration:0.5, from: 0, to: 1 });
    },
    
    hideBanner : function(){
        index = this.currentSlide ;
        var bannerId = this.id + "-" + index;
        $(bannerId).setStyle({ zIndex :'0'});
        //new Effect.Opacity($(bannerId), { duration:0.5, from: 1, to: 0 });
        new Effect.Move($(bannerId), {  y: this.height, mode: 'relative'});
        
    },
    
    addBanner : function(id) {
        this.banners.push = $(id);
        this.bannerCount = this.bannerCount + 1; 
        index = this.bannerCount;
        var bannerId = this.id + "-" + index;
        new Effect.Move($(bannerId), {  y: this.height, mode: 'relative', transition: Effect.Transitions.full});
    },
	
	advanceCurrentSlide : function() {
		bannerQty = this.bannerCount;
		switch(this.currentSlide) {
			case bannerQty : this.currentSlide = 1 ; break;
			default  : this.currentSlide++ ; break;
		}
	},
	
	advanceSlide : function(slideId) {
		bannerQty = this.bannerCount;
		switch(slideId) {
			case bannerQty : this.currentSlide = 1 ; break;
			default  : this.currentSlide++ ; break;
		}
	},
	
	
	nextSlide : function() {
		bannerQty = this.bannerCount;
		switch(this.currentSlide) {
			case bannerQty : return 1 ; break;
			default  : return this.currentSlide + 1 ; break;
		}
	},
	
	previousSlide : function() {
		bannerQty = this.bannerCount;
		switch(this.currentSlide) {
			case 1 : return bannerQty ; break;
			default  : return this.currentSlide - 1 ; break;
		}
	}

}