$(function(){
	window.clients='';//THE OBJECT THAT STORES THE DATA
	var curr_client;//THE CURRENT CLIENT ARRAY ID
	var curr_client_pic;//THE CURRENT CLIENT SPECIFIC PIC
	var first_client, last_client //flags for the first and last clients

	var url = document.location.href;//THE CURRENT URL
	
	var num_pics = 0; //number of current client pics
	window.curr_pic = 0; //first secon third pic
	
	var url_prefix = '';

	//getting the parameters
	var params={"client":"","pic":""};

	if(url.match(/.+\#client\=([0-9]+)(\&pic\=([0-9]+))?/)!=null){
		params.client = parseInt(url.replace(/.+\#client\=([0-9]+)(\&pic\=([0-9]+))?/,"$1"));
	}

	if(url.match(/.+\#client\=([0-9]+)\&pic\=([0-9]+)$/)!=null){
		params.pic = parseInt(url.replace(/.+\#client\=([0-9]+)\&pic\=([0-9]+)$/,"$2"));
	}
	
	if(url.match(/\?/)!=null){
		url_prefix = "./visual";
	}


	$.getJSON("get_clients.php",function(data){

		clients = data;

		init_drop_down();//initializing all the drop down menu functions
		
		if( PHP=="1" ){
			
			init_client();
			
		}else{
			
			change_client(((params.client=="")?clients.connections[1]:params.client),((params.pic=="")?null:params.pic))//showing the first client
			
		}

		
		
	})



	//ACTIONS FOR MAIN MENU RADIO AND MUSIC
	var dur = 500;

	$("#music").hover(
					function(){
						//console.log(this);
						$(".inner",this).animate({top:"15px"},{ queue:false, duration:dur });
						$(this).animate({top:"-30px"},{ queue:false, duration:dur });
						$(this).animate({height:"200px"},{ queue:false, duration:dur })
								
					},
					function(){
						$(".inner",this).animate({top:"0px"},{ queue:false, duration:dur });
						$(this).animate({top:"0px"},{ queue:false, duration:dur });
						$(this).animate({height:"19px"},{ queue:false, duration:dur })
						
					});

	$("#radio").hover(
					function(){
						//console.log(this);
						$(".inner",this).animate({top:"15px"},{ queue:false, duration:dur });
						$(this).animate({top:"-30px"},{ queue:false, duration:dur });
						$(this).animate({height:"280px"},{ queue:false, duration:dur })
								
					},
					function(){
						$(".inner",this).animate({top:"0px"},{ queue:false, duration:dur });
						$(this).animate({top:"0px"},{ queue:false, duration:dur });
						$(this).animate({height:"19px"},{ queue:false, duration:dur })
						
					});


	
	

	
	function init_drop_down(){//DROP DOWN MENU INITIALIZING

		//APPLYING THE CLIENT TO THE DROP DOWN MENU
		//$("#drop_down_list ul li:first").remove();

		if( $("#drop_down_list ul li").length == 0 ){

			for(var i=0;i<clients.clients.length;i++){//adding the clients
				$("#drop_down_list ul").append("<li id='"+i+"'><a href='#client="+i+"'>"+(clients.clients[i].name)+"</a></li>")
			}
		}

		
		//MANAGING THE HOVERS AND CLICKS OF ITEMS
		$("#drop_down_arr").hover(function(){
								$(this).css({"background-position": "-14px 0px"})
							},function(){
								$(this).css({"background-position": "0px 0px"})
							});
		
		//$("#drop_down_selected").text($("#visual #drop_down_list ul li:first").text());
		
	
		$("#drop_down_arr, #drop_down_selected").click(function(){
									$("#drop_down_list").slideToggle("fast");
									$("#drop_down").focus();
								});	
		$("#drop_down").blur(function(){
									//$("#drop_down_list").slideUp("fast");
								})
	
		/*$("#visual #drop_down_list ul li").hover(function(){
								//$(this).css({"background-image": "url(images/visual_hover_bg.jpg)"})
								$(this).css({"background-color": "#ed7f48"})
							},function(){
								//$(this).css({"background-image": ""})
								$(this).css({"background-color": "#ee8c5b"})
							});*/
	
	
		/*$("#visual #drop_down_list ul li a").click(function(){
													//console.log($("#drop_down").focus()==false);
													if($(this).parent().attr("id")!=curr_client){//if i"m not selectring the allready on client
														
														change_client($(this).parent().attr("id"))
														$("#drop_down_list").slideUp("fast");
														
													}else{
														$("#drop_down_list").slideUp("fast");
														return false;
													}
													
												});*/
		
		$("#visual #drop_down_list ul li a").click(function(evt){
													//console.log($(this).parent().attr("id"));
													if($(this).parent().attr("id")!=curr_client){//if i"m not selectring the allready on client
														
														change_client($(this).parent().attr("id"))
														$("#drop_down_list").slideUp("fast");
														document.location.href=url_prefix+"#client="+$(this).parent().attr("id");//Changing the adress bar acordinly
														evt.preventDefault();
													}else{
														$("#drop_down_list").slideUp("fast");
														evt.preventDefault();
													}
													
												});
		

		//NEXT AND PREVIOUS BUTTONS MANAGING
		$("#next,#prev").hover(function(){
								if(($(this).attr("id")=="next" && !last_client) || ($(this).attr("id")=="prev" && !first_client)){
									
									$(this).css({"background-position": "-55px 0px"})
								}
							},function(){
								if(($(this).attr("id")=="next" && !last_client) || ($(this).attr("id")=="prev" && !first_client)){
									
									$(this).css({"background-position": "0px 0px"})
								}
							});
		
		$("#next,#prev").click(function(evt){

								if($(this).attr("id")=="next" && !last_client){
										//console.log(curr_client+1);
										document.location.href=url_prefix+"#client="+(clients.connections[clients.clients[curr_client].pos+1]);//Changing the adress bar acordinly
										change_client(clients.connections[clients.clients[curr_client].pos+1],null);
										
								}else if($(this).attr("id")=="prev" && !first_client){

										document.location.href=url_prefix+"#client="+(clients.connections[clients.clients[curr_client].pos-1]);//Changing the adress bar acordinly
										change_client(clients.connections[clients.clients[curr_client].pos-1],null);
								}
								evt.preventDefault();
							});
	}
	

	function init_client(){
		
		curr_client = CURR_CLIENT;
		
		
		if( CURR_PIC == "" ){
			
			curr_client_pic = item_by_index(clients.clients[curr_client].works ,1);
		}else{
			
			curr_client_pic = CURR_PIC;
		}

		
		init_pics_buttons();
		
		
		if(clients.connections[clients.connections.length-1]==curr_client){
			first_client = false;
			last_client = true;
			$("#next").css({"background-position": "-110px 0px"});
			$("#prev").css({"background-position": "0px 0px"});
		}else if(clients.clients[curr_client].pos==1){
			first_client = true;
			last_client = false;
			$("#prev").css({"background-position": "-110px 0px"});
			$("#next").css({"background-position": "0px 0px"});
		}else{
			first_client = false;
			last_client = false;
			$("#next, #prev").css({"background-position": "0px 0px"});
		}
	}


	function change_client(clientID,picID){//THE FUNCTION WICH HANDLES CLIENT CHANGING
		
		
		
		curr_client = parseInt(clientID);

		$("#container ul li").remove();//removing old works

		$("#container h1").text(clients.clients[clientID].name);//adding the client name

		var i=0
		for( work in clients.clients[clientID].works){
		//for(var i=0;i<clients.clients[clientID].works.length;i++){//adding the works for that client
			i++;
			
			$("#container ul").append("<li id='pic"+work+"'><a href='?client="+curr_client+"&pic="+work+"'>"+(i)+"</a></li>")
		}
		num_pics = i;

		$("#drop_down_selected").text(clients.clients[clientID].name);//adding the name to the selected item in the drop down menu
		
		
		$("#pic").bind("click", pic_click_listener);
		
		if(picID == null){

			curr_pic = 1;
			//getting the index of the forst work
			curr_client_pic = item_by_index(clients.clients[curr_client].works ,1);

			change_pic(curr_client_pic);
			
		}else{
			curr_client_pic = picID;
			change_pic(picID);
			curr_pic = index_by_item(clients.clients[curr_client].works ,picID);
		}

		//$("#container #pic_container img").attr("src", clients.clients[0].works[0].img);//changing the picture url
		init_pics_buttons();//initiallizing the clickabuility of the pics buttons
		
		if(clients.connections[clients.connections.length-1]==curr_client){
			first_client = false;
			last_client = true;
			$("#next").css({"background-position": "-110px 0px"});
			$("#prev").css({"background-position": "0px 0px"});
		}else if(clients.clients[curr_client].pos==1){
			first_client = true;
			last_client = false;
			$("#prev").css({"background-position": "-110px 0px"});
			$("#next").css({"background-position": "0px 0px"});
		}else{
			first_client = false;
			last_client = false;
			$("#next, #prev").css({"background-position": "0px 0px"});
		}

	}

	function pic_click_listener(){
			
		//console.log(item_by_index(clients.clients[curr_client].works ,4));
		
		if( curr_pic != num_pics){
			change_pic(item_by_index(clients.clients[curr_client].works ,curr_pic+1));
			curr_pic++;
			//console.log(item_by_index(clients.clients[curr_client].works ,curr_pic+1));
		}else{
			change_pic(item_by_index(clients.clients[curr_client].works ,1));
			curr_pic = 1;
			//console.log(item_by_index(clients.clients[curr_client].works ,4));
		}
	}
	
	function change_pic(picID){//THE PIC CHANGING FUNCTION
		


		//removing everything
		$("#preloader").remove();
		$("#pic").css({"display":"none"})
		
		//adding the preloader
		$("#pic_container").append("<div id='preloader'><img src='images/preloader.gif' /></div>");
		
		var pic = picID;
		
		$("#description").html(clients.clients[curr_client].works[pic].description)
		$("#pic").attr({"src":clients.clients[curr_client].works[picID].img}).bind("load",function(){

			$("#pic").fadeIn("slow");
			$("#preloader").remove();
											
		});

			$("#container ul #pic"+curr_client_pic).removeClass()
			
			$("#container ul #pic"+curr_client_pic+" a").bind("click",function(evt){
				
				var temp = $(this).parent().attr("id");
				change_pic(temp.replace(/pic/,""));
				document.location.href=url_prefix+"#client="+curr_client+"&pic="+temp.replace(/pic/,"");
				evt.preventDefault();
			});//removes the last selected pic from its selected status and makes it clickable

			$("#container ul #pic"+picID).addClass("selected");

			$("#container ul #pic"+picID+" a").unbind("click").bind("click", function(evt){

				evt.preventDefault();
			});

		
		curr_client_pic = picID;
		
	}

	function init_pics_buttons(){
		$("#container ul li:not(#pic"+curr_client_pic+") a").click(function(evt){
			
			var temp = $(this).parent().attr("id");
			change_pic(temp.replace(/pic/,""));
			document.location.href=url_prefix+"#client="+curr_client+"&pic="+temp.replace(/pic/,"");
			evt.preventDefault();
																	
		});
	}



	$("#pic_container").hover(function(){
						//console.log($("#description").css("height"))
						$("#description").animate({"top":"0px"},{ queue:true});
						
					},function(){
						$("#description").animate({"top":"-80px"},{ queue:false});
					});
					
	function item_by_index(parent_obj , index){
		
		var i = 1;
		
		for( var a in parent_obj ){
			
			if( i == index){
				
				return a;
				
			}
			
			i++;
			
		}
		
	}//end of item by index
	
	function index_by_item(parent_obj , item){
		
		var i = 1;
		
		for( var a in parent_obj ){
			
			if( a == item){
				
				return i;
				
			}
			
			i++;
			
		}
		
	}//end of item by index
	


	

});