$(document).ready(function() {

	$("#singleContentContainer").queryLoader2();

	$('#tabMenu > li').click(function(){        
    //remove the selected class from all LI    
    $('#tabMenu > li').removeClass('selected');    
    //Reassign the LI
    $(this).addClass('selected');    
    //Hide all the DIV in .boxBody
    $('.boxBody div').slideUp('1500');    
    //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
    $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');    
  }).mouseover(function() {
    //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest    
    $(this).addClass('mouseover');
    $(this).removeClass('mouseout');     
  }).mouseout(function() {    
    //Add and remove class
    $(this).addClass('mouseout');
    $(this).removeClass('mouseover');      
  });
		
	$('#dropdown').hover(
			function () {
				//change the background of parent menu				
				$('#dropdown li a.parent').addClass('hover');
				//display the submenu
				$('#dropdown ul.children').show();
			},
			function () {
				//change the background of parent menu
				$('#dropdown li a.parent').removeClass('hover');			

				//display the submenu
				$('#dropdown ul.children').hide();
			}
		);

		
	//INICIALIZAR EL MENU
	$('.kwicks').kwicks({
		maxWidth : 205,  // required attribute
		spacing : 5
	});
	
	//ESCONDER TODOS LOS DIVS
	function hideAll(){
		$('#inicioDiv').hide();
		$('#noticiasDiv').hide();
		$('#galeriaDiv').hide();
		$('#rankingDiv').hide();
		$('#boletinDiv').hide();
		$('#contactoDiv').hide();
	}
	
	//ESCONDER TODOS LOS DIVS DE CIUDADES
	function hideAllCities(){
		$('#rankingBog').hide();
		$('#rankingBaq').hide();

	}
	
	//ESCONDER TODOS LOS DIVS AL INICIO
	hideAll();
	hideAllCities();
	
	//MOSTRAR LAS NOTICIAS Y EL RANKING DE BOGOTA AL INICIO
	$('#noticiasDiv').show();
	$('#rankingBog').show();	
	
	//FONDO
	$('#fondo').css('opacity',0.9);
		
	// SIMPLE ACCORDION RANKING
	jQuery('.basic').accordion({
		autoheight: false
	});
	
/* -------------------------------------------------------------------------------------------
															 MENU KWICKS
------------------------------------------------------------------------------------------- */	
	
	$('#inicioNav').click(function(){		
		$('#fondo').animate({left:0},1500);
		$("#content").fadeOut(750, function(){			
			$("#content").fadeIn(750);			
			hideAll();
			$('#inicioDiv').show(475);
		});		
	});
	$('#noticiasNav').click(function(){		
		$('#fondo').animate({left:-1014},1500);
		// $("body").css("background", "url('" + imgLink + "')");
		$("#content").fadeOut(750, function(){			
			$("#content").fadeIn(750);	
			hideAll();
			$('#noticiasDiv').show(475);
		});		
	});
	$('#rankingNav').click(function(){		
		$('#fondo').animate({left:-2028},1500);
		$("#content").fadeOut(750, function(){			
			$("#content").fadeIn(750);
			hideAll();			
			$('#rankingDiv').show(475);			
		});
	});
	$('#galleriaNav').click(function(){		
		$('#fondo').animate({left:-3042},1500);
		$("#content").fadeOut(750, function(){	
			$("#content").fadeIn(750);
			hideAll();		
			$('#galeriaDiv').show(475);			
		});
	});	
	$('#boletinNav').click(function(){		
		$('#fondo').animate({left:-4056},1500);
		$("#content").fadeOut(750, function(){			
			$("#content").fadeIn(750);
			hideAll();		
			$('#boletinDiv').show(475);			
		});		
	});
	$('#contactoNav').click(function(){		
		$('#fondo').animate({left:-5070},1500);
		$("#content").fadeOut(750, function(){
			$("#content").fadeIn(750);
			hideAll();		
			$('#contactoDiv').show(475);	
		});
	});
	
	
	//Ciudades
	
	$('#bogotaRanking').click(function(){		
		$("#rankingDiv").fadeOut(750, function(){
			$("#rankingDiv").fadeIn(750);
			hideAllCities();
			$("#rankingBog").show(475);			
		});
	});
	
	$('#barranquillaRanking').click(function(){		
		$("#rankingDiv").fadeOut(750, function(){
			$("#rankingDiv").fadeIn(750);
			hideAllCities();
			$("#rankingBaq").show(475);			
		});
	});
	
/* -------------------------------------------------------------------------------------------
															 MULTIMEDIA TABS
------------------------------------------------------------------------------------------- */	
	
	// When a link is clicked
	$("a.tab").click(function () {		
		
		// switch all tabs off
		$(".active").removeClass("active");
		
		// switch this tab on
		$(this).addClass("active");
		
		// slide all content up
		$(".content").slideUp();
		
		// slide this content up
		var content_show = $(this).attr("title");
		$("#"+content_show).slideDown();
	  
	});
	
	
/* -------------------------------------------------------------------------------------------
															 NOTICIAS SLIDERS
------------------------------------------------------------------------------------------- */
	$(function(){
		$('#slider1').anythingSlider({
			width 			: 600, 
			height          : 400,   // Override the default CSS width
			theme           : 'metallic',
			easing			: 'easeInOutExpo',
			autoPlayLocked  : false,
			toggleArrows    : false,
			resizeContents  : true,
			stopAtEnd 		: false,
			onShowStop 		: function(e, slider){
				setTimeout(function(){
					if (slider.currentPage === slider.pages) {slider.gotoPage(1);}
				}, 1000);
			}
		});
	});
	
/* -------------------------------------------------------------------------------------------
															 PANEL SLIDERS
------------------------------------------------------------------------------------------- */
	
	// Expand Panel
	$("#open").click(function(){
		$("div#panel").slideDown("slow");	
	});	
	
	// Collapse Panel
	$("#close").click(function(){
		$("div#panel").slideUp("slow");	
	});		
	
	// Switch buttons from "Log In | Register" to "Close Panel" on click
	$("#toggle a").click(function () {
		$("#toggle a").toggle();
	});	

	
});