Bringing on

public/javascripts/ajax.js

@@ -0,0 +1,13 @@
+$(function(){
+	$('a.data').live('click', function(){
+		var button = this;
+		$.get(this.href, function(data){
+			data = eval('('+ data +')');
+			if ($(button).hasClass('artist')) {
+				Pages.renderArtist(data);
+			}
+		})
+		return false;
+	});
+	$('a.data').trigger('click');
+})

public/javascripts/audio.js

@@ -0,0 +1,51 @@
+var Audio = {
+	
+	audio: null,
+	tid: null,
+	
+	init: function() {
+		this.audio = document.getElementById('a');
+	},
+	
+	play: function() {
+		this.audio.play();
+	},
+	
+	pause: function() {
+		this.audio.pause();
+	},
+	
+	setTrack: function(url) {
+		this.audio.setAttribute('src', url);
+	},
+	
+	getLoadedPercent: function() {
+		try {
+			return Audio.audio.buffered.end(0) / Audio.audio.duration;
+		} catch(e) {}
+		return 0;
+	},
+	
+	getPlayedPercent: function() {
+		try {
+			return Audio.audio.currentTime / Audio.audio.duration;
+		} catch(e) {}
+		return 0;
+	},
+	
+	setPlayedPercent: function(val) {
+		if (typeof(this.audio.duration) != undefined) {
+			this.audio.currentTime = Math.round(val * this.audio.duration / 100);
+			return true;
+		}
+		return false;
+	},
+	
+	startListener: function() {
+		Audio.tid = window.setTimeout(Audio.startListener, 100);
+		Player.updateUI(
+			Audio.getLoadedPercent(),
+			Audio.getPlayedPercent()
+		);
+	}
+}

public/javascripts/layout.js

@@ -0,0 +1,19 @@
+$(function(){
+	beathaven.init();
+	$(window).resize(beathaven.adjustSizes)
+})
+var beathaven = {
+	
+	init: function () {
+		this.drawInterface();
+		this.adjustSizes();
+	},
+	drawInterface: function() {
+	},
+	adjustSizes: function() {
+		$('#data-container').height($(window).height() - $('#header-container').height());
+		$('#player-container').height($(window).height());
+		$('#playlist').height($(window).height() - $('#player').height());
+		
+	}
+}

public/javascripts/pages.js

@@ -0,0 +1,79 @@
+var Pages = {
+	
+	renderArtist: function(data){
+		var artist_info = $('\
+		<div class="artist-info">\
+			<div class="pic">\
+				<img src="'+ data.artist.pic +'" alt="'+ data.artist.name +'" width="250" />\
+			</div>\
+			<h1 class="name">'+ data.artist.name +'</h1>\
+			<div class="info">\
+				'+ data.artist.desc +'\
+			</div>\
+		</div>\
+		');
+		
+		var albums_info = $('<div class="albums"></div>');
+		$.each(data.albums, function(i, album){
+			var album_info = $('\
+			<div class="album">\
+				<h2 class="name">'+ album.name +' ('+ album.year +')</h2>\
+				<div class="pic">\
+					<img src="'+ album.pic +'" alt="'+ album.name +' by '+ data.artist.name +'" width="250" />\
+					<div class="add-album">Add to playlist</div>\
+				</div>\
+				<div class="tracklist">\
+					<ul>\
+					</ul>\
+				</div>\
+			</div>\
+			');
+			
+			$.each(album.tracks.album, function(i, track){
+				var track_info = $('\
+				<li>\
+					<span class="index">'+ (i+1) +'</span>\
+					<div class="trackname">'+ track.name +'</div>\
+					<div class="length">'+ track.duration +'</div>\
+				</li>\
+				');
+				
+				$(album_info).find('.tracklist ul').append(track_info);
+			});
+			
+			$(albums_info).append(album_info);
+		})
+		
+		$('#data-container').html('').append(artist_info).append(albums_info);
+	}
+}
+
+/*
+
+<div class="albums">
+	<div class="album">
+		<h2 class="name">Get Born</h2>
+		<div class="pic">
+			<img src="pics/getborn.jpg" alt="Get Born by Jet" width="250" />
+			<div class="add-album">Add to playlist</div>
+		</div>
+		<div class="tracklist">
+			<ul>
+				<li>
+					<div class="trackname">Last Chance</div>
+					<div class="length">1:52</div>
+				</li>
+				<li>
+					<div class="trackname">Are You Gonna Be My Girl</div>
+					<div class="length">3:34</div>
+				</li>
+				<li>
+					<div class="trackname">Rollover DJ</div>
+					<div class="length">3:17</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+</div>
+
+*/

public/javascripts/player.js

@@ -0,0 +1,59 @@
+var Player = {
+	
+	bar_width: 290,
+	
+	getTrackUrl: function(data) {
+		
+	},
+	
+	addTrack: function(artist, track, length) {
+		$('.playlist-tracks').append('\
+		<li id="i'+ Math.round(Math.random() * 999999) +'">\
+			<div class="item">\
+				<span class="title">'+ artist +' &mdash; '+ track +'</span>\
+				<span class="duration">'+ length +'</span>\
+			</div>\
+		</li>\
+		');
+	},
+	
+	setTrack: function(obj) {
+		var id = $(obj).attr('id');
+		var query = $(obj).find('.title').html();
+		var length = $(obj).find('.duration').html();
+		
+		$('#player .now-playing').html(query);
+		$('.playlist-tracks li').removeClass('now');
+		$('#'+ id).addClass('now');
+		
+		loadTracksData(query, this.playSource);
+	},
+	
+	playSource: function(url) {
+		Audio.setTrack(url);
+		Audio.play();
+		Audio.startListener();
+	},
+	
+	updateUI: function(buffered, played) {
+		$('#player .loaded').width(Math.round(buffered * this.bar_width));
+		$('#player .played').width(Math.round(played * this.bar_width));
+	}
+}
+
+$('.add-album').live('click', function() {
+	var artist = $(this).parent().parent().parent().parent().find('.artist-info .name').html();
+	$(this).parent().parent().find('.tracklist li').each(function(i, item){
+		var track_name = $(item).find('.trackname').html();
+		var length = $(item).find('.length').html();
+		Player.addTrack(artist, track_name, length);
+	});
+})
+
+$('.playlist-tracks li').live('dblclick', function(){
+	Player.setTrack(this);
+})
+
+$(function(){
+	Audio.init();
+})

public/javascripts/vkontakte.js

@@ -0,0 +1,12 @@
+$(function(){
+	VK.init({
+		apiId: 2335068,
+		nameTransportPath: "/demo/xd_receiver.html"
+	});
+})
+
+function loadTracksData(query, callback) {
+	VK.Api.call('audio.search', {q:query}, function(r){
+		callback(r.response[1].url);
+	})
+}