// Initialize

var animation = false; // Track if an animation is ongoing

$(document).ready(function() {
	
	// NO SPAM
	$('a.email').nospam({
		replaceText: true
	});
	
	$('h1, h2').each(function() {
		var title = $(this).text();
		flash = $.flash.create({  
			swf: '/media/swf/title.swf',
			flashvars: {
				titel: $(this).text()
			},
			width: 610,
			height: 25,
			wmode: 'transparent'
		});
		$(this).after(flash);
		$(this).remove();
	});
	
	// Bind show elements
	$('a.showSwitcher').click(gotoShowImage);
	
	$.preloadImages(
		"media/img/design/img-model-1-big.png", 
		"media/img/design/img-model-2-big.png",
		"media/img/design/img-model-3-big.png",
		"media/img/design/img-model-4-big.png");
});


function gotoShowImage(event) {
	event.preventDefault();
	
	var url = event.currentTarget.href;
	var tempSplit = url.split("/");
	var modelID = tempSplit[tempSplit.length - 1];
	
	changeShowItem(modelID);
	highlightNavigationElement(modelID);
}

function changeShowItem(modelID) {
	
	if (animation) {
		$(".showImage:first").remove();
		var currentImage = $(".showImage:first");
		//if someone handels to click more then 2 thumbnails in 300 millisecond, there is a unhandled bug.
		//$(".showImage:not(.showImage:first)").remove();
		$(currentImage).css("opacity", 1);
	} else {
		var currentImage = $(".showImage:first");
	}
	
	var newImage = $(currentImage).clone();
				
	var showImageUrl = $(currentImage).css("background-image");
	var showImagePath = showImageUrl.substring(4, showImageUrl.lastIndexOf("/"));
	
	animation = true;
		
	$(newImage).css("background-image", "url(" + showImagePath + "/img-" + modelID + "-big.png)");
	$(newImage).hide();
	$(currentImage).after(newImage);
	$(newImage).fadeIn(300);
	$(currentImage).fadeOut(300, function () {
		$(this).remove();
		animation = false;
	});		
}

function highlightNavigationElement(modelID) {
	$.each($(".showThumbnails:first").children(), function () {
		var src = $(this).find("img").attr("src");
		var newSrc = src;
		
		if (src.indexOf(modelID) == -1) {
			// Not clicked element ->  lowlight
			if (src.indexOf("-lo") == -1) {
				newSrc = src.replace(/-hi/, "-lo");
			}			
		} else {
			// Clicked element -> highlight
			if (src.indexOf("-hi") == -1) {
				newSrc = src.replace(/-lo/, "-hi");
			}
		}
		
		$(this).find("img").attr("src", newSrc);
	});
}