var prop = 0.58; //725/1250;
$(function(){
	var htmlModalWindow = '<div id="modal-window-mask" style="display:none;"></div><div id="modal-window-content"  class="modal-window" style="display:none;"><div id="modal-logo"><img src="Images/modal-fraser-logo.jpg" alt="" /></div><div id="modal-close"><a href="#"><img src="Images/modal-close-button.jpg" width="89" height="36"/></a></div><div id="modal-instruction-mask" class="firsttime" style="display:none;"></div><div id="modal-introduction" style="display:none;"><img src="Images/modal-instructions.jpg" width="365" height="258" alt="instructions" /></div><div id="iframe-content"><iframe src="/virtual_tour/1.html" style="display:none;" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width="100%" height="607" ></iframe></div><a id="modal-nav-toggle" href="#"></a><div id="modal-window-nav" style="display:none;"><ul><li><a id="tourlink01" href="/virtual_tour/1.html" class="virtual-tour-nav selected"></a></li><li><a id="tourlink02" href="/virtual_tour/2.html" class="virtual-tour-nav"></a></li><li><a id="tourlink03" href="/virtual_tour/3.html" class="virtual-tour-nav"></a></li><li><a id="tourlink04" href="/virtual_tour/4.html" class="virtual-tour-nav"></a></li><li class="last"><a id="tourlink05" href="/virtual_tour/5.html" class="virtual-tour-nav"></a></li></ul></div></div>'	;
		
		$('body').append(htmlModalWindow);
	
	//if close button is clicked
		$('.modal-window .modal-window-close, #modal-close a').click(function (e) {
			//Cancel the link behavior
			e.preventDefault();
			$('#modal-window-mask, .modal-window').hide();
		});    
		 
		//if mask is clicked
		$('#modal-window-mask').click(function () {
			$(this).hide();
			$('.modal-window').hide();
		});
		
		$("#modal-nav-toggle").click(function(e) {
				e.preventDefault();
				if($(this).hasClass("selected")) $(this).removeClass("selected");
				else $(this).addClass("selected");
				$("#modal-window-nav").slideToggle(500);
			});
		
		$('#modal-instruction-mask,#modal-introduction').click(function() {
			$("#modal-instruction-mask").hide();
			$("#modal-introduction").hide();
			});
		
		$('.virtual-tour-nav').click(function(e){
			e.preventDefault();
			$(this).parents('ul').find('li a.selected').removeClass('selected');
			$(this).addClass('selected');
			
			$('#iframe-content iframe').hide().load(function(){
				$('#iframe-content iframe').show();
				
				}).attr('src',$(this).attr('href'));	
			//$('#iframe-content iframe').attr('src',$(this).attr('href'));	
		}); 
		
		
		buildModalWindow();
		
		
	
	
})


function buildModalWindow()
{
	//select all the a tag with name equal to modal
    	$('a[href="#modal-window-content"]').live("click", function(e) {
			//Cancel the link behavior
			
			e.preventDefault();
			//Get the A tag
			var id = $(this).attr('href');
     
			//Get the screen height and width
			var maskHeight = $(document).height();
			var maskWidth = $(window).width();
     
			//Set height and width to mask to fill up the whole screen
			$('#modal-window-mask').css({'width':maskWidth,'height':maskHeight});
         
			//transition effect    
			//$('#modal-window-mask').fadeIn(1000);   
			
		 
			//Get the window height and width
			var winH = $(window).height();
			var winW = $(window).width();
               
			//Set the popup window to center
			$('#modal-window-mask').fadeTo("slow",0.7,function(){
				if(1250>winW)
				{
					var he = Math.floor(prop*(winW-30));
					$(id).css('left', '15px');
					$(id).css({'width':(winW-30)+'px','height':he+'px', 'top':-1*he});
					$(id).find('#iframe-content').css('height',he-118);
					$(id).find('iframe').attr('height',he-118);
				}
				else
				{
					$(id).css('left', (winW-1250)/2);
					$(id).css({'width':'1250px', 'top':-$(id).height()});
				}
				$(id).css({'width':maskWidth-30, 'top':-$(id).height()});
			 
				//transition effect
				$(id).show().animate({top:'15px'},2000,function(){
					
					if($('#modal-instruction-mask').hasClass('firsttime'))
					$('#modal-instruction-mask').removeClass('firsttime').fadeTo("slow",0.7,function(){
						 $("#modal-introduction").show();
						 $(id).find('iframe').show();
						
						});	
					
				});
			
			
				
			
			
			}); 
			
		
		  
		 
		});
}