<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<script src="jquery-1.7.1.js"></script>
	<style>
		html, body, div, iframe, video{
			margin: 0;
			padding: 0;
		}
		body{
			width: 170px;
			height: 112px;
		}
		
		#wrapper{
			width: 170px;
			height: 112px;
			overflow: hidden;
		}
		
		#my_Image{
			width: 170px;
			height: 112px;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: 50% 50%;
		}
		
		#my_Symbol{
			width: 168px;
			height: 110px;
			border: 0;
			padding: 1px;
		}
		
		#my_Video{
			width: 170px;
			height: 112px;
		}
		
		#my_NoPreview{
			font-family: Tahoma, "Lucida Grande";
			color: #C0C0C0;
			width: 170px;
			height: 112px;
		}
		
		#comment{
			background-color: black;
			font-size: 11px;
			text-align: center;
			margin-top: 33px;
			padding: 8px;
		}
	</style>
</head>

<body>
	<div id="wrapper">
		<div id="my_Image"></div>
		<iframe id="my_Symbol" scrolling="no"></iframe>
		<video id="my_Video"></video>
		<div id="my_NoPreview">
			<div id="comment"></div>
		</div>
	</div>
	
	<script>
		var image  = document.getElementById("my_Image");
		var iframe = document.getElementById("my_Symbol");
		var video  = document.getElementById("my_Video");
		var noPreview  = document.getElementById("my_NoPreview");
		var comment  = document.getElementById("comment");
		var noPreviewComment = "($$$/helium/app/library/noPreview/comment=A preview of this asset cannot be shown.)"
		
		video.addEventListener('loadeddata', function() {
			setTimeout(function(){helium.callbackTunnelAsync('LibraryPanel.assetLoaded:');}, 0);
			setTimeout(function(){video.setAttribute("src", "");}, 2000);
		}, false);
		
	    function getZString(zStr) {
			var deferred = $.Deferred();
			
			helium.callbackTunnelAsync("LibraryPanel.localString:" + zStr, function(sResult){
				deferred.resolve(sResult);
			});
			
			return deferred.promise();
		}
		
		function setAssetImage(sourceURL) {
			image.style.display = 'block';
			iframe.style.display = 'none';
			video.style.display = 'none';
			noPreview.style.display = 'none';
			
			image.style.backgroundImage = "url(" + sourceURL + ")";
			var img = new Image();
			img.src = sourceURL;
			img.onload = function() {
				setTimeout(function(){helium.callbackTunnelAsync('LibraryPanel.assetLoaded:');}, 0);
			};
		}
		
		function setIFrame(sourceURL) {
			image.style.display = 'none';
			iframe.style.display = 'block';
			video.style.display = 'none';
			noPreview.style.display = 'none';
			
			iframe.setAttribute("src", sourceURL);
		}
		
		function setVideo(sourceURL, bVideoNotSupported) {
			image.style.display = 'none';
			iframe.style.display = 'none';
			
			if(!bVideoNotSupported) {
				video.style.display = 'block';
				noPreview.style.display = 'none';
				video.setAttribute("src", sourceURL);
				video.load();
			}
			else {
				video.style.display = 'none';
				noPreview.style.display = 'block';
				$.when(getZString(noPreviewComment)).done(function(sResult){
					comment.innerHTML = sResult;
					setTimeout(function(){helium.callbackTunnelAsync('LibraryPanel.assetLoaded:');}, 0);
				});				
			}
		}
		
		helium.callbackTunnelAsync("LibraryPanel.pageLoaded:");
	</script>
</body>
</html>
