var MuxtapePlaylist = new Class({
	initialize: function() {
		this.strips = [];

		$$('#strips > li').each(function(li) {
			var strip = new MuxtapeStrip(li,this);
			this.strips.push(strip);
		},this);
	},
	playNext: function(just_ended_strip) {
		var n = this.strips.indexOf(just_ended_strip) + 1;
		if (n < this.strips.length) {
			this.strips[n].play();
		} else {
			this.strips[n - 1].stop(); //firefox, why must you suck?
		}
	}
});

var MuxtapeStrip = new Class({
	initialize: function(block,playlist) {
		this.playlist = playlist;		
		this.block = block;
		this.audio = this.block.getElement('audio');		
		this.clock = this.block.getElement('.clock');
		this.shouldBePlaying = false;
		this.active = false;
		
		this.block.addEvent('mousedown',this.toggle.bind(this));
		
		if (navigator.appVersion.indexOf('iPhone OS ') < 0 && navigator.appVersion.indexOf('iPad') < 0) {
			this.block.addEvent('mouseover', function(e) {
				this.block.addClass('hover');
			}.bind(this));
			this.block.addEvent('mouseout', function(e) {
				if (!this.active) {
					this.block.removeClass('hover');
				}
			}.bind(this));
		}
		
		this.addAudioEvents();
	},
	toggle: function() {
		if (this.shouldBePlaying) {
			this.pause();
		} else {
			this.play();
		}
	},
	play: function() {
		if(!(this.audio.currentTime > 0)) {
			this.clock.set('html','&hellip;');
		}		
		this.playlist.strips.each(function(s) {
			if(s.block.id != this.block.id) {
				s.stop();
			}
		},this);
		this.shouldBePlaying = true;
		this.active = true;
		this.block.addClass('hover');		
		this.audio.play();
	},
	pause: function() {
		this.shouldBePlaying = false;
		this.audio.pause();
	},
	stop: function() {
		this.pause();
		this.active = false;
		this.block.removeClass('hover');
		this.clock.set('html','');		
		try {
			this.audio.currentTime = 0;
		} catch(e) {}
	},
	setClock: function(seconds) {
		var string;
		seconds = Math.floor(seconds);
		if($type(seconds) == 'number') {
			var sec = seconds % 60;
			var min = (seconds - sec) / 60;
			var min_formatted = min < 10 ? min : '0' + min;
			var sec_formatted = sec < 10 ? '0' + sec : sec;
			string = min_formatted + ':' + sec_formatted;
		} else {
			string = seconds.toString();
		}
		if(this.shouldBePlaying) {
			this.clock.set('html',string);
		}
	},
	//HTMLMediaElement callbacks
	addAudioEvents: function() {
		//this.audio.addEventListener('abort',this.event_abort.bind(this),false);
		//this.audio.addEventListener('canplay',this.event_canplay.bind(this),false);
		//this.audio.addEventListener('canplaythrough',this.event_canplaythrough.bind(this),false);
		//this.audio.addEventListener('durationchange',this.event_durationchange.bind(this),false);
		//this.audio.addEventListener('emptied',this.event_emptied.bind(this),false);
		this.audio.addEventListener('ended',this.event_ended.bind(this),false);
		this.audio.addEventListener('error',this.event_error.bind(this),false);
		//this.audio.addEventListener('load',this.event_load.bind(this),false);
		//this.audio.addEventListener('loadeddata',this.event_loadeddata.bind(this),false);
		//this.audio.addEventListener('loadedmetadata',this.event_loadedmetadata.bind(this),false);
		//this.audio.addEventListener('loadstart',this.event_loadstart.bind(this),false);
		this.audio.addEventListener('pause',this.event_pause.bind(this),false);
		//this.audio.addEventListener('play',this.event_play.bind(this),false);
		//this.audio.addEventListener('playing',this.event_playing.bind(this),false);
		//this.audio.addEventListener('progress',this.event_progress.bind(this),false);
		//this.audio.addEventListener('ratechange',this.event_ratechange.bind(this),false);
		//this.audio.addEventListener('seeked',this.event_seeked.bind(this),false);
		//this.audio.addEventListener('seeking',this.event_seeking.bind(this),false);
		this.audio.addEventListener('stalled',this.event_stalled.bind(this),false);
		//this.audio.addEventListener('suspend',this.event_suspend.bind(this),false);
		this.audio.addEventListener('timeupdate',this.event_timeupdate.bind(this),false);
		//this.audio.addEventListener('volumechange',this.event_volumechange.bind(this),false);
		//this.audio.addEventListener('waiting',this.event_waiting.bind(this),false);		
	},
	event_abort: function() {
		//console.log('abort / ' + this.playlist.strips.indexOf(this));
	},
	event_canplay: function() {
	},
	event_canplaythrough: function() {
	},
	event_durationchange: function() {
	},
	event_emptied: function() {
		//console.log('emptied / ' + this.playlist.strips.indexOf(this));
	},
	event_ended: function() {
		this.stop();
		this.playlist.playNext(this);
	},	
	event_error: function() {
		var msg;
		switch(this.audio.error.code) {
			case 1: msg = 'MEDIA_ERR_ABORTED'; break;
			case 2: msg = 'MEDIA_ERR_NETWORK'; break;
			case 3: msg = 'MEDIA_ERR_DECODE'; break;
			case 4: msg = 'MEDIA_ERR_SRC_NOT_SUPPORTED'; break;				
			default: msg = '';
		}
		//console.log('error',this.audio,msg);
	},
	event_load: function() {
		//console.log('load / ' + this.playlist.strips.indexOf(this));
		// if(this.shouldBePlaying) {
		// 	this.audio.play();
		// }
	},
	event_loadeddata: function() {
	},
	event_loadedmetadata: function() {
	},
	event_loadstart: function() {
	},
	event_pause: function() {
		if(this.shouldBePlaying) {
			this.stop();
		}
	},
	event_play: function() {
	},
	event_playing: function() {
	},
	event_progress: function() {
	},
	event_ratechange: function() {
	},
	event_seeked: function() {
	},
	event_seeking: function() {
	},
	event_stalled: function() {
		//console.log('stalled / ' + this.playlist.strips.indexOf(this));
		if (Browser.Engine.webkit && navigator.appVersion.indexOf('iPhone OS ') < 0 && navigator.appVersion.indexOf('iPad') < 0) {
			this.stop();
			this.audio.load();
		}
	},
	event_suspend: function() {
		//console.log('suspend /' + this.playlist.strips.indexOf(this) + '/ ' + this.audio.networkState);
	},
	event_timeupdate: function() {
		this.setClock(this.audio.currentTime);
	},
	event_volumechange: function() {
	},
	event_waiting: function() {
		//console.log('waiting / ' + this.playlist.strips.indexOf(this));
	}	
});

function layoutSubviewsForApple() {
	$(document.body).setStyle('visibility','hidden');
	
	var w = $(window).getSize().x;
	var h = $(window).getSize().y;

	if (w == 1024) {
		document.body.ontouchmove = function(e) { e.preventDefault(); }
		$('muxtape').setStyle('width',w);
		$('muxtape').setStyle('height',h);
		$('picture').setStyle('width',h);
		$('picture').setStyle('height',h);		
		$('cover').setStyle('width',h);		
		$('cover').setStyle('height',h);
		$('column').setStyle('width',w - h);
		
		$('strips').setStyle('float','');
		$('strips').setStyle('width','');		
		$('cabinet').setStyle('float','');
		$('cabinet').setStyle('width','');		
	}
	if (w == 768) {
		document.body.ontouchmove = null;
		$('muxtape').setStyle('width',w);
		$('muxtape').setStyle('height',1042);
		$('picture').setStyle('width',w);
		$('picture').setStyle('height',w);		
		$('cover').setStyle('width',w);		
		$('cover').setStyle('height',w);
		$('column').setStyle('width',w);
		
		$('strips').setStyle('float','left');
		$('strips').setStyle('width',384);		
		$('cabinet').setStyle('float','left');
		$('cabinet').setStyle('width',384);
	}
	if (w == 480) {
		document.body.ontouchmove = null;
		$('muxtape').setStyle('width',w);
		$('muxtape').setStyle('height',1035);
		$('picture').setStyle('width',w);
		$('picture').setStyle('height',w);		
		$('cover').setStyle('width',w);		
		$('cover').setStyle('height',w);		
		$('column').setStyle('width',w);
	}
	if (w == 320) {
		document.body.ontouchmove = null;
		$('muxtape').setStyle('width',w);
		$('muxtape').setStyle('height',879);
		$('picture').setStyle('width',w);
		$('picture').setStyle('height',w);
		$('cover').setStyle('width',w);
		$('cover').setStyle('height',w);		
		$('column').setStyle('width',w);
	}
	
	$(document.body).setStyle('visibility','visible');
}

function layoutSubviewsForBrowser() {
	$(document.body).setStyle('visibility','hidden');	
	
	var w = $(window).getSize().x;
	var h = $(window).getSize().y;
	
	if (w > 1024 && h > 690) {
		var left = Math.floor( (w - $('muxtape').getSize().x) / 2 );
		var top	 = Math.floor( (h - $('muxtape').getSize().y) / 2 );
		$('muxtape').setStyle('margin-left',left);
		$('muxtape').setStyle('margin-top',top);
		$('shadow').setStyle('margin-left',left - 25);
		$('shadow').setStyle('margin-top',top - 22);
		$('shadow').setStyle('display','block');		
	} else {
		var left = Math.floor( (w - $('muxtape').getSize().x) / 2 );
		$('muxtape').setStyle('margin-left',left);
		$('muxtape').setStyle('margin-top',0);
		$('shadow').setStyle('display','none');	
	}
	
	$(document.body).setStyle('visibility','visible');	
}

function regularInit() {
	var shadow = new Element('img',{
		'id':'shadow',
		'src':'shadow.png',
		styles: {
			'position':'absolute',
			'top':0,
			'left':0,
			'width':1074,
			'height':740
		}
	});
	$(document.body).adopt(shadow);
	window.addEvent('load',layoutSubviewsForBrowser);
	window.addEvent('resize',function() {
		layoutSubviewsForBrowser();
		if (Browser.Engine.gecko) {
			setTimeout(layoutSubviewsForBrowser,100);
		}
	});
	$('mx').setStyle('position','fixed');
	$('mx').setStyle('bottom',7);
	$('mx').setStyle('right',10);	
	$('mx').setStyle('opacity',0.5);	
}

function frameInit(width) {
	window.addEvent('load',layoutLiquid.pass(width));
}

function layoutLiquid(w) {
	$(document.body).setStyle('visibility','hidden');
	
	var ratio = 1.6;
	var h = Math.floor(w/ratio);
	
	$('muxtape').setStyle('width',w);
	$('muxtape').setStyle('height',h);
	$('picture').setStyle('width',h);
	$('picture').setStyle('height',h);		
	$('cover').setStyle('width',h);		
	$('cover').setStyle('height',h);
	$('column').setStyle('width',w - h);
	
	
	
	
	
	var growth = 1024 / w;
	
	var lh = Math.floor(54 / (growth * 0.8));
	var fs = Math.floor(17 / (growth * 0.6));
	fs = fs < 10 ? 10 : fs;
	fs = fs > 17 ? 17 : fs;
	var sp = Math.floor(16 / growth);
	
	$$('#strips > li').setStyle('line-height',lh);
	$$('#strips > li').setStyle('font-size',fs);
	$$('#strips > li').setStyle('padding','0 '+sp+'px');

	$('cabinet').setStyle('padding-top','14px');	
	$('itunes').setStyle('margin-top','0px');
	$('mx').setStyle('margin-top','6px');	
	$$('#itunes img').setStyle('width','80px');
	
	try {
		$('youtube').destroy();
	} catch(e) {}
	
	
	
	
	$(document.body).setStyle('visibility','visible');
}

if (navigator.appVersion.indexOf('iPhone OS ') < 0 && navigator.appVersion.indexOf('iPad') < 0) {
	var width = 0;
	var params = window.location.search.substring(1).split('&');
	for (var i = 0; i < params.length; i++) {
		var comps = params[i].split('=');
		if (comps[0] == 'width')
			width = parseInt(comps[1]);
	}
	if (width) {
		frameInit(width);
	} else {
		regularInit();
	}
} else {
	document.title = "AMP";
	window.addEventListener('load',layoutSubviewsForApple);	
	window.addEventListener('orientationchange',layoutSubviewsForApple);
}

new MuxtapePlaylist();