//var AUTOPLAY=true;
var TAB_PREFIX = "__";

$(document).ready(function(){
	/* SCROLLABLE PLAYLIST
	$("div.playlist-frame").scrollable({
		items:'div.playlist',
		vertical: true,
		next: 'a.down',
		prev: 'a.up'
	});
	*/

	window.scrollTo(0,0);
	translucent($('#home .box'), '#000', 0.2);

	//init_anim();
	init_player();
	$('ul#_menu').tabify(on_tab_change, TAB_PREFIX);
	init_photos();
	resize_photo(); $(window).resize(resize_photo);
	init_expanders();
});

//$(window).ready(init_anim);

/*
function init_anim(){
	// START ANIMATION
	$("#_player, #_status, #_playlist").css('opacity', '0.0');
	$("#_player").hide();

	// Load guitar image, then animate
	var img = new Image()
	$(img)
	.load(function(){
		$(this)
		.insertAfter("#_menu")
		.show()
		.css('position', 'absolute')  // relative to #_main2
		.css('top', $("#_player").position().top + 50)
		.css('left', document.width - $("#_player").offset().left)  // doc's right edge
		.animate({
			//left: $("#_player").position().left
			left: 0
		}, 2000, 'swing', init_player);
	})
	.error(function(){
		console.warn("Error loading guitar image");
	})
	.attr('id', "anim")
	.attr('src', "/media/site/tex-transparent.png");
}
*/



var player_pos={};

function init_player(){
	/*
	// FINISH ANIMATION
	$("#_player").css({opacity: 1}).show();
	$("#_status, #_playlist").animate({opacity: 1}, 1000);
	$("#_anim").hide();
	*/

	var frame=$("#_player-frame"),
	   	pos=frame.position();
	player_pos = {
		position: 'absolute',
		left: pos.left,
		top: pos.top
	};
	frame.css(player_pos);
	$("#_show_video").click(function(){
		window.location.replace('#tracks');
	});

	// INIT PLAYER
	$f("_player", "/media/flowplayer/flowplayer-3.1.5.swf", {
		clip: {
			baseUrl: '/media',
			onStart: start_track,
			autoPlay: false,
			scaling: 'orig'
		},
		plugins: {
			audio: {
				url: 'flowplayer.audio-3.1.2.swf'
			},
			controls: {
				//playlist: true,  // Prev/Next buttons
				//url: 'flowplayer.controls-tube-3.1.3.swf',
				//fullscreen: false,

				sliderGradient: 'none',
				progressGradient: 'medium',
				backgroundGradient: 'low',
				tooltipColor: '#003300',
				tooltipTextColor: '#ffffff',
				buttonOverColor: '#728B94',
				borderRadius: '0',
				timeColor: '#999999',
				sliderColor: '#000000',
				volumeSliderColor: '#000000',
				timeBgColor: '#000000',
				durationColor: '#ffffff',
				progressColor: '#112233',
				bufferGradient: 'none',
				volumeSliderGradient: 'none',
				buttonColor: '#000000',
				bufferColor: '#445566',
				backgroundColor: '#000044',
				//backgroundColor: '#aedaff',
				height: 24,
				opacity: 1.0
			}
		}
	}).playlist("div.playlist", { loop: true });

	// Autoplay (workaround playlist highlight glitch)
	try {
		if (AUTOPLAY) $("#_playlist > a:eq(0)").click();
	}
	catch (ReferenceError) {
	}
}


function on_tab_change(hash){
	// Move audio/video player in/out of Songs tab
	//var p=$(hash+" .playlist");
	var p=$(".playlist:visible");
	if (p.length && $("#"+TAB_PREFIX+"tracks:visible").length){
		$("#_player-frame").css({
			left:	p.offset().left + p.width() + 20,
			top:	p.offset().top
		});
		$("#_player").width(640).height(480+24);  // was 640 x 360+24
	} else {
		$("#_player-frame").css(player_pos);
		$("#_player").width(400).height(24);
	}
	update_video_button();
	//scroll_thumbs(0);
}
function update_video_button(song){
	if (!song) song=$f().getClip();
	if (song && song.type=='video' && $("#"+TAB_PREFIX+"tracks:visible").length==0)
		$("#_show_video").show();
	else
		$("#_show_video").hide();
}

function start_track(song) {
	update_video_button(song);
	
	$("#_status").animate({opacity:1.0}, 500, function(){
		$("#_status").html("Now playing <i>" + $("#_playlist a.playing .f_title").text() + "</i>");
		//$("#_status").html("Now playing <i>" + song.metaData.TIT2 + "</i>");
	});
}



// PHOTO GALLERY
function basename(path){return path.slice(path.lastIndexOf('/')+1);}
function dirname(path){return path.slice(0,path.lastIndexOf('/')+1);}

function show_if(elements, cond){
	if(cond) elements.show();
	else elements.hide();
}

//var thumb_step=6, thumb_top=0;

function init_photos(){
	var thumbs = $(".thumb");
	thumbs.mouseenter(function(){
		var frame = $(this).parent().parent().find(".photo-frame"),
	   		a = frame.find("img")[0],
			b = $(this).find("img")[0],
			path = dirname(a.src),
			fn = basename(b.src);
		a.src = path+fn;
		frame.find(".caption").html($(this).find(".caption").html());
	});

	$(".prev_thumb, .next_thumb").hide();  // Scrolling disabled XXX
	/*
	scroll_thumbs(0);
	$(".prev_thumb").click(function(){scroll_thumbs(-thumb_step); return false;});
	$(".next_thumb").click(function(){scroll_thumbs(thumb_step); return false;});
	*/
}
/*
function scroll_thumbs(n){
	var thumbs = $(".thumbs:visible .thumb");
	if (thumb_top+n >= 0 && thumb_top+thumb_step+n < thumbs.length) {
		thumb_top+=n;
		thumbs.hide().slice(thumb_top,thumb_top+thumb_step).show()
	}
	show_if($(".prev_thumb:visible"), (thumb_top > 0));
	show_if($(".next_thumb:visible"), (thumb_top+thumb_step < thumbs.length));
}
*/
function resize_photo(){	// XXX EXPERIMENTAL - works better
	var aw=window.innerWidth-200, ah=window.innerHeight-40,  // avail
		mw=800, mh=600,     // max
		rw=aw/mw, rh=ah/mh; // ratios
	if(aw<400) aw=400; if(ah<300) ah=300;  // min
	//console.info("Photo: "+aw+"x"+ah+" available area");
	if (rw>1 && rh>1){
		$(".photo-frame img").width('').height('');
	} else {
		if (rw<rh)
			$(".photo-frame img").width(aw).height('');
		else
			//$(".photo-frame img").width('').height(ah);
			$(".photo-frame img").width(ah*mw/mh);
	}
}


//TODO generalize. Options: (elements, initial=2, animate=0)
function init_expanders(){
	var initial=2,
	   	more="More...",
		less="Less...";
	$(".shows").each(function(){
		var extras = $(this).find(".show:gt("+ initial +")");
		if (extras.length){
			extras.hide();
			$(this).find(".show:last")
			.after("<a class=more href='#'>"+ more +"</a>");
		}
	});
	$(".more").click(function(){
		var extras = $(this).parent().find(".show:gt("+ initial +")");
		if (extras.filter(":hidden").length) {
			//extras.slideDown();  // ugly w/ table rows
			extras.show();
			$(this).text(less);
		} else {
			//extras.slideUp();
			extras.hide();
			$(this).text(more);
		}
		return false;
	});
}


//TODO jqueryize (object method, return self)
function translucent(els, color, opacity){
	els.each(function(){
		var e = $(this).find('div:first');
		e.before('<div style="background-color:'+color+'; opacity:'+opacity+'"></div>');
		e.prev().css({
			'position': 'absolute',
			'width': e.width(), 'height': e.height()
		});
		e.css({
			'position': 'absolute',
		});
		$(this).css({ 'width': e.width(), 'height': e.height() });
	});
}