/**
 * Function to calculate text width :)
 */
$.fn.textWidth = function(textToMeasure) {
	var sensor = $('<a />').css({margin: 0, padding: 0, display: 'none'}).text(textToMeasure);
	$("#tabs_panes_h").append(sensor);
	var width = parseInt(sensor.width());
	sensor.remove();
	return width;
};


$(document).ready(function(){

	var tab_children = $(".tabs").children();
	var total_tab_width = 0;
	var temp_tab_width = 0;
	var tab_padding = 4;
	var tab_step = 1;
	var tab_window_width = parseInt($("#tab_cover").width()) - parseInt($("#left_button").width()) - 7;
	
	var left_button_status = 1;
	var right_button_status = 1;
	
	tab_children.each(function(){
		temp_tab_width = tab_children.textWidth($(this).find('a').text()) + 20;
		if ( temp_tab_width > 50 ) {
			$(this).css('width', temp_tab_width + 'px');
		}
		else {
			temp_tab_width = 50;
		}
		total_tab_width += temp_tab_width + tab_padding;
	});
	
    if(total_tab_width < tab_window_width){
        $("#left_button").css("visibility", "hidden");
        $("#right_button").css("visibility", "hidden");
    }
	
	$(".tabs").width(total_tab_width);
		
	$(function() {
		// setup ul.tabs to work as tabs for each div directly under div.panes 
		$("ul.tabs").tabs("div.panes > div");

		// fire an action to specify default active/non_active tabs
		setActiveAndNonActiveTabs();

		$("ul.tabs li a").click(function() {
			setActiveAndNonActiveTabs();
		});

		function setActiveAndNonActiveTabs() {
			$("ul.tabs li a").parent().removeClass("active_tab").removeClass("non_active_tab").addClass("non_active_tab");
			$("ul.tabs li a.current").parent().removeClass("non_active_tab").addClass("active_tab");
		}
	});
	
	$("#left_button").click(function(){
		
		frame_position = parseInt($("#tab_h").css("margin-left"));

		var new_margin_left = 0;
		var total_margin_left = 0;
		var temp = 0;
		var tab_step_temp = tab_step-1;

		/**
		 * Calculating previous window position
		 */
		tab_children.each(function() {
			if ( tab_step_temp > 0 ) {
				temp = parseInt($(this).width()) + tab_padding;
				if ( new_margin_left + temp > tab_window_width ) {
					tab_step_temp--;
					total_margin_left += new_margin_left;
					if ( tab_step_temp > 0 ) {
						new_margin_left = temp;
					}
				}
				else {
					new_margin_left += temp;
				}
			}
		});
		
		total_margin_left -= new_margin_left;
		if ( total_margin_left > 0 ) {
			total_margin_left = 0-total_margin_left;
		}
		
		if ( (left_button_status == 1)&&(frame_position <0) ) {
			left_button_status = 0;
			$("#tab_h").animate(
				{
					marginLeft: total_margin_left + "px"
				},
				500,
				function() {
					tab_step--;
					left_button_status = 1;
				}
			);
		}
		
	});
	
	$("#right_button").click(function(){
	
		frame_position = -parseInt($("#tab_h").css("margin-left"));
		
		tab_h_overflow = total_tab_width - tab_window_width;

		var new_margin_left = 0;
		var total_margin_left = 0;
		var temp = 0;
		var tab_step_temp = tab_step+1;
		
		/**
		 * Calculating next window position
		 */
		tab_children.each(function() {
			if ( tab_step_temp > 1 ) {
				temp = parseInt($(this).width()) + tab_padding;
				
				if ( new_margin_left + temp > tab_window_width ) {
					tab_step_temp--;
					
					total_margin_left += new_margin_left;
					if ( tab_step_temp > 0 ) {
						new_margin_left = temp;
					}
				}
				else {
					new_margin_left += temp;
				}
			}
		});
		
		if ( total_margin_left > 0 ) {
			total_margin_left = 0-total_margin_left;
		}
		
		if ( (right_button_status == 1) && (frame_position < tab_h_overflow) ) {
			right_button_status = 0;
			$("#tab_h").animate(
				{
					marginLeft: total_margin_left + "px"
				},
				500,
				function() {
					tab_step++;
					right_button_status = 1;
				}
			);
		}
		
	});
	
	$("#test").click(function(){
		alert(total_tab_width);
	});
	
});