templates.html

	<script id="imageButtonTemplate" type="text/html">
		<button class="changePic fg-button" data-bind="click: select, css: { 'ui-state-active': selected() }" id="{{ name }}">{{ name }}</button>
	</script>

	<script id="moreImageButtonTemplate" type="text/html">
		<li data-bind="click: select">
			{{ name }}
		</li>
		<hr>
	</script>

	<script type="text/html" id="newsItemTemplate">
		<li title="{{ title }}" data-bind="visible: isVisible()">
			<div class="itemLICenter">
				<a target="_blank" class="link" href="{{ url }}" data-bind="click: visitPage, css: { visited: visited }">{{ text }}</a>
			</div>
			<div class="itemLIRight">
				<a target="_blank" class="comment" href="{{ permalink }}" title="{{ scoreTitle }}">{{ score }}</a>
			</div>
		</li>
	</script>

	<script type="text/html" id="newsButtonTemplate">
		<div title="{{ name }}" rel="{{ name }}" data-bind="click: setActive, css: { 'ui-state-active' : isActive() }">{{ name }}</div>
		<hr>
	</script>
    
	<script id="subredditTemplate" type="text/html">
		<div>
			<div class="portlet ui-widget ui-widget-content ui-corner-all" title="{{ name }}">
				<div class="portlet-header ui-widget-header ui-corner-all">
					<a href="{{ url }}" target="_blank">{{ name }}</a>
					<div class="portletButton buttonBackground" title="Minimize Section" data-bind="click: toggleMinimize">
						<div style="background-color:#990000;">&nbsp;</div>
					</div>	
					<div class="portletButton buttonBackground" title="Toggle Visited" data-bind="click: toggleVisited, visible: !isMinimized(), css: { 'highlightOff': isShowingVisited(), 'highlightOn': !isShowingVisited() }">
						<div style="background-color:#3A3A3A;">&nbsp;</div>
					</div>
					<div class="portletButton buttonBackground viewMore" title="View More" data-bind="click: setActive, visible: !isMinimized()">
						<div style="background-color:#000066;">&nbsp;</div>
					</div>
				</div>
				<ul class="portlet-content" data-bind="template: { name: 'newsItemTemplate', foreach: getNewsItems() }, visible: !isMinimized()"></ul>
				<div class="loader" data-bind="visible: getShowLoadingBar()">&nbsp;</div>
				<div class="readMore" data-bind="click: populateNext, visible: !isMinimized()">
					<div style="width:84%">
						<div class="ui-icon ui-icon-carat-1-s" class="moreIcon">&nbsp;</div>
					</div>
					<div class="moreText">Read More</div>
				</div>
			</div>
		</div>
	</script>

	<script type="text/html" id="orderPortletsTemplate">
		{{#isFirst}}
			<li data-role="list-divider" data-dividertheme="a">News</li>
		{{/isFirst}}
		<li>
			<a href="index.html">{{ name }}</a>
			<a data-bind="click: remove" data-icon="delete">Sort</a>
		</li>
	</script>
	
	<script type="text/html" id="orderImagebarsTemplate">
		{{#isFirst}}
			<li data-role="list-divider" data-dividertheme="a">Pics</li>
		{{/isFirst}}
		<li>
			<a href="index.html">{{ name }}</a>
			<a data-bind="click: remove" data-icon="delete">Sort</a>
		</li>
	</script>	
	
	<script type="text/html" id="metaTemplate">
		<li data-bind="click: add">
			<a href="#">
				<img src="images/fileTypes/picture.png" alt="View" class="ui-li-icon">
				<span>{{ name }}</span>
				<span class="ui-li-count">{{ count }}</span>
			</a>
		</li>
	</script>

	<script id="loadMetaButtonTemplate" type="text/html">
		<input type="radio" name="metaList" id="radio-choice-{{ name }}" value="{{ name }}" checked="checked"  data-bind="click: select"/>
		<label for="radio-choice-{{ name }}">{{ name }}</label>
	</script>

	<script type="text/html" id="imageBarTemplate">
		<li>  
			<a title="{{ title }}" href="{{ url }}" data-bind="click: open" rel="prettyPhoto[reddit]" target="_blank">
				<img height="150" src="{{ thumbnail }}" onerror="$(this).parent().parent().remove()">
			</a>
		</li>
	</script>

	<script type="text/html" id="imageButtonsTemplate">
		<span>
			<a
				title="View comments" onclick="App.imageBar.activeImage().viewComment(); return false;" class="cufonize">
				<img src="images/fileTypes/comments.png" align="absmiddle" width="16" height="16">
				<span data-bind="visible: App.imageBar.overlayOpen()">View Comments</span>
			</a>
			<a title="View Original" 
				onclick="App.imageBar.activeImage().viewOriginal(); return false;" class="cufonize">
				<img src="images/fileTypes/image_link.png" align="absmiddle" width="16" height="16">
				<span data-bind="visible: App.imageBar.overlayOpen()">New Tab</span>
			</a>
			<a title="Copy Link To Clipboard" onclick="return false;" class="cufonize copyLink">
				<img src="images/fileTypes/link.png" align="absmiddle" width="16" height="16">
				<span data-bind="visible: App.imageBar.overlayOpen()">Copy</span>
			</a>
			<a title="Share on Facebook"
				onclick="App.imageBar.activeImage().shareOnFacebook(); return false;" class="cufonize">
				<img src="images/facebook.png" align="absmiddle" width="16" height="16">
				<span data-bind="visible: App.imageBar.overlayOpen()">Share</span>
			</a>
		</span>
	</script>