<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<meta name="description" content=""/>
	<meta name="keywords" content=""/>
	
	<link href="css/viewer.css" rel="stylesheet"  type="text/css"/>
	
	<!-- External Libraries [check using minified version in production] -->
	<script type="text/javascript" src="js/lib/jquery-1.6.1.js"></script>
	<script type="text/javascript" src="js/lib/jquery-ui-1.8.13.custom.min.js"></script>
	<script type="text/javascript" src="js/lib/jquery.tmpl.js"></script>
	<script type="text/javascript" src="js/lib/mojo.js"></script>
	<script type="text/javascript" src="js/lib/service.js"></script>
    <script type="text/javascript" src="js/lib/iscroll.js"></script>
	
	<!-- Omniture -->
	<script type="text/javascript" src="js/lib/site-catalyst.js"></script>
	
	<!-- Persistence Library -->
	<script type="text/javascript" src="js/lib/persistence.js"></script>
	<script type="text/javascript" src="js/lib/persistence.store.sql.js"></script>
	<script type="text/javascript" src="js/lib/persistence.store.websql.js"></script>
	
	<!-- PRESSRUN -->
	<script type="text/javascript" src="js/pressrun/PressRun.js"></script>
	<script type="text/javascript" src="js/pressrun/PressRun.Config.js"></script>
	<script type="text/javascript" src="js/pressrun/PressRun.Downloads.js"></script>
	<script type="text/javascript" src="js/pressrun/PressRun.Content.js"></script>
	<script type="text/javascript" src="js/pressrun/PressRun.Util.js"></script>
	<script type="text/javascript" src="js/pressrun/PressRun.Views.js"></script>
	<script type="text/javascript" src="js/pressrun/PressRun.Storage.js"></script>
	<script type="text/javascript" src="js/pressrun/PressRun.Video.js"></script>
	<script type="text/javascript" src="js/pressrun/PressRun.Media.Audio.js"></script>
	<script type="text/javascript" src="js/pressrun/PressRun.Tracking.js"></script>
    <script type="text/javascript" src="js/pressrun/PressRun.ZoomableImage.js"></script>

	<script type="text/javascript">
		//Force all Jquery Ajax requests to be sync!
		$.ajaxSetup({
		  async: false //Synchronous for now!
		});
	
		$(document).ready(function() {
	  		PRESSRUN.start();
		});
	</script>
	</head>
	<body>

		<div id="framework">
			<div id="loadingScrim" class="scrim" style="display:none;">
				<div id="message"></div>
			</div>
			
			<div id="issueViewer" style="display:none;">
				<div class="navContainer" id="issueViewer_navTop">
					<div class="navCont">
						<div class="navBar">
							<div class="navMiddle">
								<h1>PressRun</h1>
							</div>
							<div class="navLeft">
								<button class="pr-button hidden" id="editButton" type="button">Edit</button>
								<div style="display:none;" class="pr-button" id="doneButton">Done</div>
							</div>
							<div class="navRight"></div>
							<div class="spacer"></div>
						</div>				
					</div>
				</div>
				<ul id="IssueViewer_issueList" class="issuesList"></ul>
			    <div id="noIssuesError" style="display:none;">
                    <h1>No Issues Available</h1>
                    <p>Please check internet connectivity</p>
                </div>
            </div>
			<div id="pageViewer" style="display:none;">
				<div class="navContainer" id="navTop">
					<div class="navCont">
						<div class="navBar">
							<div class="navMiddle"></div>
							<div class="navLeft">
                                <button class="pr-button" id="issues" type="button">Issues</button>
          					</div>
							<div class="navRight">
                                <!-- Audio Player Button only visible when audio in player -->
								<button id="audioPlayerButton" style="display:none;" class="pr-button" type="button">
                                    <img src="img/icon-headphones.png" alt=""/>
                                </button>
							</div>
							<div class="spacer"></div>
						</div>
					</div>

				</div>
				<div id="mainbody">
					<div id="pageWindow" class="landscape">
					
						<div id="audioPlayerContainer">
							<div id="audioPlayerArrowUp"></div>
							<div id="audioPlayer">
								<div id="audioTrackInfo"></div>
								<div id="audioPlayerInner">
									<div id="audioTimeInfo"></div>
									<ul id="audioControls">
										<li><img alt="Previous" src="img/audio/prevButton.png" onclick="PRESSRUN.Media.Audio.previousTrack();" /></li>
										<li><img alt="PlayPause" src="img/audio/playButton.png" class="playPause" /></li>
										<li><img alt="Next" src="img/audio/nextButton.png" onclick="PRESSRUN.Media.Audio.nextTrack();"/></li>
									</ul>
								</div>
							</div>
						</div>

						<ul id="pages">
							<li class="pageItem"><div id="currentPage"></div></li>
						</ul>
						<div id="spacer"></div>
					</div>
                    <div id="scrubberBar">
						<ul id="previewThumbnails"></ul>
						<div class="spacer"></div>
					</div>
				</div>

			 	<div id="navBottom">
			 	    <span class="copyright">Copyright 2011 Mobile IQ Ltd.</span> <span class="version">Pressrun Version 1.0-SNAPSHOT (2011-02-02T14:01:40)</span>
			 	</div>
		 	</div>
		 </div>
	</body>
	
	<!-- Templates -->
	
	<!-- Issue Template used by Issue Viewer -->
	<script id="issueTemplate" type="text/x-jquery-tmpl">
		<li>
			<div class="issue" style="text-align:center;" data:id="${id}" data:issueId="${issueId}">

				{{if PRESSRUN.Config.orientation == 'portrait'}}
                    {{if offlineThumbnailPortrait.length > 0}}
                    <img alt="thumb" src="${offlineThumbnailPortrait}" class="landscape" style="margin-bottom:10px;"/>
                {{else}}
                    <img alt="thumb" src="${PRESSRUN.Config.Download.downloadUrl}${portraitThumbnailURL}" class="portrait" style="margin-bottom:10px;"/>
                {{/if}}
                {{else PRESSRUN.Config.orientation == 'landscape'}}
                    {{if offlineThumbnailLandscape.length > 0}}
                        <img alt="thumb" src="${offlineThumbnailLandscape}" class="landscape" style="margin-bottom:10px;"/>
                    {{else}}
					    <img alt="thumb" src="${PRESSRUN.Config.Download.downloadUrl}${landscapeThumbnailURL}" class="landscape" style="margin-bottom:10px;"/>
				    {{/if}}
                {{/if}}
				
				<h1>${title}</h1>

				{{if subtitle}}
					<h2>${subtitle}</h2>
				{{else}}
					<h2>&nbsp;</h2>
				{{/if}}

                <div class="issueNotice"></div>

				{{if PRESSRUN.Views.IssueViewer.getCurrentMode() === 'VIEW'}}	
					{{if status === 'READY'}}
						<button type="button" style="width:100px;" class="pr-button alternate viewButton" id="viewButton" onmousedown="PRESSRUN.Views.IssueViewer.viewIssue('${issueId}')">View</button>
					{{else status === 'AVAILABLE'}}
						<button type="button" style="width:100px;" class="pr-button downloadButton" id="downloadButton" onmousedown="PRESSRUN.Views.IssueViewer.downloadIssue(this,'${issueId}')">Download</button>
					{{/if}}				
				{{else}}
					{{if status === 'READY'}}
						<button type="button" style="width:100px;" class="pr-button delete" onmousedown="PRESSRUN.Views.IssueViewer.deleteIssue(this,'${issueId}')">Delete</button>
				    {{else}}
                        <button type="button" style="width:100px;opacity:0" class="pr-button"></button>
                    {{/if}}
				{{/if}}

			</div>
		</li>
	</script>
</html>
