<!-- live demo (in finnish) http://www.kopteri.net/koti/aatu.hieta/index.html -->
<!DOCTYPE html>
<html> 
	<head> 
	<title>Kopteri RSS</title> 
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
	<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
	<script>
		var rssurl = "feeds.xml";
		var $feeds = {};
		
		var markup = "<li><a name=\"${a}\" href=\"#feedinfo?id=${a}\"><img src=\"${img}\" /><h2>${title}</h2> ${description}</li></a>";
		$(document).ready(getFeeds());
		function getFeeds() {
			$.ajax({
			  url: rssurl,
			  success: showFeeds
			});
		}
		function showFeeds( data ) {
			$("#feeds").html("");
			$("#feeds").listview();
			$feeds = $(data).find("item"),
                keys = ["title", "link", "description", "guid", "img", "link"];
            	var i = 0;
            $feeds.each(function (idx, elem) {
                var $this = $(this),
                    data = {};
                    data["a"] = i;
                keys.forEach(function (key) {
                    data[key] = $this.find(key).text();
                });
                $feeds[i] = data;
                i++;
				$.tmpl( markup, data )
					.appendTo( "#feeds" );
            });
            $("#feeds").listview("refresh");
            //(c) by taatudi
		}
		$(document).bind( "pagebeforechange", function( e, data ) {
			if ( typeof data.toPage === "string" ) {
				getFeeds();
				var u = $.mobile.path.parseUrl( data.toPage ),
					re = /^#feedinfo/;
				if ( u.hash.search(re) !== -1 ) {
					showFeed( u, data.options );
					e.preventDefault();
				}
			}
		});
		function showFeed( urlObj, options )
		{
			var guid = urlObj.hash.replace( /.*id=/, "" ),
				feed = $feeds[guid],
				pageSelector = urlObj.hash.replace( /\?.*$/, "" );
			if ( feed ) {
				var $page = $( pageSelector ),
					$header = $page.children( ":jqmData(role=header)" ),
					$content = $page.children( ":jqmData(role=content)" ),
					markup = "<p>" + feed["description"] + "</p>";
				$("#readmore").attr("href", feed['link']);
				$header.find( "h1" ).html( feed["title"] );
				$content.html( markup );
				$page.page();
				options.dataUrl = urlObj.href;
				$.mobile.changePage( $page, options );
			}
		}
		function back() {
			var $page = $( '#mainpage' );
			$page.page();
			$.mobile.changePage( $page );
		}
		</script>
	</head> 
	<body> 
		<div id="mainpage" data-role="page" data-theme="a">

			<div class="header" data-role="header" style="max-height:64px;">
				<h1>Kopteri RSS</h1>
			</div><!-- /header -->
			<div data-role="content">
				<ul id="feeds" data-role="listview" data-inset="true" data-filter="false"></ul>	
			</div><!-- /content -->

		</div><!-- /page -->
		<div id="feedinfo" data-role="page" data-theme="a">
			<div data-role="header"><h1></h1></div>
			<a href="./index.html" onclick="back();"  data-role="button" data-icon="back">Takaisin</a>
			<div data-role="content"></div>
			<a id="readmore" data-role="button" >Lue lisää</a>
		</div>
	</body>
</html>