possan/spotify-tabtest.html

## spotify-tabtest.html
<html>
<head>
<link rel="stylesheet" href="sp://import/css/eve.css" />
<script src="jquery.min.js"></script>

<script>
$(document).ready(function() {
    sp = getSpotifyApi(1);
    var m = sp.require("sp://import/scripts/api/models");

    function updateContent(args) {
        console.log('internal navigation', args);
        $('#playlistdetail').hide();
        $('#start').hide();
        $('#playlists').hide();
        if (args[0] == "start") $("#start").show();
        if (args[0] == "playlists") {
            $("#playlists").show();
            if( args.length > 1 ) {
                $('#playlistdetail').show(); // bind playlist view.
                $('#playlistdetail').html('details for playlist: '+JSON.stringify(args));
            }
        }
    }

    $('div#playlists a[href]').click(function(event){
        console.log('click capture', event);
        event.preventDefault();
        var link = event.srcElement.getAttribute('href');
        console.log('cancelled link', link);
        var args = link.split(':');
        args = args.splice(3);
        updateContent(args);
    })

    function argumentsChanged() {
        console.log(m.application.arguments);
        var args = m.application.arguments;
        console.log('arguments changed', args);
        updateContent(args);
    }
    argumentsChanged();
    m.application.observe(m.EVENT.ARGUMENTSCHANGED, argumentsChanged);
});

</script>
</head>
<body>
<div id="start" class="section">Welcome</div>
<div id="playlists" class="section">
    My <a href="spotify:app:tabtest:playlists:spotify:user:_username_:playlist_uri1">playlist1</a>
    My <a href="spotify:app:tabtest:playlists:spotify:user:_username_:playlist_uri2">playlist2</a>
</div>
<div id="playlistdetail">
    Playlist detail view...
</div>
</body>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="sp://import/css/eve.css" />
	<script src="jquery.min.js"></script>

	<script>
	$(document).ready(function() {
	sp = getSpotifyApi(1);
	var m = sp.require("sp://import/scripts/api/models");

	function updateContent(args) {
	console.log('internal navigation', args);
	$('#playlistdetail').hide();
	$('#start').hide();
	$('#playlists').hide();
	if (args[0] == "start") $("#start").show();
	if (args[0] == "playlists") {
	$("#playlists").show();
	if( args.length > 1 ) {
	$('#playlistdetail').show(); // bind playlist view.
	$('#playlistdetail').html('details for playlist: '+JSON.stringify(args));
	}
	}
	}

	$('div#playlists a[href]').click(function(event){
	console.log('click capture', event);
	event.preventDefault();
	var link = event.srcElement.getAttribute('href');
	console.log('cancelled link', link);
	var args = link.split(':');
	args = args.splice(3);
	updateContent(args);
	})

	function argumentsChanged() {
	console.log(m.application.arguments);
	var args = m.application.arguments;
	console.log('arguments changed', args);
	updateContent(args);
	}
	argumentsChanged();
	m.application.observe(m.EVENT.ARGUMENTSCHANGED, argumentsChanged);
	});

	</script>
	</head>
	<body>
	<div id="start" class="section">Welcome</div>
	<div id="playlists" class="section">
	My <a href="spotify:app:tabtest:playlists:spotify:user:_username_:playlist_uri1">playlist1</a>
	My <a href="spotify:app:tabtest:playlists:spotify:user:_username_:playlist_uri2">playlist2</a>
	</div>
	<div id="playlistdetail">
	Playlist detail view...
	</div>
	</body>
	</html>