/** 
 *  @class Carousel Widget.
 *  @author Paul DeCoursey paul@decoursey.net
 *  @version 0.3
 */

var DEBUG = false;

var Carousel = Class.create();

Carousel.prototype = {
	carousel: this,
    initialize: function(id, options) {
        if(DEBUG) showExtendedDebug();
        this.id = id;
        this.containerOffset = 0;
        this.currentPanel = 0;
        this.component = $(this.id);
        if(this.component) {
        	this.panels = this.component.select(".carouselPanel");
        	if(DEBUG) debug("[" + this.id + "] panels: " + this.panels.length);
        	this.container = new Element("div", {"class": "carousel_contiainer"});
        	this.backButton = new Element("div", {"class": "carouselBack"}).update(" ");
        	this.nextButton = new Element("div", {"class": "carouselNext"}).update(" ");
        	this.backButton.observe('click', this.previousClicked.bind(this));
        	this.nextButton.observe('click', this.nextClicked.bind(this));
        	var wide = 0;
        	this.panelWidth = 0;
        	for(var i=0;i<this.panels.length;i++) {
        		var e = $(this.panels[i]);
        		var w = e.getWidth();
        		wide += w;
        		if(w>this.panelWidth) {
	        		this.panelWidth = e.getWidth();
	        	}
        		this.container.insert(e);
        		e.setStyle({float: "left"});
        	}
        	if(DEBUG) debug("[" + this.id + "] panels total width: " + wide);
        	this.container.setStyle({width: wide+"px"});
        	this.component.insert(this.container);
        	this.component.insert(this.backButton);
        	this.component.insert(this.nextButton);
        	this.containerOffset = this.container.positionedOffset()[0];
        	if(DEBUG) debug("[" + this.id + "] containerOffset " + this.containerOffset);
        	this.autoScrollCount = 0;
        	this.autoScrollInterval = setInterval(this.autoScroll.bind(this), 5000);
        	if(options.navId) {
        		this.navComponent = $(options.navId);
        		if(this.navComponent) {
		        	this.navWrapper = new Element("div", {"class": "navShell"});
		       		this.navComponent.appendChild(this.navWrapper);
        			this.navItems = new Array();
        			var wide = 0;
		        	for(var i=0;i<this.panels.length;i++) {
		        		var e = $(this.panels[i]);
		        		var nb = new Element("div", {"class": i==0?"panel_nav_selected":"panel_nav", id: "panel"+i});
        				nb.observe('click', this.nbClicked.bind(this));
		        		this.navItems[i] = nb;
		        		this.navWrapper.appendChild(nb);
		        		wide += nb.getWidth();
		        		nb.index = i;
		        	}
		        	if(DEBUG) debug("[" + this.id + "] panels total width: " + wide);
        			this.navWrapper.setStyle({width: wide+"px"});
        		}
        	}
        }
    },
    nbClicked: function(event) {
    	var target = Event.element(event);//(window.event) ? event.srcElement : event.target;
  		if(DEBUG) debug("[" + this.id + "] nb clicked " + target.index);
    	clearInterval(this.autoScrollInterval);
  		this.currentPanel = target.index;
    	this.scrollContainerTo(this.currentPanel*this.panelWidth*-1+this.containerOffset);
    },
    nextClicked: function(auto) {
  		if(DEBUG) debug("[" + this.id + "] next clicked");
  		if("auto"!=auto) {
    		clearInterval(this.autoScrollInterval);
  		}
  		this.currentPanel++;
  		if(this.currentPanel>=this.panels.length) {
  			this.currentPanel = 0;
  		}
    	this.scrollContainerTo(this.currentPanel*this.panelWidth*-1+this.containerOffset);
    },
    previousClicked: function(auto) {
  		if(DEBUG) debug("[" + this.id + "] previous clicked");
   		clearInterval(this.autoScrollInterval);
  		this.currentPanel--;
  		if(this.currentPanel<0) {
  			this.currentPanel = this.panels.length-1;
  		}
    	this.scrollContainerTo(this.currentPanel*this.panelWidth*-1+this.containerOffset);
    },
    scrollContainerTo: function(xpos) {
    	if(this.scrollInterval) {
    		clearInterval(this.scrollInterval);
    	}
    	this.targetScrollPosition = xpos;
    	this.startScrollPosition = this.container.positionedOffset()[0];
    	this.changeScrollPosition = this.targetScrollPosition - this.startScrollPosition;
    	this.pulseWidth = 10/900;
    	this.pulsePosition = 0;
    	this.scrollInterval = setInterval(this.scrollPulse.bind(this), 10);
    },
    scrollPulse: function() {
    	var left = this.container.positionedOffset()[0];
    	this.pulsePosition += this.pulseWidth;
    	if(this.pulsePosition>=1.0) {
	    	this.container.setStyle({left: (this.targetScrollPosition)+"px"});
	    	clearInterval(this.scrollInterval);
	    	this.scrollInterval = null;
	    	this.navItems.each(function (item) {
	    			item.className = "panel_nav";
	    		});
	    	this.navItems[this.currentPanel].className = "panel_nav_selected";
    	} else {
	    	this.container.setStyle({left: (this.startScrollPosition+this.changeScrollPosition*this.pulsePosition)+"px"});
	    }
    },
    autoScroll: function() {
    	this.autoScrollCount++;
    	if(this.autoScrollCount>=this.panels.length*2) {
    		clearInterval(this.autoScrollInterval);
    	}
    	this.nextClicked("auto");
    }
};


var car;


function loadCarousel() {
	car = new Carousel();
	car.initialize("carousel", {navId: "carouselNav"});
}