//add event handlers on loading page
$(document).ready(function(){
$("#client_container").html('<p style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;"><img src="../clients/img_iconies/loader_0.gif"/> loading...</p>');
$("#client_container").load('../clients/client.php', {}, function(){ 
	// set default load
	loadCS('../clients/client.casestudies.php?cls_id=3');
	attachMouseover();
	tooltip();
	padlock();
	
	$('.padlock').append("<li class=\"highlight\"></li>");
	
	$('.padlock').css({cursor:'pointer'});
	animate();
	
	//get elements
	var element = document.getElementById("toplogo");
	var links = element.getElementsByTagName("a");
	
	// add onclick and ondlbclick event handlers		
	for (i=0; i < links.length; i++)
		{
		//add onclick
		links[i].onclick = function(){
			//removeMouseover();
			return false;
			}
		}		
	});	
});

this.animate = function(){	
	$('.padlock1 .highlight').animate({opacity: 1.0}, 1000,function(){
		$(this).animate({opacity: 0.2}, 1000, function(){
			animatepadlock6();
			animatepadlock2();
			$(this).animate({opacity: 1.0}, 2000, function(){
			setInterval("animate()", 2000);	
			animatepadlock4();
			animatepadlock5()		
			});
		});	
	});
}

this.animatepadlock2 = function(){	
	animatepadlock8();
	$('.padlock2 .highlight').animate({opacity: 1.0}, 1000,function(){
		$(this).animate({opacity: 0.2}, 1000, function(){
			animatepadlock7();
			$(this).animate({opacity: 1.0}, 2000, function(){
			setInterval("animatepadlock2()", 2000);
			animatepadlock3();
			});
		});	
	});
}

this.animatepadlock3 = function(){	
	$('.padlock3 .highlight').animate({opacity: 1.0}, 1000,function(){
		$(this).animate({opacity: 0.2}, 1000, function(){
			$(this).animate({opacity: 1.0}, 2000, function(){
			setInterval("animatepadlock3()", 2000);
			});
		});	
	});
}

this.animatepadlock4 = function(){	
	$('.padlock4 .highlight').animate({opacity: 1.0}, 1000,function(){
		$(this).animate({opacity: 0.2}, 1000, function(){
			$(this).animate({opacity: 1.0}, 2000, function(){
			setInterval("animatepadlock4()", 2000);
			});
		});	
	});
}

this.animatepadlock5 = function(){	
	$('.padlock5 .highlight').animate({opacity: 1.0}, 1000,function(){
		$(this).animate({opacity: 0.2}, 1000, function(){
			$(this).animate({opacity: 1.0}, 2000, function(){
			setInterval("animatepadlock5()", 2000);
			});
		});	
	});
}

this.animatepadlock6 = function(){	
	$('.padlock6 .highlight').animate({opacity: 1.0}, 1000,function(){
		$(this).animate({opacity: 0.2}, 1000, function(){
			$(this).animate({opacity: 1.0}, 2000, function(){
			setInterval("animatepadlock6()", 2000);
			});
		});	
	});
}

this.animatepadlock7 = function(){	
	$('.padlock7 .highlight').animate({opacity: 1.0}, 1000,function(){
		$(this).animate({opacity: 0.2}, 1000, function(){
			$(this).animate({opacity: 1.0}, 2000, function(){
			setInterval("animatepadlock7()", 2000);
			});
		});	
	});
}

this.animatepadlock8 = function(){	
	$('.padlock8 .highlight').animate({opacity: 1.0}, 1000,function(){
		$(this).animate({opacity: 0.2}, 1000, function(){
			$(this).animate({opacity: 1.0}, 2000, function(){
			setInterval("animatepadlock8()", 2000);
			});
		});	
	});
}

this.tooltip = function(){	
	/* CONFIG */		
		xOffset = 10;
		yOffset = 20;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$("#toplogo li").hover(function(event){											  
		var title = $(this).find("img").attr("alt");									  
		$("body").append("<p id='tooltip'>"+ title +"</p>");
		$("#tooltip")
			.css("top",(event.pageY - xOffset) + "px")
			.css("left",(event.pageX + yOffset) + "px")
			.fadeIn("fast");		
    },
	function(){	
		$("#tooltip").remove();
    });	
	$("li").mousemove(function(event){
		$("#tooltip")
			.css("top",(event.pageY - xOffset) + "px")
			.css("left",(event.pageX + yOffset) + "px");
	});			
};

// function to load with ajax and fade in
this.loadCS = function(path){
$('#casestudies').html('<p><img src="../clients/img_iconies/loader_0.gif"/> loading...</p>');
$("#casestudies").load(path, {}, function(){ 
 	$("#contents").fadeIn(700, function(){
		$(".studies", this).stop().animate({top:'0px'},{queue:false,duration:300});
		});		
 	});
}

this.loadDefault = function(parameter){
$("#casestudies").load("../clients/client.images.php?cls_id=" + parameter);
}

this.padlock = function(){
$('.padlock').hover(function(e){	
	lockon();
	$(".unlocked").remove();
	$(this).append("<li class=\"unlocked\"></li>");
	xOffset = 10;
	yOffset = 20;
	
	var title = $(this).find("img").attr("alt");
	var path= $(this).find("a").attr("href");
	loadCS(path);
	
	$("body").append("<p id='tooltip_cs'>"+ title +"</p>");
		$("#tooltip_cs")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast", function(){			
			});		
	},function(){		
		$(".unlocked").remove();
		$("#tooltip_cs").remove();
    });
	
$('.padlock').mousemove(function(e){
		$("#tooltip_cs")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});

}

this.lockon = function(){
$('.padlock').click(function(){	
	$(this).append("<li class=\"locked\"></li>");
	$('.padlock').unbind('mouseenter mouseleave');
	$('.padlock').unbind('click');
	$(".unlocked").remove();
	$("#tooltip").remove();
	$("#tooltip_cs").remove();
	$(this).addClass('currentlock');
	removeMouseover();
	lockoff();
	});
}

this.lockoff = function(){
$('.currentlock').click(function(){
	$(".locked").remove();
	$('li').removeClass('currentlock');
	attachMouseover();
	padlock();
    });
}

// swapImage
this.swapImage = function(target){
	var source = target.getAttribute("href");
	//var element = JDOM.getElementsByClassName('img_top');
	var element = document.getElementById("clientlogo");
	var image = element.getElementsByTagName("img");
	image[0].src='../clients/img_clienties/large/'+ source;				
}

// remove onMouseover event handler
this.removeMouseover = function(){
var element = document.getElementById("toplogo");
var links = element.getElementsByTagName("a");
for (i=0; i < links.length; i++)
	{
	links[i].onmouseover = null;
	}	
}

// attach mouseover event handler to all links
this.attachMouseover = function(){
//get elements
//var element = document.getElementById("logo");
//var links = element.getElementsByTagName("a");
var links = $('#toplogo a');
//add onmouseover
//group 1	
links[0].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}

links[1].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[2].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[3].onmouseover = function(){
	/*var source = this.getAttribute("href");
	loadDefault(source);*/
	loadCase('8');
	}
	
links[4].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);	
	}
	
links[5].onmouseover = function(){
	/*var source = this.getAttribute("href");
	loadDefault(source);*/
	loadCase('3');
	}
	
links[6].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[7].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[8].onmouseover = function(){
	/*var source = this.getAttribute("href");
	loadDefault(source);*/
	loadCase('6');
	}
	
links[9].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
//group2
links[10].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}

links[11].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[12].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[13].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[14].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[15].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[16].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[17].onmouseover = function(){
	loadCase('2');
	/*var source = this.getAttribute("href");
	loadDefault(source);*/
	}
	
links[18].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[19].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
//group 3
links[20].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}

links[21].onmouseover = function(){
	loadCase('1');
	/*var source = this.getAttribute("href");
	loadDefault(source);*/
	}
	
links[22].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	/*loadCase('1');*/
	}
	
links[23].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[24].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[25].onmouseover = function(){
	/*var source = this.getAttribute("href");
	loadDefault(source);*/
	loadCase('4');
	}
	
links[26].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[27].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[28].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[29].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
//group 4
links[30].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}

links[31].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[32].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[33].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[34].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[35].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[36].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[37].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[38].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[39].onmouseover = function(){
	/*var source = this.getAttribute("href");
	loadDefault(source);*/
	loadCase('7');
	}
	
//group 5
links[40].onmouseover = function(){
	//loadCase('5');
	var source = this.getAttribute("href");
	loadDefault(source);
	}

links[41].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[42].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[43].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[44].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[45].onmouseover = function(){
	loadCase('5');
	/*var source = this.getAttribute("href");
	loadDefault(source);*/
	}
	
links[46].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	/*loadCase('5');*/
	}
	
links[47].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[48].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
	
links[49].onmouseover = function(){
	var source = this.getAttribute("href");
	loadDefault(source);
	}
}

// moveContent
function moveContent1() 
	{
	$(".studies").fadeOut("fast");
	moveElement("contents",-517,0,10); 
	$(".studies").delay(1000, function(){$(".studies").fadeIn("slow")});
	}
 
// moveContent
function moveContent2() 
	{
	$(".studies").fadeOut("fast");
	moveElement("contents",-1034,0,10); 
	$(".studies").delay(1000, function(){$(".studies").fadeIn("slow")});
	}

// moveContent  
function moveContent3() 
	{
	$(".studies").fadeOut("fast");
	moveElement("contents",-1551,0,10);
	$(".studies").delay(1000, function(){$(".studies").fadeIn("slow")});
	}

// moveContent
function moveContent4() 
	{
	$(".studies").fadeOut("fast");
	moveElement("contents",-2068,0,10);
	$(".studies").delay(1000, function(){$(".studies").fadeIn("slow")});
	}

// moveContent
function moveContent5() 
	{
	$(".studies").fadeOut("fast");
	moveElement("contents",0,0,10); 
	$(".studies").delay(1000, function(){$(".studies").fadeIn("slow")});
	}
	
// moveElement
function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
    return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/10);
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}

/*
jQuery delay
*/
jQuery.fn.delay = function(time,func){
    return this.each(function(){
        setTimeout(func,time);
    });
};