var mcNuggets = Class.extend({
	/* enforced structure:
		 div				-> main wrapper
				div			-> navigational elements
				ul			-> unordered list of elements to be scrolled
					li(s)	-> elements to be scrolled. note: should be a block (ie display:block); 

	
		so with the aboved structure, it would be easy to traverse through the element
		width of the li elements should be uniform! set it in css
	
	*/
	
	init: function(wrapper_id, duration, num_scrolled, rows_shown){
		if($.browser.msie){
			 //alert("IE!");
		}else{
			 //alert("NOT IE!");
		}
		// do a check if the given wrapper_id starts with #
		if(wrapper_id.charAt(0) != "#") {
			 wrapper_id = "#"+wrapper_id;
		}
		
		this.wrapper_id = wrapper_id;
		this.duration = duration;
		this.num_scrolled = num_scrolled; /* TODO: do a optional param arg thingy*/
		
		if(!rows_shown){
			rows_shown = 1;
		}
		
		this.rows_shown = rows_shown;
		
		
		// object as expected in the enforced structure
		this.wrapper = $(wrapper_id);
		this.ul = $(this.wrapper_id + " > ul");
		this.nav = $(this.wrapper_id + " > .nav")
		this.li_array = $(this.ul).children();
		this.length = Math.ceil(this.li_array.length / this.rows_shown); // length-> num of li's in a row
		
		/*
			 given n elements, should scroll for n-1
			 if given n elements, and you want scroll k everytime
					ceil(n/ k) - 1?
					10, 5 -> 1
					10, 4 -> 2
					10, 6 -> 1
		*/
		
		

		// below deals with the widths issue
		this.widths = this.widths(this.li_array);
		this.max_width = this.max_width(this.widths);
		this.total_width = this.total_width(this.widths);
		
		// below deals with heights
		this.heights = this.heights(this.li_array);
		this.max_height = this.max_height(this.heights);
		
		
		this.cols_shown = Math.floor(this.wrapper.width()/this.max_width);
		
		//alert("total:"+this.length+" cols:"+this.cols_shown+" numscrolled:"+this.num_scrolled+" div:"+Math.floor(this.length/this.num_scrolled)+" rem:"+this.length % this.num_scrolled);
		this.scroll_count = Math.ceil(this.length/this.cols_shown) - 1;// - Math.floor(this.cols_shown/this.num_scrolled) ; // to count the scroll counter
		// if(this.length%this.scroll_count != 0){
		// 			this.scroll_count++;
		// 		}
		//alert(this.length+", "+this.cols_shown+", "+this.scroll_count);
		this.curr_count = 0;
		
	},
	start:function(){
		this.prep_css();
		this.prep_navigation();
	},
	prep_navigation: function(){
		// display the navigation
		// note: the navigation was initally defined as display:none
		//		in the top-level css
		this.nav.css("display", "block");
		
		// assign triggers to the navigation elements
		// get the nav elements first
		this.left_nav = this.nav.children(".left");
		this.right_nav = this.nav.children(".right");
		this.right_nav.css("display","block");
		this.left_nav.css("display","block");
		
		// set the left nav to hide, cos we're at the first li
		this.left_nav.css("display","none");
		
		// set the right to hide if there is only one li
		if(this.length<2){
			 this.right_nav.css("display","none");
		}
		//$("#position").text(this.curr_count  + ":" +this.scroll_count+", "+ this.ul.position().left);
		
		// set the height of the nav by setting the padding
		
		var magic_top = (this.max_height) / 2;// (max_height - height of img) / 2
		
		this.left_nav.css("padding-top",magic_top);
		this.left_nav.css("padding-bottom",magic_top);
		this.right_nav.css("padding-top",magic_top);
		this.right_nav.css("padding-bottom",magic_top);
		
		this.right_nav.bind("mousedown", {
			 wrapper:this
			 }, 
			 function(event){
			 var wrapper = event.data.wrapper;
			 // start with	0 -> 1, i would want to move the ul to -maxwidth * 1
			 //					1 -> 2, -maxwidth * 2
			 //					2 -> 3, -maxwidth * 3
			 if(wrapper.curr_count <= wrapper.scroll_count) {
					wrapper.curr_count++;
			 }
			 
			 var magic = (wrapper.curr_count) * (0-wrapper.max_width) * wrapper.cols_shown;
			 wrapper.ul.animate({left:magic}, { duration: wrapper.duration, queue: true });
			 
			 if(wrapper.curr_count == wrapper.scroll_count){
					 $(this).css("display","none");
			 }
			 if(wrapper.curr_count > 0 ){
					wrapper.left_nav.css("display","block");
			 }
			 //$("#position").text(wrapper.curr_count  + ":" +wrapper.scroll_count+", "+ wrapper.ul.position().left);
			 
					
		});
		
		this.left_nav.bind("mousedown", {
				 wrapper:this
					 }, 
					 function(event){

					 var wrapper = event.data.wrapper;
					 
					 // start with	3 -> 2, -maxwidth * 3 
					 //				 2 -> 1, -maxwidth * 2
					 //				 1 -> 0, -maxwidth * 1
					 if(wrapper.curr_count > 0) {
							wrapper.curr_count--;
					 }
					 
					 var magic = (wrapper.curr_count) * (0-wrapper.max_width) * wrapper.cols_shown;
					 wrapper.ul.animate({left:magic}, { duration: wrapper.duration, queue: true });
					 
					 if(wrapper.curr_count == 0){
								 $(this).css("display","none");
					 }
						 
					 if(wrapper.curr_count < wrapper.scroll_count ){
							wrapper.right_nav.css("display","block");
					 }
					// $("#position").text(wrapper.curr_count  + ":" +wrapper.scroll_count+", "+ wrapper.ul.position().left);
			});
		
	},
	prep_css: function(){
		// set the ul to a certain height and width
		
		this.ul.width(this.length * this.max_width);
		this.ul.css("overflow","hidden");
		this.wrapper.css("overflow", "hidden");
		this.wrapper.css("position","relative");
		this.ul.css("position","relative");
		
		
		//var magic_width = this.max_width;// * this.num_scrolled;
		
		//var magic_clip = "rec(0px, "+magic_width+"px, "+this.max_height+"px, 0px)";
		//alert(magic_clip);
		//this.ul.css("clip", magic_clip);	
		this.ul.height(this.max_height * this.rows_shown);
		

	},
	widths: function(li_array){
		
		var widths = new Array(li_array.length);
		for(var i = 0; i < li_array.length; i++){
				 widths[i] = $(li_array[i]).width() 
									+ parseInt($(li_array[i]).css("margin-left").split("px")[0]) 
									+ parseInt($(li_array[i]).css("margin-right").split("px")[0]); 
									// need to compensate for margin
			}
		return widths;
		 
	},
	max_width: function(widths_array){
		
		var max = 0;
		
		for(var i = 0; i < widths_array.length; i++){
				if(widths_array[i] > max) {
					 max = widths_array[i]; 
				}
			}
			return max;
	},
	total_width: function(widths_array){
		var t = 0;
		for(var i=0;i<widths_array.length;i++){
			 t = t + widths_array[i];
		}
		return t;
	},
	heights: function(li_array){
		
		var heights = new Array(li_array.length);
		for(var i=0; i<li_array.length; i++){
			 heights[i] = $(li_array[i]).height()
				+ parseInt($(li_array[i]).css("margin-top").split("px")[0]) 
				+ parseInt($(li_array[i]).css("margin-bottom").split("px")[0]); 
				// need to compensate for margin
		}
		return heights;
	},
	max_height: function(heights_array){
		
		var max = 0;
		for(var i=0; i<heights_array.length; i++){
			 if(heights_array[i] > max ){
					max = heights_array[i];
			 }
		}
		return max;
	}
	
});