var HorizontalContentScroller = {
	
	duration : 400,
	
	init : function() {
	
		var content_scrollers = $('.content_scroller');
		
		$.each(content_scrollers, function(i, n) {
			var left_button = $('.left_border', n);
			var right_button = $('.right_border', n);
			
			left_button.data("is_clickable", true);
			right_button.data("is_clickable", true);
			
			ImagePreloader.load([
				"/media/thunder/09okc_strip_left_on.jpg",
				"/media/thunder/09okc_strip_left_off.jpg",
				"/media/thunder/09okc_strip_right_on.jpg",
				"/media/thunder/09okc_strip_right_off.jpg"
			]);
			
			content_scroller = $('.content_scroller_items', n);
			content_scroller.data("total_width_of_items", HorizontalContentScroller.getTotalItemsWidth(content_scroller));
			content_scroller.data("item_width", HorizontalContentScroller.getItemWidth(content_scroller));
			content_scroller.data("current_left", HorizontalContentScroller.getLeftAsInt(content_scroller));
			
			HorizontalContentScroller.updateButtons(left_button);
			
			left_button.click(function() { if($(this).data("is_clickable")) { HorizontalContentScroller.scrollBackward(content_scroller); } });
			right_button.click(function() { if($(this).data("is_clickable")) { HorizontalContentScroller.scrollForward(content_scroller); } });
		});
	},

	getLeftAsInt : function(content_scroller) {
		if (!content_scroller) { return 0; }
		
		var content_scroller_left = content_scroller.css('left');
		content_scroller_left = !content_scroller_left || content_scroller_left == "auto" ? 0 : parseInt(content_scroller_left.match(/[-]?[0-9]+/));
		
		return content_scroller_left;
	},
	
	getItemWidth : function(content_scroller) {
		if (!content_scroller) { return 0; }	
		var first_content_scroller_item = content_scroller.children()[0];

		return $(first_content_scroller_item).outerWidth(true);
	},
	
	getTotalItemsWidth : function(content_scroller) {
		if (!content_scroller) { return 0; }

		var num_of_content_scroller_items = content_scroller.children().size();

		return HorizontalContentScroller.getItemWidth(content_scroller) * num_of_content_scroller_items;
	},

	isAtBeginning : function(content_scroller) {
		if (!content_scroller) { return false; }
	
		return content_scroller.data("current_left") >= 0;		
	},

	isAtEnd : function(content_scroller) {
		if (!content_scroller) { return false; }
		
		var content_scroller_window = content_scroller.parents('.content')[0];

		return content_scroller.data("current_left") <= -(content_scroller.data("total_width_of_items") - content_scroller_window.offsetWidth - 10);
	},

	
	scrollBackward : function(content_scroller) {
		if (!content_scroller) { return; }
		if (HorizontalContentScroller.isAtBeginning(content_scroller)) { return; }

		var content_scroller_left = content_scroller.data("current_left");
		var new_content_scroller_left = content_scroller_left + content_scroller.data("item_width");

		HorizontalContentScroller.updateButtons(content_scroller, { off : true});
		$(content_scroller).animate({left : new_content_scroller_left}, HorizontalContentScroller.duration, "swing", function() { content_scroller.data("current_left", new_content_scroller_left); HorizontalContentScroller.updateButtons(this); });
	},
	
	scrollForward : function(content_scroller) {
		if (!content_scroller) { return; }
		if (HorizontalContentScroller.isAtEnd(content_scroller)) { return; }

		var content_scroller_left = content_scroller.data("current_left");
		var new_content_scroller_left = content_scroller_left - content_scroller.data("item_width");
		
		HorizontalContentScroller.updateButtons(content_scroller, { off : true});
		$(content_scroller).animate({left : new_content_scroller_left}, HorizontalContentScroller.duration, "swing", function() { content_scroller.data("current_left", new_content_scroller_left); HorizontalContentScroller.updateButtons(this); });
	},
	
	updateButtons : function(element, params) {
		if (!element) { return; }
		
		var off = params && params.off ? params.off : false;
		var left_off = params && params.left_off ? params.left_off : false;
		var right_off = params && params.right_off ? params.right_off : false;
		
		var content_scroller_holder = $(element).parents('.content_scroller')[0];
		var left_button = $($('.left_border', content_scroller_holder)[0]);
		var right_button = $($('.right_border', content_scroller_holder)[0]);
		var content_scroller = $($('.content_scroller_items', content_scroller_holder)[0]);
		
		left_button.data("is_clickable", !off & !left_off & !HorizontalContentScroller.isAtBeginning(content_scroller));
		right_button.data("is_clickable", !off & !right_off & !HorizontalContentScroller.isAtEnd(content_scroller));
		
		left_button_bg = left_button.css("background-image");
		if (left_button.data("is_clickable")) {
			left_button.css({"background-image" : left_button_bg.replace(/off/gi, 'on')});
		} else {
			left_button.css({"background-image" : left_button_bg.replace(/on/gi, 'off')});
		}
		
		right_button_bg = right_button.css("background-image");
		if (right_button.data("is_clickable")) {
			right_button.css({"background-image" : right_button_bg.replace(/off/gi, 'on')});
		} else {
			right_button.css({"background-image" : right_button_bg.replace(/on/gi, 'off')});
		}
	}

}

$(document).ready(HorizontalContentScroller.init);