// JavaScript Document
$(function(){ 
	$(".title-1").addClass("title-1-visited");
	$(".caselink").css("display","none"); 
	$(".caselink-1").css("display","block"); 
	/**
	 * when click one title show this title pic
	 */
	$(".title-1").click(function(){ 
		$(".arrow").css("display","none");
		$(".arr-1").css("display","block");
		$(".caselink").css("display","none"); 
		$(".caselink-1").css("display","block"); 
		
		$(".title-1").removeClass("title-1-visited");
		$(".title-2").removeClass("title-2-visited");
		$(".title-3").removeClass("title-3-visited");
		$(".title-4").removeClass("title-4-visited");
		$(".title-5").removeClass("title-5-visited");
		$(".title-1").addClass("title-1-visited");
 
		$(".tag-1").animate({left: '0px'}, 500); 
		$(".tag-2").animate({left: '485px'}, 500);
		$(".tag-3").animate({left: '525px'}, 500);
		$(".tag-4").animate({left: '565px'}, 500);
		$(".tag-5").animate({left: '605px'}, 500);
				
		showImg();  
		
		$(".title").attr("rel","h");
		$(".title-1").attr("rel","n");
		  
	});
	
	$(".title-2").click(function(){
		$(".title").attr("rel","h");
		$(".title-2").attr("rel","n");
		
		$(".arrow").css("display","none");
		$(".arr-2").css("display","block");
		$(".caselink").css("display","none"); 
		$(".caselink-2").css("display","block"); 
		
		$(".title-1").removeClass("title-1-visited"); 
		$(".title-3").removeClass("title-3-visited");
		$(".title-4").removeClass("title-4-visited");
		$(".title-5").removeClass("title-5-visited");
		$(".title-2").addClass("title-2-visited");
		 
		$(".tag-1").animate({left: '0px'}, 500); 
		$(".tag-2").animate({left: '40px'}, 500);
		$(".tag-3").animate({left: '525px'}, 500);
		$(".tag-4").animate({left: '565px'}, 500);
		$(".tag-5").animate({left: '605px'}, 500);
		
		showImg2();  
		
		$(".title").attr("rel","h");
		$(".title-2").attr("rel","n");
	});
	
	$(".title-3").click(function(){
		$(".arrow").css("display","none");
		$(".arr-3").css("display","block");
		$(".caselink").css("display","none"); 
		$(".caselink-3").css("display","block"); 
		
		$(".title-1").removeClass("title-1-visited");
		$(".title-2").removeClass("title-2-visited"); 
		$(".title-4").removeClass("title-4-visited");
		$(".title-5").removeClass("title-5-visited");
		$(".title-3").addClass("title-3-visited");
		 
		$(".tag-1").animate({left: '0px'}, 500); 
		$(".tag-2").animate({left: '40px'}, 500);
		$(".tag-3").animate({left: '80px'}, 500);
		$(".tag-4").animate({left: '565px'}, 500);
		$(".tag-5").animate({left: '605px'}, 500);
		
		showImg3();
		
		$(".title").attr("rel","h");
		$(".title-3").attr("rel","n");
	});  
	
	$(".title-4").click(function(){
		$(".arrow").css("display","none");
		$(".arr-4").css("display","block");
		$(".caselink").css("display","none"); 
		$(".caselink-4").css("display","block"); 
		
		$(".title-1").removeClass("title-1-visited");
		$(".title-2").removeClass("title-2-visited");
		$(".title-3").removeClass("title-3-visited"); 
		$(".title-5").removeClass("title-5-visited");
		$(".title-4").addClass("title-4-visited");
		 
		$(".tag-1").animate({left: '0px'}, 500); 
		$(".tag-2").animate({left: '40px'}, 500);
		$(".tag-3").animate({left: '80px'}, 500);
		$(".tag-4").animate({left: '120px'}, 500);
		$(".tag-5").animate({left: '605px'}, 500);
		
		showImg4();
		
		$(".title").attr("rel","h");
		$(".title-4").attr("rel","n");
	}); 
	
	$(".title-5").click(function(){
		$(".arrow").css("display","none");
		$(".arr-5").css("display","block");
		$(".caselink").css("display","none"); 
		$(".caselink-5").css("display","block"); 
		
		$(".title-1").removeClass("title-1-visited");
		$(".title-2").removeClass("title-2-visited");
		$(".title-3").removeClass("title-3-visited");
		$(".title-4").removeClass("title-4-visited"); 
		$(".title-5").addClass("title-5-visited");
		 
		$(".tag-1").animate({left: '0px'}, 500); 
		$(".tag-2").animate({left: '40px'}, 500);
		$(".tag-3").animate({left: '80px'}, 500);
		$(".tag-4").animate({left: '120px'}, 500);
		$(".tag-5").animate({left: '160px'}, 500);
		
		showImg5();
		
		$(".title").attr("rel","h");
		$(".title-5").attr("rel","n");
	});  
	
	/**
	 * when mouseover show a change 
	 */
	$(".title-1").mouseover(function(){
			var name = $(this).attr("rel"); 
			if(name=="h"){  
				$(".title-1").addClass("title-1-hover");
			}
	}); 
	$(".title-1").mouseout(function(){ 
				$(".title-1").removeClass("title-1-hover");	 
	}); 
	
	
	$(".title-2").mouseover(function(){
			var name = $(this).attr("rel"); 
			if(name=="h"){ 	 
				$(".title-2").addClass("title-2-hover");
			}
	}); 
	$(".title-2").mouseout(function(){ 
				$(".title-2").removeClass("title-2-hover"); 								 
	});
	
	
	$(".title-3").mouseover(function(){
			var name = $(this).attr("rel"); 
			if(name=="h"){ 												 
				$(".title-3").addClass("title-3-hover");
			}
	}); 
	$(".title-3").mouseout(function(){
			$(".title-3").removeClass("title-3-hover");														 
	}); 
	
	
	$(".title-4").mouseover(function(){
			var name = $(this).attr("rel"); 
			if(name=="h"){ 												 
				$(".title-4").addClass("title-4-hover");
			}
	}); 
	$(".title-4").mouseout(function(){
			$(".title-4").removeClass("title-4-hover");														 
	});
	
	
	$(".title-5").mouseover(function(){
			var name = $(this).attr("rel"); 
			if(name=="h"){ 												 
				$(".title-5").addClass("title-5-hover");
			}
	}); 
	$(".title-5").mouseout(function(){
			$(".title-5").removeClass("title-5-hover");														 
	});
	 
}); 

/**
* loading the img where user click the title
*/
 
function showImg() { 
	var $img = $("#myImgs");
var src_path = $img.attr("src");
	$img.loadthumb({
		"src": src_path ,
		"imgId":"myImgs",
		"parentId":"CRviewer"
	});
}

function showImg2() { 
	var $img = $("#myImgs2");
var src_path = $img.attr("src");
	$img.loadthumb({
		"src": src_path ,
		"imgId":"myImgs2",
		"parentId":"CRviewer2"
	});
}

function showImg3() { 
	var $img = $("#myImgs3");
var src_path = $img.attr("src");
	$img.loadthumb({
		"src": src_path ,
		"imgId":"myImgs3",
		"parentId":"CRviewer3"
	});
}

function showImg4() { 
	var $img = $("#myImgs4");
var src_path = $img.attr("src");
	$img.loadthumb({
		"src": src_path ,
		"imgId":"myImgs4",
		"parentId":"CRviewer4"
	});
}

function showImg5() { 
	var $img = $("#myImgs5");
var src_path = $img.attr("src");
	$img.loadthumb({
		"src": src_path ,
		"imgId":"myImgs5",
		"parentId":"CRviewer5"
	});
}