/* ********************************************************************************************************************
**
**	Name: 			bsPortfolio
**	
**	Version: 		0.1																			
** 	Author: 		Ben Sekulowicz
**
******************************************************************************************************************** */

var olProjects = Class.create();

olProjects.prototype = {	
	
	slide: 0,
	total: 0,
	value: 0,
	width: 0,
	
	/* *********************************************************************************************************************
	
	INITIALIZE
	
	********************************************************************************************************************* */
	
   	initialize: function(page) {
	
		// When the page has fully loaded ...
		Event.observe(window, "load", function() {
								
			// If we have the element, continue
			if ($("olProjectsA")) {
				
				// Add class to BODY
				$$("body").first().addClassName("haveJs");
				
				// Set up the primary width variable
				this.width = $$("#olProjects li").first().getWidth();
				
				// Get the total number of projects
				this.total = $$("#olProjects li").size();
				//alert(this.total);
				
				// Set all LI to a pixel width
				$$("#olProjects li").each(function(li) { li.style.width = this.width + "px"; }.bind(this));
				
				// Set the list to the multiple of the above width
				$("olProjectsA").style.width = (this.width * $$("#olProjectsA li").size()) + "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($("olProjects"), "<div id=\"olProjectsBtns\"><div id=\"olProjectsBtnsP\"></div><div id=\"olProjectsBtnsN\"></div></div>");
		
		// Observe onClick for each element
		Event.observe($("olProjectsBtnsP"), "click", this.buttonsDecrement.bindAsEventListener(this));
		Event.observe($("olProjectsBtnsN"), "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($("olProjectsA"), "<div id=\"olProjectsB\"><div id=\"olProjectsBT\"></div><div id=\"olProjectsBS\"></div></div>");
		
		// Modify the size of the slider
		$("olProjectsBS").style.width = ($("olProjectsBS").getWidth() / $$("#olProjectsA li").size()) + "px";
		
		// Create the slider element
		this.sl = new Control.Slider("olProjectsBS","olProjectsBT", { 
			range: $R(1, $$("#olProjectsA li").size() - 1),
			onSlide: this.slideSlide.bind(this),
			onChange: this.slideChange.bind(this)
		});
	},
	
	/* ****************************************************************************************************************** */
	
	slideSlide: function(s) {
		// Update global var
		this.slide = Math.round(s);
		
		// Move the list
		$("olProjectsA").style.marginLeft = "-" + Math.round((s - 1) * this.width) + "px";
	},

	/* ****************************************************************************************************************** */

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

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