/* jQuery for "Arbeiten" Page of Casparmartig.ch */
/* loads images from thumbs into DIV */

$(function() {
	
	$("a").focus(function(){ 
		$(this).blur();
	});
	
	$(".horizontal-only").focus(function(){ 
		$(this).blur();
	});
	
	// Change the first Thumbnail to Active by default
	 $("#subnavistretch").children(":first").toggleClass("active");	
	
	// Change opacity of elemts
	$(".inactive").css("opacity", 0.7);
	$(".active").css("opacity", 1);
	
	// Get the width of images and apply to scrollpane
	var width = 0;
	$('#subnavistretch > *').each(function() { 
		width += $(this).width();
		//width += 3; 
	});
	//$("#subnavistretch").css({width: width + "px"});
	
	
	
	// Hover over the images and change opacity
	$(".inactive").hover(function(){
		$(this).css("opacity", 1);
	}, function(){
		if (!$(this).parents("a").hasClass("active")) {
			$(this).css("opacity", 0.7);
		}
	});
	
	// Detect Click State to change image of Main Right Stage
	$(".thumb").click(function() {
		$(this).changeStage(this);
		//$(".inactive").css("opacity", 0.7);
		//$(".active").css("opacity", 1);
		return false;
	});
	
	$.fn.changeStage = function(img) {
		// change some classes so the opacity is correct
/*
		$("#subnavistretch a img").removeClass("active");
		$("#subnavistretch a img").addClass("inactive");
		$(img).children(":first").removeClass("inactive");
		$(img).children(":first").addClass("active");
		$(img).children(":first").css("opacity", 1);
		$("#subnavistretch a").removeClass("active");
		$(this).addClass("active");
*/
		
		// swap around classes so before and after look good
		$(".thumb").removeClass("active");
		$(".thumb").addClass("inactive");
		$(img).removeClass("inactive");
		$(img).addClass("active");
		$("#subnavistretch .inactive img").css("opacity", 0.7);
		$("#subnavistretch .active img").css("opacity", 1);
		
		
		// get image description
		var title = $(img).attr("title");
		
		// 
		var image = new Image();
  		image.src = $(img).attr("href");
  		$("#ajax-loader").show();	
		$(image).load(function() {
			// Remove original Image
			$("#ajax-loader").hide();
			$(".image-navi-wrapper").children("img").remove();
			// Add new Image
			$(".image-navi-wrapper").append(image);
			// Add Image description
			$("#bildbeschrieb p").html(title);	
		});
	}
	
	
	$(".forward").click(function() {
		$(this).forward();
		return false;
	});
	
	$(".back").click(function() {
		$(this).backward();
		return false;
	});
	
	// Use forward and Backwar Keys to navigate
	$(document.documentElement).keyup(function(event) {
		if (event.keyCode == 37) {
			$(this).backward();
		}
		 
		if (event.keyCode == 39) {
			$(this).forward();
		}
	});
	
	$.fn.forward = function() {
		var next = $(".active").next("a");
		var total  = $("#image-number").html();
		
		$(".active").next("a").addClass("active");
		
		
		if ($(next).attr("index") <= parseInt(total)) {
			$(this).changeStage(next);
		}
		
		var thing = $(".active").children("img").width() + 4;
		var bywhat  = $('#subnavigation').data('jsp');

		bywhat.scrollBy(parseInt(thing),0);
		
		}
	
	$.fn.backward = function() {
		var previous = $(".active").prev("a");
		
		if ($(previous).attr("index") >= 1) {
			$(this).changeStage(previous);
		}
		
		var thing = $(".active").children("img").width() + 4;
		var bywhat  = $('#subnavigation').data('jsp');
		
		bywhat.scrollBy(-parseInt(thing),0);	
	}
	
	// Replace the scrollbar
	$('.scroll-pane').jScrollPane();
});