$(document).ready(function(){
	var li_count = 0;
	$.each($('#hori_scroll_cont li'), function() { 
		li_count++;
	});
	var a_width = parseFloat($("#hori_scroll_cont ul a").css('width'));
	var a_widths = (li_count * a_width);
	var li_margin_width = parseFloat($("ul.hori li").css('margin-right'));
	var li_margin_widths = (li_count -1) * li_margin_width;	
	total_width = a_widths + li_margin_widths;	
	$("#hori_scroll_cont ul").css('width', total_width + 'px'); 	
	var translation_factor = a_width + li_margin_width;
	
	
	//so there is always at least 3 items in the display when you scroll to the far end
	var items_in_display = 3;
	//the maximum amount the menu can be moved to the right
	var right_translation = ((-1 *total_width) + (a_width*items_in_display) + ((items_in_display-1) * li_margin_width));	
	$("#but_right").click(function(){
		//alert($(this).attr('class'));		
		if (!$(this).hasClass('inactive')){		
			var cur_tranlation = parseFloat($("#hori_scroll_cont ul.hori").css('left'));	
			$("#hori_scroll_cont ul.hori").css('left', (cur_tranlation - translation_factor) + 'px'); 
			setButtons();	
		}		
	});
 
	$("#but_left").click(function(){
		if (!$(this).hasClass('inactive')){
			var cur_tranlation = parseFloat($("#hori_scroll_cont ul.hori").css('left'));	
			$("#hori_scroll_cont ul.hori").css('left', cur_tranlation + translation_factor + 'px'); 
			setButtons();		
		}
	});
	
	function setButtons(){
		$("#but_right").removeClass('inactive');
		$("#but_left").removeClass('inactive');
		var cur_tranlation = parseFloat($("#hori_scroll_cont ul.hori").css('left'));	
		if (cur_tranlation == 0){
			$("#but_left").addClass('inactive');
		}
		if (cur_tranlation == right_translation){
			$("#but_right").addClass('inactive');
		}	
	}	
	
	$(".but").mouseover(function(){
      $(this).addClass("hover");
    }).mouseout(function(){
      $(this).removeClass("hover");
    })	
	
	setButtons();
	

	var encodedHtml = $('#hori_nav_content #selected').text();	
	 encodedHtml = encodedHtml.replace('&',"_");
     encodedHtml = encodedHtml.replace(' ',"_");
     encodedHtml = encodedHtml.replace(' ',"_");
	 encodedHtml = encodedHtml.replace('/',"_");
	 encodedHtml = encodedHtml.replace('\\',"_");
     encodedHtml = encodedHtml.toLowerCase();	
	var htmlStr = '<img src="uploads/images/search_banners/' + encodedHtml + '.jpg" height="112" width="717" />';	
	$("#banner_content").html(htmlStr);

	
  /*
  outerWidth
  */

});