var ImageBar = Class.create();

ImageBar.prototype = {	
	
	slide: 0,
	total: 0, // number of li elements
	value: 0, //
	width: 0, // size of one li elemet
	totalwidth: 0, // total size (sum) of all li elements 
	
		
	/* INITIALIZE  */
	
   	initialize: function(page) {
	
		// When the page has fully loaded ...
		Event.observe(window, "load", function() {
								
			// If we have the element, continue
			if ($("ImageBarArea")) {
				
				// Add class to BODY
				$$("body").first().addClassName("withJs");				
				
				// Get the total number of projects
				this.total = $$("#ImageBar li").size();
			
                
				
				for (var i = 0; i < (this.total) ; i++) {
				    this.width = $$("#ImageBar li")[i].getWidth();
				    this.totalwidth += this.width;

				}

				
				this.width = $("ImageBar").getWidth();
				this.total = (this.totalwidth / (this.width ));
				

          	// Set the list to the multiple of the above width
				$("ImageBarArea").style.width = (this.totalwidth) + "px";
				
				// Create the slider ...
				this.slideCreate();
				
				// Create the buttons ...
				this.buttonsCreate();
			}		
			
		}.bindAsEventListener(this));
	},
	
	/* BUTTON FUNCTIONS */
	
	buttonsCreate: function() {
		// Add slider elements to the DIV
		new Insertion.After($("ImageBar"), "<div id=\"ImageBarButtons\"><div id=\"ImageBarButtonsLeft\"></div><div id=\"ImageBarButtonsRight\"></div></div>");
		
		// Observe onClick for each element
		Event.observe($("ImageBarButtonsLeft"), "click", this.buttonsDecrement.bindAsEventListener(this));
		Event.observe($("ImageBarButtonsRight"), "click", this.buttonsIncrement.bindAsEventListener(this));
	},
	
	/* ************ */
	
	buttonsDecrement: function() { 
		if (this.value > 1) {
			this.value --;
		} else  {
			this.value = 0;
		}
		//print out the number to scroll to.
		this.sl.setValue(this.value - 1);
	},
	
	/* ******** */
	
	buttonsIncrement: function() { 
		if (this.value < this.total) {
			this.value ++;
		} else  {
			this.value = this.total;
		}
		//print out the number to scroll to.
		this.sl.setValue(this.value + 1);
	},
	
	/*  SLIDER FUNCTIONS */
	
	slideCreate: function(s) {
	    
		// Add slider elements to the DIV
		new Insertion.After($("ImageBarArea"), "<div id=\"ImageBarScrollbar\"><div id=\"ImageBarScrollbarTrack\"></div><div id=\"ImageBarScrollbarSlider\"></div></div>");
		
		// Modify the size of the slider
		$("ImageBarScrollbarSlider").style.width = ($("ImageBarScrollbarSlider").getWidth() / this.total) + "px";
		
		// Create the slider element
		this.sl = new Control.Slider("ImageBarScrollbarSlider","ImageBarScrollbarTrack", { 
			range: $R(1, this.total ),
			onSlide: this.slideSlide.bind(this),
			onChange: this.slideChange.bind(this)
		});
	},
	
	/* ********* */
	
	slideSlide: function(s) {
		// Update global var
		this.slide = Math.round(s);
		
		// Move the list
		$("ImageBarArea").style.marginLeft = "-" + Math.round((s - 1) * this.width) + "px";
	},

	/* ***** */

	slideChange: function(s) {
		// Update global var
		this.slide = Math.round(s);
		

		// Move the list
		$("ImageBarArea").style.marginLeft = "-" + Math.round((s - 1) * this.width) + "px";
	}

        /* ***** end */	
	}