$(document).ready(function(){
 doRollOver();
});

var doRollOver = function(){

var linkArray = new Array();
linkArray[0] = "/projects/usabilitylab/";
linkArray[1] = "/projects/careerlab/";
linkArray[2] = "/projects/payonline/";
linkArray[3] = "/projects/careerist/";

$("#pr1").click( function(){ document.location = linkArray[0] });
$("#pr2").click( function(){ document.location = linkArray[1] });
$("#pr3").click( function(){ document.location = linkArray[2] });
$("#pr4").click( function(){ document.location = linkArray[3] });

for(var i=1; i<5; i++) { // ?????? ??????? ?? ????
	$("#pr"+i).mouseover( function(){ tabOnOver( this ); });
	$("#pr"+i).mouseout( function(){ tabOnOut( this ); });
}

var tabOnOver = function(elem) { // ??????? ??? ????????? ?? ???
	if(!($("#"+$(elem).attr('id')).hasClass("active"))) { // ????????? ???????? ?? ???? ???. ???? ??, ?? ?????? ?? ????.
			imgSrc = $("#"+($(elem).attr('id'))+" img").attr("src"); // ????? ??????? ??? ? ????????
			doSrc = imgSrc.replace('_bw', '_col'); // ???????? ?? ???????
			($("#"+($(elem).attr('id'))+" img")).attr("src", doSrc); // ???????????
			
			setActiveTab(elem); // ?????? ????????
			
			($("#"+($(elem).attr('id'))+" span")).after("<i></i>"); // ????????? ??????
	}
}

var tabOnOut = function(elem) { // ??????? ??? ????????? ?? ????
	if(!($("#"+$(elem).attr('id')).hasClass("active"))) { // ????????? ???????? ?? ???? ???. ???? ??, ?? ?????? ?? ????.
			imgSrc = $("#"+($(elem).attr('id'))+" img").attr("src");
			doSrc = imgSrc.replace('_col', '_bw'); // ???????? ?? ?/?
			($("#"+($(elem).attr('id'))+" img")).attr("src", doSrc);
	}
}

var setActiveTab = function(elem) { // ??????? ?????????? ????????? ????
	if(!($("#"+$(elem).attr('id')).hasClass("active"))) { // ????????? ???????? ?? ???? ???. ???? ??, ?? ?????? ?? ????.
		
		clearActiveTab(); // ??????? ?????? ???????? ???
		$("#"+($(elem).attr('id'))).addClass("active"); // ????????? ?????
		imageInAnchor = ($("#"+($(elem).attr('id'))+" a")).html(); // ????? ????????
		($("#"+($(elem).attr('id'))+" a")).replaceWith("<span>" + imageInAnchor + "</span>"); // ???????? ????? ?? ????
	
		$("#"+($(elem).attr('id'))+"desc").show(); // ?????????? ???????? ????
		
		if (!($.browser.msie)) { // ?????? ??????????? ????????? ??? ????, ????? ??????
			$("#"+($(elem).attr('id'))+"desc div").hide(); // ??????? ???????? ????????
	    	$("#"+($(elem).attr('id'))+"desc div").fadeIn("fast"); // ????? ?????????? ? ????????
		}
	}
}

var clearActiveTab = function() { // ??????????????? ??????? ??? ??????? ????????? ????

	for(var i=1; i<5; i++) {
		if( $("#pr"+i).hasClass("active") ) { // ???? ???????? ???
			$("#pr"+i+" i").remove(); // ??????? ?????? ? ????????? ????
			
			$("#pr"+i).removeClass("active"); // ??????? ?????
			imageInAnchor = $("#pr"+i+" span").html(); // ????? ????????
			$("#pr"+i+" span").replaceWith("<a href=\"javascript:return false\">" + imageInAnchor + "</a>"); // ???????? ???? ?? ?????
			
			imgSrc = $("#pr"+i+" img").attr("src"); // ????? ???
			doSrc = imgSrc.replace('_col', '_bw'); // ???????? ?? ?/?
			$("#pr"+i+" img").attr("src", doSrc); // ????????? ? ????????
			
			$("#pr"+i+"desc").hide(); // ???????? ????????? ???? ???????? ????
		}
	}
}

};