/* •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
   ••  MobileTail main JS 	                                        ••
   •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

   1. Search forms
   2. Tabs
   3. Hover boxes
   4. Shortcut boxes
   5. Product list

---------------------------------------------------------------------- */

// Runs the code below when the DOM is loaded
$(function(){
	/* 1. Search forms
	•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
	// Hide the submit/search button if javascript is enabled
	$(".submit").addClass("hidden");
	// And also do show the questionmark if javascript in enabled
	$("img.question").addClass("visible");
	// Add class to the fieldset so that is looks better with both js and without
	$("#product_search_form fieldset").addClass("js");

	// Uniform the forms
	$("#search_options select, #search_options input").uniform();
	
	// Setup the tooltip
	$("#product_search_form img[title]").tooltip();
	
	// When a user searches for a product, scroll down to the results & also do filter
	$('#search_options select, #search_options input').change(function() {
		
		// Display the "loading" gif and fade
		$("#ajax_loader").css("visibility","visible"); 
		$("#products div.body").fadeTo(0, 0.4);
		
		// Create the animation to scroll down
		$('html, body').animate({
			scrollTop: $("#menu").offset().top
		}, 400, function() {
			// When scrolled down, do the rest
			$.post($("#product_search_form").attr("action"), $("#product_search_form").serialize(), null, "script");
		  	// Do not follow the standard href
			return false;
		});
	});
	
	/* 2. Tabs
	•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
	// Creates the om hover effect on tabs in the main design
	$("#tabs li.normal").mouseleave(function(){
	    $(this).removeClass("hover");
    });

	$("#tabs li.normal").mouseenter(function(){
	    $(this).addClass("hover");
    });

	// If a user clicks on the tab , get the user there. Live because you should only be able to click an hovered tab.
	$("#tabs li.hover").live("click", function () {
		open($("#tabs li.hover a").attr("href"), "_self");
		return false;
    });
	
	/* 3. Hover boxes
	•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
	// Add the hover class. Live because of the fact that we filter things out by AJAX.
	$(".hover_box").live("mouseleave", function(){
	    $(this).removeClass("hover");
    });
	$(".hover_box").live("mouseenter", function(){
		/* Clear all other hover states if any (caused by user going back in the browser) */
		$(".hover").removeClass("hover");
	    $(this).addClass("hover");
    });
	 
	// If a user clicks anywhere on a product or navigation box, follow the link
	$(".hover_box").live("click", function () {
		open($("div.hover a").attr("href"), "_self");
		return false;
    });

	/* 4. Shortcut boxes
	•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
	// Creates the om hover effect on the shortcut boxes
	$(".shortcut li").mouseleave(function(){
	    $(this).removeClass("hover");
	});
	$(".shortcut li").mouseenter(function(){
	    $(this).addClass("hover");
	});

	// If a user clicks anywhere on the <li> on a shortcut box, open the URL
	$(".shortcut li").click(function(){ 
		open($(".shortcut li.hover a").attr("href"), "_self");
		return false;
	});

	/* 5. Products list
	•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */		
	// Enables sorting by clicking on the corresponding title
	$("#products div.header div").live("click", function (){
		var chosen_value = $(this).attr("class").split(" ",1);
		var previous_value = $("#sort_by").attr("value");

		// Make sure that the AJAX request is not sent if already sorted correctly
		if (previous_value == chosen_value)
			return false;
		else
			$("#ajax_loader").css("visibility","visible"); // Display the "loading" gif
			$("#products div.body").fadeTo(0, 0.4);
			$("#sort_by").attr("value", chosen_value);
			$.post($("#product_search_form").attr("action"), $("#product_search_form").serialize(), null, "script");
			return false;
		end
	});

	// Creates the om hover effect on the products
	$("#products div.body div.item").live("mouseout", function(){
	    $(this).removeClass("hover");
    });
	$("#products div.body div.item").live("mouseover", function(){
	    $(this).addClass("hover");
    });

	// If a user clicks anywhere on the product, open the operators page, also works with small_info.. div used with prepaid broadband
	$("#products div.body div.item").live("click", function () { 
		open($("#products div.body div.hover div.information a, #products div.body div.hover div.small_information a").attr("href"));
		return false;
    });

	// So that the admin-interface will still open links correctly - override the above /go link
	$("#products div.body div.item div.admin_box a").live("click", function () {
		window.location.href = $(this).attr("href");
		return false;
	});

});