$(document).ready(function(){
    function showOverlay(text,text2){
      $("body").append('<div class="overlayBG" style="height:'+$(window).height()+'px;"></div>');
	  $(".overlayBG").fadeTo(0,.8);
	  //function callFrame(){
		  $("body").append('<div id="frame" style="height:'+$(window).height()+'px;"></div>');		  
		  $("#frame").html('<div align="center" class="disclaimer"><span>Disclaimer:</span> The following are the properties of their respective owners and/or companies. Kind of work done is as specified. </div><iframe src="werk/'+text+'/" frameborder="0" height="'+$(window).height() * .85+'" class="myiframe"></iframe><div align="center"><strong><br />'+text2+' -- "'+text+'"</strong></div>');
		  $("#frame iframe").fadeTo(0,0).fadeTo(500,1);
		  //$("#frame iframe").hide().show(1000);
		  $("#frame").css({"color":"#fff", "font-size":"1.2em", "text-align":"center", "padding-top":"10px"});
		  $("#frame span").css("color","#ffff00");		  
		  $("#frame").click(function(){
			  $(".overlayBG").remove();
			  $(this).remove();
		  });		  
	  //} 	  
    }
	$(".folio div").hover(
		function(){			
			$(this).css("cursor","pointer");
			$("img", this).fadeTo(0, .7);
			$(this).append('<div id="details" style="position:absolute;top:'+$("img", this).offset().top+'px;left:'+$("img", this).offset().left+'px;"><h2>'+$("img", this).attr("alt")+'</h2>'+$("span", this).text()+'</div>');
			$("body #details").hide().slideDown(300);
			},
		function(){
			$(this).css("cursor","auto");
			$("img", this).fadeTo(0, 1);
			$("#details", this).remove();
		});
	$(".folio div").click(function(){
		showOverlay($("img", this).attr("alt"),$("span", this).text());
		return false;
	});	
  });