// JavaScript Document
/*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
 
this.imagePreview = function(){	
	/* CONFIG */
		
		xOffset = 10;
		yOffset = 10;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");								 
		$("#preview")
			.css("top",(e.pageY - xOffset - 150) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		$("#preview")
			.css("top",(e.pageY - xOffset - 150) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};


// starting the script on page load
$(document).ready(function() {
						   
	imagePreview();
	
	var arrTab = ["Images/tab1.png", "Images/tab2.png", "Images/tab3.png", "Images/tab4.png", "Images/tab5.png", "Images/tab6.png", "Images/tab7.png" ];
	var arrTab_hover = ["Images/tab1_h.png", "Images/tab2_h.png", "Images/tab3_h.png", "Images/tab4_h.png", "Images/tab5_h.png", "Images/tab6_h.png", "Images/tab7_h.png" ];
	var arrTab_selected = ["Images/tab1_s.png", "Images/tab2_s.png", "Images/tab3_s.png", "Images/tab4_s.png", "Images/tab5_s.png", "Images/tab6_s.png", "Images/tab7_s.png" ];
	
	var currentPage = 1;
	
	$("#tabs img").hover(
		function() {
			var i = $(this).attr("id").toString().charAt(3);
			if ( i !== currentPage )
				$(this).attr( "src", arrTab_hover[i - 1] );
			else	
				$(this).attr( "src", arrTab_selected[i - 1] );
	}, 
		function() {
			var i = $(this).attr("id").toString().charAt(3);
			if ( i !== currentPage )
				$(this).attr( "src", arrTab[i - 1] );
			else
				$(this).attr( "src", arrTab_selected[i - 1] );	
	});
	
	$("#contents #tab").each(
		function(i) {
			if ( i !== currentPage - 1  )
				$(this).hide();
		}	
	);
	
	$("#contents .content").each(
		function(i) {
			if ( i !== currentPage - 1  )
				$(this).hide();
		}	
	);
	
	$("#tabs img").click(function() {
		var i = $(this).attr("id").toString().charAt(3);
		$(this).attr( "src", arrTab_selected[i - 1] );
		currentPage = i;
		$("#tabs img").each(
			function(i) {
				if ( i !== currentPage - 1  )
					$(this).attr( "src", arrTab[i] );
			});
		$(".content").eq(i - 1).fadeIn();
		$(".content").each(
			function(i) {
				if ( i !== currentPage - 1  )
					$(this).hide();
			});
	});			
							   
	$("#contact_unfolded").hide();
	
	$("#contact").click(function() {
		$("#contact").hide();
		$("#contact_unfolded").show();				  
	});
	
	$("#close_contact").click(function() {
		$("#contact").show();
		$("#contact_unfolded").hide();				  
	});		

});