/*** FADING EFFECT OF THUMBNAILS ***/
$(document).ready(function () {
	$(".thumb img").fadeTo(200, 0.8);
	$(".work p").fadeTo(200, 0.8);
	$(".work").hover(function() {
		$(this).children(".thumb").children("a").children("img").fadeTo(200, 1.0);
		$(this).children("p").fadeTo(200, 1.0);
	}, function() {
		$(this).children(".thumb").children("a").children("img").fadeTo(200, 0.8);
		$(".work p").fadeTo(200, 0.8);
	});
	
});


/*** SHADOWBOX INIT ***/
Shadowbox.init({
	 players:  ['iframe', 'img'],
	continuous: true,
	displayCounter: false	
});


/*** NAVIGATION ***/
$(document).ready(function() {
	$("#nav li:first a").addClass("selected");
	$("#nav li a").click(function() {
		$("#nav li a").removeClass("selected");
		$(this).addClass("selected");
	});
});


	
$(function(){
	$(".page .page-button").click(function(){
		$clicked = $(this).parent();
		// each button div MUST have a "xx-button" and the target div must have an id "xx" 
		var idToLoad = $clicked.attr("id").split('-');		//e.g. if button name is websites2-button, it'll get split where the - is. Then it gets stored into an array called idToLoad
		//we search trough the content for the visible div and we fade it out
		$clicked.parents(".page").parent(".workContainer").find("div.page:visible").fadeOut("fast", function(){
			//once the fade out is completed, we start to fade in the right div
			$(this).parent().find("#"+idToLoad[0]).fadeIn();		
		});
	});
});
		



/* Initial code for fading effect. Can't use it cos it'll make the images transparent and shows the floral bg
<script type="text/javascript">
	$(document).ready(function () {
		$(".work").fadeTo("fast",0.7);
		$(".work").hover (function() {
			$(this).fadeTo("fast", 1.0);
		}, function() {
			$(".work").fadeTo("fast",0.7);
		});
	});
*/