// magic.js
// "where magic happens"
// by Indro K. De

// super-awesome jQuery magic commencing here

var curTab = "home";
var curTheme = "default";

$(document).ready(function() {	

	// initialize page
	$("#nav li a.home").css({'color' : '#fff'});
  
	$("#about").hide();
	$("#websites").hide();
	$("#networks").hide();
	$("#work").hide();
	$("#contact").hide();
	
	 $("a#inline").fancybox();

	
	// on websites tab, make first item active
	$(".websites_list ul li:first").addClass('active');

	// nav animation slider toggle (add more buzzwords here)
	$("#nav li a").click(function() {
		   var str = $(this).attr('class');		

		
			$("#"+curTab).slideUp("fast", loadContent);
			function loadContent() {
				$("#"+str).slideDown("normal")
			}
				
			if (curTheme=='default') {
      	$("#nav li a").css({'color' : '#c8c8c8'});
			} else {
				$("#nav li a").css({'color' : '#eee'});   	
			}
			
		  $(this).css({'color' : '#fff'});	// set active nav item
		
		  curTab = str;
      return false;
		}
	);



	// show websites image caption
	$(".main_image .desc").show();
	$(".main_image .block").animate({ opacity: 0.85 }, 1 );
	
	$(".websites_list ul li").click(function() {
		if ($(this).is(".active")) {
			// shouldn't really do anything if clicked on an active item
		} else {
			$(".websites_list ul li").removeClass('active');
	 		$(this).addClass('active');
			var imgsrc = $(this).find('img').attr("alt"); // get main image file
			var blockcontent = $(this).find('.caption').html(); 	// get content	
			$(".main_image img").hide();
			$(".main_image img").attr({ src: imgsrc, alt: "..."});
			$(".main_image img").fadeIn("slow");
			$(".main_image .block").hide();
			$(".main_image .block").html(blockcontent).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
			$(".main_image .block").fadeIn("slow");	
		}
	});


	// networks tab - old school - no jQuery action here
	

	// work tab
	$(".work_list ul li").click(function() {
		if ($(this).is(".active")) {
			$(".work_details").hide();
			$(".work_intro").show();			
			$(this).removeClass('active');
		} else {
			$(".work_details").hide();		
			$(".work_list ul li").removeClass('active');
	 		$(this).addClass('active');
	 		$(".work_intro").hide();	
	 		var fieldDetail = $(this).find('.block p').html(); 	// get HTML of block
			$(".work_details").displayContent(fieldDetail);
		}
	});
	
	
	// about tab
	$(".about_list ul li").click(function() {
		if ($(this).is(".active")) {
			$(".about_details").hide();
			//$(".about_intro").fadeIn("slow");
			$(".about_intro").show();
			
			$(this).removeClass('active');
		} else {
			$(".about_details").hide();
	 		$(".about_list ul li").removeClass('active');
	 		$(this).addClass('active');
	 		$(".about_intro").hide();	
	 		var fieldDetail = $(this).find('.block p').html(); 	// get HTML of block
			$(".about_details").displayContent(fieldDetail);	
		}
	});
		
	// continue... link on homepage
	$(".continue").click(function() {
		$("#home").slideUp("fast", loadContent);
		function loadContent() {
			$('#about').slideDown("normal")
		}
		if (curTheme=='default') {
    	$("#nav li a").css({'color' : '#c8c8c8'});
		} else {
			$("#nav li a").css({'color' : '#eee'});      	
		}
		
		$("#nav li a.about").css({'color' : '#fff'});
    curTab = "about";

	});


	// background image changer
	$(".bgswitcher a.black").click(function() {
		curTheme = "default";
		$("body").css({'background-image' : 'url(images/bg_black.png)'});
		$("body").css({'background-color' : '#2e2e36'});
		$("#nav ul li a").css({'color' : '#aaa'});
		$("#nav li a."+curTab).css({'color' : '#fff'});
		$("p.footer a").css({'color' : '#666'});										
	});
	$(".bgswitcher a.orange").click(function() {
		curTheme = "alt";
		$("body").css({'background-image' : 'url(images/bg_orange.jpg)'});
		$("body").css({'background-color' : '#febe8d'});
		$("#nav ul li a").css({'color' : '#eee'});
		$("#nav li a."+curTab).css({'color' : '#fff'});
		$("p.footer a").css({'color' : '#333'});										
	});
	$(".bgswitcher a.green").click(function() {
		curTheme = "alt";
		$("body").css({'background-image' : 'url(images/bg_green.jpg)'});
		$("body").css({'background-color' : '#aabd4a'});
		$("#nav ul li a").css({'color' : '#eee'});
		$("#nav li a."+curTab).css({'color' : '#fff'});
		$("p.footer a").css({'color' : '#fff'});								
	});
	$(".bgswitcher a.blue").click(function() {
		curTheme = "alt";
		$("body").css({'background-image' : 'url(images/bg_blue.jpg)'});
		$("body").css({'background-color' : '#187cbc'});
		$("body").css({'background-position' : 'center top'});
		$("#nav ul li a").css({'color' : '#eee'});
		$("#nav li a."+curTab).css({'color' : '#fff'});
		$("p.footer a").css({'color' : '#fff'});						
	});
		

	// this function changes the contents of a particular class
	$.fn.displayContent = function(contents) { 
	    $(this).html(contents);
	 	//$(this).fadeIn("slow");
	 	$(this).show();

	}


	// preload
	// when the DOM is ready
	$(function () {
	  var img = new Image();

	  $(img).load(function () {    
	      $(this).hide();		// initially hide image
	      $('#home_image').removeClass('loading').append(this);
	      $(this).fadeIn();
	    })

	    .error(function () {
	      // couldn't load image; could add an error message here
	    })

	    // set the image src attribute
	    .attr('src', 'pics/home_001.jpg');
	});


// ***************************************************************************

	
});



// showmore(a) where a = class name of paragraph to show and  b = tab name
function showmore(classname,tab) {
	var fieldDetail = $("."+classname).html(); 	// get HTML of paragraph
	var tabClass = "."+tab+"_details"
	$(tabClass).hide();	
	$(tabClass).html(fieldDetail);
	$(tabClass+" a.thumb").fancybox();		// thumbnails use fancybox
	$(tabClass).show();
}


// showless(tab) hides details, shows intro
function showless(tab) {
	$("."+tab+"_list ul li").removeClass('active');
	$("."+tab+"_details").hide();
	$("."+tab+"_intro").show();		
}