<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Device Simulator for Muse Preview</title>

<style type="text/css">
	#theFrame
	{
		position: relative;
		-moz-transform-origin:0 0;
		-webkit-transform-origin:0 0;
		-ms-transform-origin:0 0;
	}
	
	iframe::-webkit-scrollbar
	{  
		display: none;    
	}
	
	body
	{
		background-image: url('images/preview_app_background.png');
	}
	
	#preview
	{
		margin-top: 40px;
		margin-bottom: 40px;
	}
}
</style>
<script language="javascript">				
		var curSrc = "";
		var curView = "iphone_p_100";
				
		function canAccessIFrame(iframe) 
		{
			var html = null;
			try { 
				// deal with older browsers
				var doc = iframe.contentDocument || iframe.contentWindow.document;
				html = doc.body.innerHTML;
			} catch(err){
				// do nothing
			}

			return(html !== null);
		}
				
		function onLoadIFrame()
		{
			if (curSrc === "") 
				return;
				
			var iframe = document.getElementById("theFrame");
			var v = views[curView];	
			
			var agentString = navigator.userAgent;
			var isWebKit = (agentString.indexOf("AppleWebKit") != -1);
			if (isWebKit)
				iframe.scrolling = "yes";
			
			if(!canAccessIFrame(iframe))
			{
				resetIFrame(v, iframe);
				window.airBridge.alertExternalLink();
			}
			else
			{			
				var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
				if (iframeWin.document) 
				{
					var newSrc = iframeWin.document.location;
					if (curSrc != newSrc)	
					{				
						// Not available - callback to export
						window.airBridge.changeIFrameSource(newSrc);
					}
					else
					{
						// Loaded
						setIFrameScale(iframe)
						window.airBridge.onLoadIFrame();
					}
					
					listenForWheel(iframe);
				}
			}
		}
		
		function createCookie(name,value,days) 
		{
			if (days) {
				var date = new Date();
				date.setTime(date.getTime()+(days*24*60*60*1000));
				var expires = "; expires="+date.toGMTString();
			}
			else var expires = "";
			document.cookie = name+"="+value+expires+"; path=/";
		}
		
</script>
</head>

<body style="font-family:Arial, Helvetica, sans-serif">	
	<div id="preview">
    	<div id="skin" style="margin-left:auto;margin-right:auto;background-color:white;width:320px;height:480px"/>
			<iframe id="theFrame" src="" frameborder="0" marginheight="0" marginwidth="0"
					onload='onLoadIFrame();' scrolling="no"
					style="margin-left:auto;margin-right:auto;border:none"></iframe>									
		</div>
	</div>	
    <!--script src="scripts/jquery-1.8.3.min.js"></script-->
    <script language="javascript">				
		
		function setScale(iframe, scale)
		{
			try { iframe.style.MozTransform = "scale(" + scale + ")"; } catch(e) {}
			try { iframe.style["-webkit-transform"] = "scale(" + scale + ")"; } catch(e) {}
			try { iframe.style["-ms-transform"] = "scale(" + scale + ")"; } catch(e) {}
		}
		
		function resetIFrame(v, iframe)
		{
			setScale(iframe, 1);
			iframe.style.width = v.w + "px";
			iframe.style.height = v.h + "px";						
		}
		
		function setIFrameScale(iframe)
		{
			var v = views[curView];		
			
			resetIFrame(v, iframe);			
				
			if (canAccessIFrame(iframe) && iframe.src != "") // Can access iframe's content only in the same domain
			{
				// Determine a document width;
				var docWidth = 0;
				var doc = iframe.contentDocument || iframe.contentWindow.document;

				var viewport = doc.querySelector("meta[name=viewport]");
				if (viewport)
				{
					var content = viewport.getAttribute("content");
					docWidth = parseInt(content.substr(content.indexOf("=") + 1));
				}
					
				// Calculate the real document width on a fly
				iframe.style.width = "1px";
				iframe.style.height = "1px";	

				var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
				var realDocWidth = iframeWin.document.documentElement.scrollWidth || iframeWin.document.body.scrollWidth;
				
				docWidth = Math.max(docWidth, realDocWidth);
				
				var scale = docWidth > 0 && Math.abs(v.w - docWidth) >= 0.01? (v.w/docWidth).toFixed(3) : 1.0;
				setScale(iframe, scale);

				var agentString = navigator.userAgent;
				var isWebKit = (agentString.indexOf("AppleWebKit") != -1);
				if (isWebKit == true && scale < 1.0 && scale > 0.0)
					iframe.style.width = docWidth / scale + "px";
				else
					iframe.style.width = docWidth + "px";
				var zoom = 1.0/scale;
				
				if (isWebKit == true && scale < 1.0 && scale > 0.0)
					iframe.style.height = Math.ceil(v.h * zoom) / scale + "px";
				else
					iframe.style.height = Math.ceil(v.h * zoom) + "px";	
			}			
		}			
	
		function handleWheel(event)
		{
			var iframe = document.getElementById("theFrame");
			var delta = 0;
			if (!event)
				event = iframe.event
			if (event.wheelDelta)
				delta = -event.wheelDelta / 120;
			else if (event.detail)
				delta = event.detail / 3;
			
			if (delta)
			{
				var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
				iframeWin.scrollBy(0, 20*delta);
			}
				
			if (event.preventDefault)
				event.preventDefault();
			event.returnValue = false;
		}
		
		function listenForWheel(iframe)
		{
			var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
			if (iframeWin.removeEventListener)
				iframeWin.removeEventListener('DOMMouseScroll', handleWheel, false);
			if (iframeWin.addEventListener)
				iframeWin.addEventListener('DOMMouseScroll', handleWheel, false);
			try { iframeWin.onmousewheel = handleWheel; } catch(e) {}
		}
		
		var views = { 
			// Phones
			iphone4_p: { w:320, h:480},
			iphone4_l: { w:480, h:320},
			iphone5_p: { w:320, h:568},
			iphone5_l: { w:568, h:320},
			samsunggalaxys3_p: { w:360, h:640},
			samsunggalaxys3_l: { w:640, h:360},
			nokialumia920_p: { w:384, h:640},
			nokialumia920_l: { w:640, h:384},
			
			// Tablets
			ipad_p: { w:768, h:1024},
			ipad_l: { w:1024, h:768},
			nexus7_p: { w:800, h:1280},
			nexus7_l: { w:1280, h:800},
			kindlefire_p: { w:600, h:1024},
			kindlefire_l: { w:1024, h:600},
			kindlefirehd_p: { w:400, h:640},
			kindlefirehd_l: { w:640, h:400},
			kindlefirehd89_p: { w:600, h:960},
			kindlefirehd89_l: { w:960, h:600},
			surfacert_p: { w:768, h:1366},
			surfacert_l: { w:1366, h:768}
		};
		
		function setView(id)
		{
			curView = id;
			var v = views[id];
			var skinDiv = document.getElementById("skin");
			var iframe = document.getElementById("theFrame");
			
			skinDiv.style.width = v.w + "px";
			skinDiv.style.height = v.h + "px";			
			
			setIFrameScale(iframe);
			
			iframe.focus();
			listenForWheel(iframe);
			
			// Do not have jQuery in the loaded page yet?
			if (typeof iframe.contentWindow.$ === "undefined")
				return;
			
			// Fire a 'resize' event on window
			iframe.contentWindow.$(iframe.contentWindow).resize();
		}		
		
		function setDoc(src)
		{
			curSrc = src;
			
			var iframe = document.getElementById("theFrame");
			iframe.src = src;	
			listenForWheel(iframe);
		}		
		
		function setupAfterPageLoaded(src)
		{
			curSrc = src;
			
			setIFrameScale(document.getElementById("theFrame"))
			window.airBridge.onLoadIFrame();
		}
		
		//setView('ipad_p');
		//setDoc('MuseTemp/tablet/index.html');		
	</script>
</body>
</html>
