var popUp=0;
var tmpwidth=0;
var tmpheight=0;
var width=0;
var height=0;
var windowWidth = document.documentElement.clientWidth;   
  

function openModal(url,content,category){

   $("#closeBut").remove();
   $("#title-top3").remove();
	
	if(popUp==1){
	   $("#modalFrame").remove();
	 }

	//url=url+'?ran='+Math.floor(Math.random()*1100);
	$('<div id="detailContent"><div id="c"></div></div><div id="backgroundDetail"></div>').appendTo("body");
      $("#backgroundDetail").css({
			"opacity": "0.75"
	   });

	 if( popUp==0){
	     $("#detailContent").show().css({
			"opacity": "0"
	   });

		$("#backgroundDetail").fadeIn("fast");
	    $("#detailContent").css({
		"position": "absolute",
		"top": $(window).height()/2+$(window).scrollTop()- 50/2,
		"left":(windowWidth/2)- (100/2),
		"width": 100,
		"height":50
	     });		
	}
	
	if(content=="map"){
	   width=630;
	   height=387;
	}else{
	   width=780;
	   height=487;
	}
	
	$("#detailContent").animate({ 
        width: width,
		height: height,
        opacity: 1  ,
		top: $(window).height()/2+$(window).scrollTop() - height/2,
		left:(windowWidth/2)- (width/2)
        }, 600 ,function(){
		showCover();
		showLoader();
		$('<iframe id="modalFrame" onload="showModal(\''+category+'\');" name="modalFrame' + Math.round(Math.random()*1000) + '" frameborder="0" hspace="0" scrolling="no"  src="' + url + '"></iframe>').appendTo("#c").show();		
		});		
	
}

function showModal(category){

	$("#ModalLoading").remove();
	 popUp=1;
	   $("#modalFrame").css({
		"height": height,
		"width": width		
	      });
	     pos = $("#detailContent").position();
		$('<div id="title-top3"><img src="http://www.top3canada.com/images/common/top3-logo-pop.png"></div>').appendTo("body").css({
		"top": pos.top-30,
		"left":pos.left+10		
	     });
		$('<a href="javascript:disableModal();"  id="closeBut" title="close">Close</a>').appendTo("body").css({
		"top": pos.top-9,
		"left":(pos.left+width)+30
	     });
		$("#backgroundDetail").click(function(){
		disableModal();	
		 });
		hideCover();	 
}


function disableModal(){

	$("#modalFrame").remove();
	$("#closeBut").remove();
	$("#title-top3").remove();
       $("#detailContent").animate({ 
        width: 300,
		height: 100,
        opacity: 0  ,
		top: $(window).height()/2+$(window).scrollTop() - (100/2),
		left:(windowWidth/2)- (300/2)
        }, 400 ,function(){
			popUp=0;
			$("#ModalLoading").remove();
			$("#cover").remove();
			$("#detailContent").remove();
			
			$("#backgroundDetail").fadeOut("fast");
        });

}
function showCover(){	
	$('<div id="cover"></div>').appendTo("#detailContent");
	 $("#cover").css({
		"position": "absolute",
		"top": "0",
		"left":"0",
		"width": "100%",
		"height": "100%",
		"background":"#fff",
		"z-index": "2000"
	});	

}

function showLoader(){	
	$('<div id="ModalLoading"></div>').appendTo("#cover").css({
		"position": "absolute",
		"top": ($("#cover").height()/2)-75,
		"left": ($("#cover").width()/2)-75,
		"z-index": "20"
	});	
}

function hideCover(){  
	  $("#cover").animate({ 
        opacity: 0 		
        }, 200, function(){
			$("#cover").remove();			
		});

}