$(function(){

		   		$('#optimizacija').hide('fast');
		   		$('#webdesign').hide('fast');
		   		$('#etrgovina').hide('fast');
		   		$('#baze').hide('fast');
		   		$('#aplikacije').hide('fast');
		   		$('#grafdizajn').hide('fast');
      $(document).ready(function(){
		   		
				$('#grafdizajn').hide('fast');
		   		$('#optimizacija').hide('fast');
		   		$('#etrgovina').hide('fast');
		   		$('#baze').hide('fast');
		   		$('#aplikacije').hide('fast');
		   		$('#webdesign').hide('fast');

				
	   	$('a#baze-butt').click(function(){
		   		$('#webdesign').hide('fast');
		   		$('#grafdizajn').hide('fast');
				$('#optimizacija').hide('fast');
				$('#aplikacije').hide('fast');
				$('#etrgovina').hide('fast');
				$('#baze').show('fast');
	   
	    });	   	
		$('a#etrgovina-butt').click(function(){
		   		$('#webdesign').hide('fast');
		   		$('#grafdizajn').hide('fast');
				$('#optimizacija').hide('fast');
				$('#aplikacije').hide('fast');
				$('#baze').hide('fast');
				$('#etrgovina').show('fast');
	   
	    });	
	   	$('a#aplikacije-butt').click(function(){
		   		$('#webdesign').hide('fast');
		   		$('#grafdizajn').hide('fast');
				$('#optimizacija').hide('fast');
				$('#etrgovina').hide('fast');
				$('#baze').hide('fast');
				$('#aplikacije').show('fast');
	   
	    });	
		$('a#optimizacija-butt').click(function(){
		   		$('#webdesign').hide('fast');
		   		$('#grafdizajn').hide('fast');
		   		$('#etrgovina').hide('fast');
		   		$('#baze').hide('fast');
		   		$('#aplikacije').hide('fast');
				$('#optimizacija').show('fast');
	   
	    });
	   	$('a#webdesign-butt').click(function(){
		   		$('#grafdizajn').hide('fast');
		   		$('#optimizacija').hide('fast');
		   		$('#etrgovina').hide('fast');
		   		$('#baze').hide('fast');
		   		$('#aplikacije').hide('fast');
		   		$('#webdesign').show('fast');
	    });
	   	$('a#grafdizajn-butt').click(function(){
		   		$('#optimizacija').hide('fast');
		   		$('#webdesign').hide('fast');
		   		$('#etrgovina').hide('fast');
		   		$('#baze').hide('fast');
		   		$('#aplikacije').hide('fast');
		   		$('#grafdizajn').show('fast');
	    });
   
 	  });	
		
/*		$("#podmeni podmeni.butt")
			.mouseover(function(){
				$(this).stop().animate({color: "#e5086e"}, {duration:500});
			})
			.click(function(){
				$clicked = $(this);
							$(this).css("color","red");

			});
			
			
		//$("#whitch-menu").hide();
		
		$("#whitch-menu").mouseover(function () {
			$(this).css("color","red");
		});

		$("#whitch-menu").css("background-color","yellow");
		*/
		
		
		$("#a a.button")
			.css( {backgroundPosition: "-20px 35px"} )
			.mouseover(function(){
				$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
			})
			
			.mouseout(function(){
				$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
					$(this).css({backgroundPosition: "-20px 35px"})
				}})
			})
				
			.click(function(){
				$clicked = $(this);
				
/*				if ( $clicked) {
						$clicked.animate({
							opacity: 0.5,
							borderWidth: 5,
						}, 600 );
						$clicked.siblings("#a a.button").animate({
		            		opacity: 1,
		            		borderWidth: 1
		            	}, 600 );
					}
*/					
				$("#home-button").css("background-color","");
				$("#about-button").css("background-color","");
				$("#services-button").css("background-color","");
				$("#portfolio-button").css("background-color","");
				$("#design-button").css("background-color","");
				$("#contact-button").css("background-color","");
				$(this).css("background-color","#161616");
	
				//$(this).stop().animate({backgroundPosition:"(15px 15px)"}, {duration:500})
					
				
				// if the button is not already "transformed" AND is not animated
				if ( $clicked.is(":not(animated)")) {
					//$clicked.animate({
					//	opacity: 1,
					//	borderWidth: 5,
					//}, 600 );
					
					// each button div MUST have a "xx-button" and the target div must have an id "xx" 
					var idToLoad = $clicked.attr("id").split('-');
					
					//we search trough the content for the visible div and we fade it out
					$("#content").find("div:visible").fadeOut("fast", function(){
						//once the fade out is completed, we start to fade in the right div
						$(this).parent().find("#"+idToLoad[0]).fadeIn();
						
						if(idToLoad[0]=="contact")
							$(this).parent().find("#contact_us").fadeIn();
						else
							$(this).parent().find("#contact_us").fadeOut();
						if(idToLoad[0]=="contact")
							$(this).parent().find("#contact_us1").fadeIn();
						else
							$(this).parent().find("#contact_us1").fadeOut();
						if(idToLoad[0]=="services")
							$(this).parent().find("#usluge_1").fadeIn();
						else
							$(this).parent().find("#usluge_1").fadeOut();
						if(idToLoad[0]=="services")
							$(this).parent().find("#usluge_2").fadeIn();
						else
							$(this).parent().find("#usluge_2").fadeOut();
						if(idToLoad[0]=="services")
							$(this).parent().find("#webdesign").fadeIn();
						else
							$(this).parent().find("#webdesign").fadeOut();
						if(idToLoad[0]=="services")
							$(this).parent().find("#e-trgovina").fadeIn();
						else
							$(this).parent().find("#e-trgovina").fadeOut();
						if(idToLoad[0]=="services")
							$(this).parent().find("#content1234").fadeIn();
						else
							$(this).parent().find("#content1234").fadeOut();
					})
					//we search trough the content for the visible div and we fade it out
					$("#content1").find("div:visible").fadeOut("fast", function(){
						//once the fade out is completed, we start to fade in the right div
						$(this).parent().find("#"+idToLoad[0]+"1").fadeIn();
						if(idToLoad[0]=="portfolio")
							$(this).parent().find("#pane-target").fadeIn();
						else
							$(this).parent().find("#pane-target").fadeOut();
						if(idToLoad[0]=="services")
							$(this).parent().find("#pane-services").fadeIn();
						else
							$(this).parent().find("#pane-services").fadeOut();
						if(idToLoad[0]=="services")
							$(this).parent().find("#target-examples").fadeIn();
						else
							$(this).parent().find("#target-examples").fadeOut();
					})
				}
			});
	});