jQuery(document).ready(function() {
	var listSelector    = jQuery(".PortofolioDetailBoxLeft .Portofolio");
	var listSelectorLnk = jQuery(".PortofolioDetailBoxLeft .Portofolio a.srcImage");
	var firstSelector   = jQuery(".PortofolioDetailBoxLeft .Portofolio:first a.srcImage");
	var leftSelector    = jQuery(".PortofolioDetailLeft");
	var rightSelector   = jQuery(".PortofolioDetailRight");
	var content         = jQuery(".PortofolioDetailBoxRight .Portofolio");
	var contentTitle    = jQuery(".PortofolioDetailBoxRight .Portofolio h2.BigPortofolioTitle");
	var contentImg      = jQuery(".PortofolioDetailBoxRight .Portofolio img");
	var listImage		= jQuery(".PortofolioListBoxLeft img, .PortofolioListBoxMiddle img, .PortofolioListBoxRight img");
	
	/** Make Scrollbar for Portofolio List */
	//makeScrollbar( $('PortofolioContentScroller'), $('scrollbar2'), $('handle2') );
	makeScrollbar( $('testContent'), $('scrollbar2'), $('handle2') );
		
	jQuery(".PortofolioDetailBoxLeftHolder").css("display","none");
	
	/** Define On Page Ready Settings */
	firstSelector.addClass("active");
	firstSelector.find("img").fadeTo('fast', 1);							
	
	firstSelector.hover(function() { 
		if (jQuery(this).is(".active")) {
			jQuery(this).find("img").fadeTo('fast', 1);
			return false;
		} else {
			jQuery(this).find("img").fadeTo('fast', 1);
		}
	} , function() { 
		if (jQuery(this).is(".active")) {
		jQuery(this).find("img").fadeTo('fast', 1);
			return false;
		} else {
			jQuery(this).find("img").fadeTo('fast', 0.70);
		}
	});
	
	/** Manage click events */
	listImage.click(function(){
		var clickedElemImg = jQuery(this).parent().attr("href");
		//alert("searching for: " + clickedElemImg);
		/** Prepare Element to be Shown */
		jQuery.each(listSelectorLnk, function() {
			if (jQuery(this).attr("href") == clickedElemImg) {
				//alert("found " + clickedElemImg + "with id:"+jQuery(this).attr("id"));
				var togoImage = jQuery(this).attr("href");
				var togoTitle = jQuery(this).find("img").attr("alt");
				var togoLink  = jQuery(this).parent().find("a.srcLink").attr("href");
				
				jQuery.each(listSelectorLnk, function() {
					jQuery(this).removeClass("active");
				});
				jQuery(this).addClass("active");
				jQuery(this).find("img").fadeTo('fast', 1);
				
				contentTitle.find("a").html(togoTitle);
				contentTitle.find("a").attr("href",togoLink);
				contentImg.transitionto({ destinationImage: togoImage });
			}				
		});	
		
		/** Prepare WorkBench */
		jQuery(".PortofolioListBoxLeft, .PortofolioListBoxMiddle, .PortofolioListBoxRight").fadeOut(800);
		jQuery(".PortofolioDetailBoxLeftHolder").fadeIn(800).css("display","block");
		/** Make Scrollbar for Portofolio Details */
		makeScrollbar( $('PortofolioContent'), $('scrollbar1'), $('handle1') );
		
		return false;
	});
	
	listSelectorLnk.click(function(){			
		if (jQuery(this).is(".active")) {  //If it's already active, then...
			return false; // Don't click through
		} else {
			var togoImage = jQuery(this).attr("href");
			var togoTitle = jQuery(this).find("img").attr("alt");
			var togoLink  = jQuery(this).parent().find("a.srcLink").attr("href");
			
			jQuery.each(listSelectorLnk, function() {
				jQuery(this).removeClass("active");
			});
			jQuery(this).addClass("active");
			jQuery(this).find("img").fadeTo('fast', 1);
			
			contentTitle.find("a").html(togoTitle);
			contentTitle.find("a").attr("href",togoLink);
			contentImg.transitionto({ destinationImage: togoImage });
		}
		return false;
	});
	
	leftSelector.click(function(){	
		jQuery.each(listSelectorLnk, function() {
			if (jQuery(this).attr("href") == contentImg.attr("src")) {
				var activeList = jQuery(this).attr("id").split("image_");	
				var active = activeList[1];
				var next = parseInt(active) - 1;
				var togoImage = jQuery("#image_"+next).attr("href");
				var togoTitle = jQuery("#image_"+next).find("img").attr("alt");
				var togoLink  = jQuery("#image_"+next).parent().find("a.srcLink").attr("href");
				
				if (togoImage === undefined) {
					togoImage = jQuery(".PortofolioDetailBoxLeft .Portofolio:last a.srcImage").attr("href");
					togoTitle = jQuery(".PortofolioDetailBoxLeft .Portofolio:last a.srcImage img").attr("alt");
					togoLink  = jQuery(".PortofolioDetailBoxLeft .Portofolio:last .InlineTitle a.srcLink").attr("href");
				}
				
				jQuery.each(listSelectorLnk, function() {
					jQuery(this).removeClass("active");
				});
				jQuery(this).addClass("active");
				jQuery(this).find("img").fadeTo('fast', 1);
				
				contentTitle.find("a").html(togoTitle);
				contentTitle.find("a").attr("href",togoLink);
				contentImg.transitionto({ destinationImage: togoImage });
			}				
		});	
	});
	
	rightSelector.click(function(){	
		var imageSelector = content.find("img").attr("src");
		jQuery.each(listSelectorLnk, function() {
			if (jQuery(this).attr("href") == imageSelector) {
				var activeList = jQuery(this).attr("id").split("image_");	
				var active = activeList[1];
				var next = parseInt(active) + 1;
				var togoImage = jQuery("#image_"+next).attr("href");
				var togoTitle = jQuery("#image_"+next).find("img").attr("alt");
				var togoLink  = jQuery("#image_"+next).parent().find("a.srcLink").attr("href");
				
				if (togoImage === undefined) {
					togoImage = jQuery(".PortofolioDetailBoxLeft .Portofolio:first a.srcImage").attr("href");
					togoTitle = jQuery(".PortofolioDetailBoxLeft .Portofolio:first a.srcImage img").attr("alt");
					togoLink  = jQuery(".PortofolioDetailBoxLeft .Portofolio:first .InlineTitle a.srcLink").attr("href");
				}
				
				jQuery.each(listSelectorLnk, function() {
					jQuery(this).removeClass("active");
				});
				jQuery(this).addClass("active");
				jQuery(this).find("img").fadeTo('fast', 1);
				
				contentTitle.find("a").html(togoTitle);
				contentTitle.find("a").attr("href",togoLink);
				contentImg.transitionto({ destinationImage: togoImage });
			}				
		});			 
	});
	
});