$(document).ready(function(){
	
	/*********************(morlic)*********************/
	//Funkcija z katero skrijemo vsebino div-a content (tako da animiramo stran za scrollbare)
	function hideC(id)
	{
			$("#scrollArea"+id).fadeOut('fast');
	}
	/*********************(/morlic)*********************/
	function clear(){
		$("#up_menu_0").removeClass('active');
		$("#up_menu_1").removeClass('active');
		$("#up_menu_2").removeClass('active');
		$("#up_menu_3").removeClass('active');
		$("#up_menu_4").removeClass('active');
		$("#up_menu_5").removeClass('active');
		$("#up_menu_6").removeClass('active');
	}

	function showContent1(){
		if($("#content1").width()<710){
			/*********************(morlic)*********************/
			//Takoj ko se animacija razširitve zavihka 1 zakljuci, potem klicemo funkcijo ki z effektom 'fadeIn' prikaže kontent kateri lahko vsebuje scrollbare
			//vse complete:hideC sem jaz(morlic) dodal
			$("#content1").animate({ width:720 }, { queue:false, duration:700, complete:function(){$("#scrollArea1").fadeIn('slow');}} );
			$("#content2").animate({ width:0 }, { queue:false, duration:700,complete:hideC("2")} );
			$("#content3").animate({ width:0 }, { queue:false, duration:700,complete:hideC("3")} );
			$("#content4").animate({ width:0 }, { queue:false, duration:700,complete:hideC("4")} );
			$("#content5").animate({ width:0 }, { queue:false, duration:700,complete:hideC("5")} );
			$("#content6").animate({ width:0 }, { queue:false, duration:700,complete:hideC("6")} );
			/*********************(/morlic)*********************/
			$("#wrapper").animate({ width:980 }, { queue:false, duration:600} );
			$("#up_menu_1").addClass('active');
		}else{
			$("#content1").animate({ width: 0 }, { queue:false, duration:700,complete:hideC("1")} );
			$("#wrapper").animate({ width: 980 }, { queue:false, duration:700} );
			$("#up_menu_0").addClass('active');
		}
	}
		function showContent2(){
		if($("#content2").width()<710){
			/*********************(morlic)*********************/
			//Takoj ko se animacija razširitve zavihka 1 zakljuci, potem klicemo funkcijo ki z effektom 'fadeIn' prikaže kontent kateri lahko vsebuje scrollbare
			//vse complete:hideC sem jaz(morlic) dodal
			$("#content2").animate({ width:720 }, { queue:false, duration:700, complete:function(){$("#scrollArea2").fadeIn('slow');}} );
			$("#content1").animate({ width:0 }, { queue:false, duration:700,complete:hideC("1")} );
			$("#content3").animate({ width:0 }, { queue:false, duration:700,complete:hideC("3")} );
			$("#content4").animate({ width:0 }, { queue:false, duration:700,complete:hideC("4")} );
			$("#content5").animate({ width:0 }, { queue:false, duration:700,complete:hideC("5")} );
			$("#content6").animate({ width:0 }, { queue:false, duration:700,complete:hideC("6")} );
			/*********************(/morlic)*********************/
			$("#wrapper").animate({ width:980 }, { queue:false, duration:600} );
			$("#up_menu_1").addClass('active');
		}else{
			$("#content2").animate({ width: 0 }, { queue:false, duration:700,complete:hideC("2")} );
			$("#wrapper").animate({ width: 980 }, { queue:false, duration:700} );
			$("#up_menu_0").addClass('active');
		}
	}
		function showContent3(){
		if($("#content3").width()<710){
			/*********************(morlic)*********************/
			//Takoj ko se animacija razširitve zavihka 1 zakljuci, potem klicemo funkcijo ki z effektom 'fadeIn' prikaže kontent kateri lahko vsebuje scrollbare
			//vse complete:hideC sem jaz(morlic) dodal
			$("#content3").animate({ width:720 }, { queue:false, duration:700, complete:function(){$("#scrollArea3").fadeIn('slow');}} );
			$("#content2").animate({ width:0 }, { queue:false, duration:700,complete:hideC("2")} );
			$("#content1").animate({ width:0 }, { queue:false, duration:700,complete:hideC("1")} );
			$("#content4").animate({ width:0 }, { queue:false, duration:700,complete:hideC("4")} );
			$("#content5").animate({ width:0 }, { queue:false, duration:700,complete:hideC("5")} );
			$("#content6").animate({ width:0 }, { queue:false, duration:700,complete:hideC("6")} );
			/*********************(/morlic)*********************/
			$("#wrapper").animate({ width:980 }, { queue:false, duration:600} );
			$("#up_menu_1").addClass('active');
		}else{
			$("#content3").animate({ width: 0 }, { queue:false, duration:700,complete:hideC("3")} );
			$("#wrapper").animate({ width: 980 }, { queue:false, duration:700} );
			$("#up_menu_0").addClass('active');
		}
	}
		function showContent4(){
		if($("#content4").width()<710){
			/*********************(morlic)*********************/
			//Takoj ko se animacija razširitve zavihka 1 zakljuci, potem klicemo funkcijo ki z effektom 'fadeIn' prikaže kontent kateri lahko vsebuje scrollbare
			//vse complete:hideC sem jaz(morlic) dodal
			$("#content4").animate({ width:720 }, { queue:false, duration:700, complete:function(){$("#scrollArea4").fadeIn('slow');}} );
			$("#content2").animate({ width:0 }, { queue:false, duration:700,complete:hideC("2")} );
			$("#content3").animate({ width:0 }, { queue:false, duration:700,complete:hideC("3")} );
			$("#content1").animate({ width:0 }, { queue:false, duration:700,complete:hideC("1")} );
			$("#content5").animate({ width:0 }, { queue:false, duration:700,complete:hideC("5")} );
			$("#content6").animate({ width:0 }, { queue:false, duration:700,complete:hideC("6")} );
			/*********************(/morlic)*********************/
			$("#wrapper").animate({ width:980 }, { queue:false, duration:600} );
			$("#up_menu_1").addClass('active');
		}else{
			$("#content4").animate({ width: 0 }, { queue:false, duration:700,complete:hideC("4")} );
			$("#wrapper").animate({ width: 980 }, { queue:false, duration:700} );
			$("#up_menu_0").addClass('active');
		}
	}
		function showContent5(){
		if($("#content5").width()<710){
			/*********************(morlic)*********************/
			//Takoj ko se animacija razširitve zavihka 1 zakljuci, potem klicemo funkcijo ki z effektom 'fadeIn' prikaže kontent kateri lahko vsebuje scrollbare
			//vse complete:hideC sem jaz(morlic) dodal
			$("#content5").animate({ width:720 }, { queue:false, duration:700, complete:function(){$("#scrollArea5").fadeIn('slow');}} );
			$("#content2").animate({ width:0 }, { queue:false, duration:700,complete:hideC("2")} );
			$("#content3").animate({ width:0 }, { queue:false, duration:700,complete:hideC("3")} );
			$("#content4").animate({ width:0 }, { queue:false, duration:700,complete:hideC("4")} );
			$("#content1").animate({ width:0 }, { queue:false, duration:700,complete:hideC("1")} );
			$("#content6").animate({ width:0 }, { queue:false, duration:700,complete:hideC("6")} );
			/*********************(/morlic)*********************/
			$("#wrapper").animate({ width:980 }, { queue:false, duration:600} );
			$("#up_menu_1").addClass('active');
		}else{
			$("#content5").animate({ width: 0 }, { queue:false, duration:700,complete:hideC("5")} );
			$("#wrapper").animate({ width: 980 }, { queue:false, duration:700} );
			$("#up_menu_0").addClass('active');
		}
	}
		function showContent6(){
		if($("#content6").width()<710){
			/*********************(morlic)*********************/
			//Takoj ko se animacija razširitve zavihka 1 zakljuci, potem klicemo funkcijo ki z effektom 'fadeIn' prikaže kontent kateri lahko vsebuje scrollbare
			//vse complete:hideC sem jaz(morlic) dodal
			$("#content6").animate({ width:720 }, { queue:false, duration:700, complete:function(){$("#scrollArea6").fadeIn('slow');}} );
			$("#content2").animate({ width:0 }, { queue:false, duration:700,complete:hideC("2")} );
			$("#content3").animate({ width:0 }, { queue:false, duration:700,complete:hideC("3")} );
			$("#content4").animate({ width:0 }, { queue:false, duration:700,complete:hideC("4")} );
			$("#content5").animate({ width:0 }, { queue:false, duration:700,complete:hideC("5")} );
			$("#content1").animate({ width:0 }, { queue:false, duration:700,complete:hideC("1")} );
			/*********************(/morlic)*********************/
			$("#wrapper").animate({ width:980 }, { queue:false, duration:600} );
			$("#up_menu_1").addClass('active');
		}else{
			$("#content6").animate({ width: 0 }, { queue:false, duration:700,complete:hideC("6")} );
			$("#wrapper").animate({ width: 980 }, { queue:false, duration:700} );
			$("#up_menu_0").addClass('active');
		}
	}
	
/*	function showContent2(){

		if($("#content2").width()<200){
			$("#content2").animate({ width: 400 }, { queue:false, duration:700, complete:function(){$("#scrollArea2").fadeIn('slow');} } );
			$("#content1").animate({ width: 0 }, { queue:false, duration:700,complete:hideC("1")} );
			$("#content3").animate({ width: 0 }, { queue:false, duration:700,complete:hideC("3")} );
			$("#wrapper").animate({ width: 750 }, { queue:false, duration:600} );		
			$("#up_menu_2").addClass('active');
		}else{
			$("#content2").animate({ width: 0 }, { queue:false, duration:700,complete:hideC("2")} );
			$("#wrapper").animate({ width: 300 }, { queue:false, duration:700} );
			$("#up_menu_0").addClass('active');
		}	

	}
	
	function showContent3(){

		if($("#content3").width()<200){
			$("#content3").animate({ width: 400 },{ queue:false, duration:700, complete:function(){$("#scrollArea3").fadeIn('slow');} });
			$("#content1").animate({ width: 0 }, { queue:false, duration:700,complete:hideC("1")} );
			$("#content2").animate({ width: 0 }, { queue:false, duration:700,complete:hideC("2")} );
			$("#wrapper").animate({ width: 750 }, { queue:false, duration:600});
			$("#up_menu_3").addClass('active');
		}else{
			$("#content3").animate({ width: 0 }, { queue:false, duration:700,complete:hideC("3")} );
			$("#wrapper").animate({ width: 300 }, { queue:false, duration:700} );
			$("#up_menu_0").addClass('active');
		}
	}*/

	function hideAll(){
		$("#content1").animate({ width: 0}, { queue:false, duration:700,complete:hideC("1")} );
		$("#content2").animate({ width: 0}, { queue:false, duration:700,complete:hideC("2")} );
		$("#content3").animate({ width: 0}, { queue:false, duration:700,complete:hideC("3")} );
		$("#content4").animate({ width: 0}, { queue:false, duration:700,complete:hideC("4")} );
		$("#content5").animate({ width: 0}, { queue:false, duration:700,complete:hideC("5")} );
		$("#content6").animate({ width: 0}, { queue:false, duration:700,complete:hideC("6")} );
		$("#wrapper").animate({ width: 980}, { queue:false, duration:700} );
		$("#up_menu_0").addClass('active');
	}

	/*panel examle with mouseover
	$("#click1").mouseover(function () {
		clear();
		showContent1();
	});*/
		/*panel*/
		
		$("#click1").click(function () {
		clear();
		showContent1();
	});
		
	$("#click2").click(function () {
		clear();
		showContent2();
	});

	$("#click3").click(function () {
		clear();
		showContent3();
	});
	$("#click4").click(function () {
		clear();
		showContent4();
	});
	$("#click5").click(function () {
		clear();
		showContent5();
	});
	$("#click6").click(function () {
		clear();
		showContent6();
	});

	$("#close").click(function () {
		clear();
		hideAll();	
	});
	/*Top menu*/
	$("#up_menu_1").click(function () {
		clear();
		showContent1();
	});
	
	$("#up_menu_2").click(function () {
		clear();
		showContent2();
	});

	$("#up_menu_3").click(function () {
		clear();
		showContent3();
	});

	$("#up_menu_4").click(function () {
		clear();
		showContent4();
	});
	
	$("#up_menu_5").click(function () {
		clear();
		showContent5();
	});
	
	$("#up_menu_6").click(function () {
		clear();
		showContent6();
	});
	
	$("#up_menu_0").click(function () {
		clear();
		hideAll();	
	});
	
		/*Automatically open*/
	$("#sem").load(function () {
		clear();
		showContent1();
	});
	
$("#ams").load(function () {
		clear();
		showContent2();
	});
$("#atat").load(function () {
		clear();
		showContent13();
	});

$("#oh").load(function () {
		clear();
		showContent4();
	});

$("#lev").load(function () {
		clear();
		showContent5();
	});

$("#lf").load(function () {
		clear();
		showContent6();
	});


});