var track_id = 0;
var nav_leftmost_id = 0;
var nav_init_x = 37;
var content_init_x = 37;
var nav_btns;
var total_nav_btns;
var navMovement;
var contentMovement;
var img_path = 'imgs/';
var counterSite= 0;
var counterDIV= 0;
var ytPlayers = [];
var aPlayers = [];


/*|||||||||||||||||||||||||||||||||||||*/
/*|||||||||| MAKE SELECTION  ||||||||||*/
/*|||||||||||||||||||||||||||||||||||||*/
function selectTrack(tar) {
	switch(tar) {
		case $('content_l_arrow') : track_id = (track_id == 0) ? total_nav_btns - 1 : track_id - 1; break;
		case $('content_r_arrow') : track_id = (track_id == total_nav_btns - 1) ? 0 : track_id + 1; break;
		default: track_id = tar.n_id;
	}
	setNavBtnSelImg($('n'+track_id));
	moveNav($('n'+track_id));
	moveContent(track_id);
}

function setNavBtnSelImg(tar) {
	for(var i = 0; i < total_nav_btns; i++) {
		if(i == tar.n_id) tar.update(tar.sel);
		else {
			if(nav_btns[i].down().src != nav_btns[i].unsel.src) nav_btns[i].update(nav_btns[i].unsel);
		}
	}
}

/*|||||||||||||||||||||||||||||||||||||*/
/*||||||||||   MOVE STUFF    ||||||||||*/
/*|||||||||||||||||||||||||||||||||||||*/
function moveNav(tar) {
	var new_x;
	var new_id;
	var new_n;
	var curr_pos = $('nav_btns_box').positionedOffset();
	var curr_x = curr_pos[0];
	
	switch(tar) {
		case $('nav_l_arrow') : new_id = nav_leftmost_id - 6;
		break;
		case $('nav_r_arrow') : new_id = nav_leftmost_id + 6;
		break;
		default : new_id = tar.n_id;
	}
	
	if(new_id < -5) new_id = total_nav_btns - 6;
	else if(new_id < 0 && new_id >= -5) new_id = 0; //else if(new_id > 0 && new_id < 6) new_id = 0;
	else if(new_id > total_nav_btns - 6 && new_id <= total_nav_btns - 1) new_id = total_nav_btns - 6;
	else if(new_id > total_nav_btns - 1) new_id = 0;
	
	new_n = 'n' + new_id;
	nav_leftmost_id = new_id;
	var new_pos = $(new_n).positionedOffset();
	var new_x = new_pos[0];
	var left_edge = (0 - new_x) + nav_init_x;
	if(navMovement) navMovement.cancel();
	navMovement = new Effect.Move('nav_btns_box', { 
		x:left_edge, 
		y:0, 
		mode:'absolute', 
		duration:0.5, 
		transition:Effect.Transitions.sinoidal
	});
	setOpacity(nav_leftmost_id);
}



function moveContent(new_t_id) {
	var curr_pos = $('tracks_box').positionedOffset();
	var curr_x = curr_pos[0];
	var new_t = 't'+new_t_id;
	var new_pos = $(new_t).positionedOffset();
	var new_x = new_pos[0];
	var left_edge = (0 - new_x) + nav_init_x;
	if(contentMovement) contentMovement.cancel();
	contentMovement = new Effect.Move('tracks_box', { 
		x:left_edge, 
		y:0, 
		mode:'absolute', 
		duration:0.5, 
		transition:Effect.Transitions.sinoidal
	});
	for(var i = 0; i < ytPlayers.length; i++ ) {
		if(ytPlayers[i].obj.getPlayerState() == 1 || ytPlayers[i].obj.getPlayerState() == 3) ytPlayers[i].obj.pauseVideo();
	}
	for(var i = 0; i < aPlayers.length; i++ ) {
		//console.log( i+' playback state => '+aPlayers[i].ref.getPlaybackState() );
		if(aPlayers[i].ref.getPlaybackState() == "pause") aPlayers[i].ref.togglePlayback(true);
	}
}



function setOpacity(id) {
	for(var i = 0; i < total_nav_btns; i++) {
		var n = $('n'+i);
		var n_o = $(n).getOpacity(); //getStyle('opacity');
		var t = $('t'+i);
		var t_o = t.getOpacity();
		if(n.opacityTween) n.opacityTween.cancel();
		if(t.opacityTween) t.opacityTween.cancel();
// i is one of the 6 visible nav buttons	
		if( (i >= nav_leftmost_id) && (i <= (nav_leftmost_id+5)) ) {
			n.opacityTween = new Effect.Opacity(n, { from: n_o, to: 1.0, duration: 0.5 });
	// the selected track	
			if(i == track_id) t.opacityTween = new Effect.Opacity(t, { from: t_o, to: 1.0, duration: 0.5 });
	// 1 of the 6 visible nav buttons, but not the selected one
			else {
				t.opacityTween = new Effect.Opacity(t, { from: t_o, to: 0.4, duration: 0.5 });
				//addObserver(n);
			}
		}
// i is one of the out of range nav buttons		
		else {
	//i is not the selected track	
			if(i != track_id) {
				n.opacityTween = new Effect.Opacity(n, { from: n_o, to: 0.3, duration: 0.5 });
				t.opacityTween = new Effect.Opacity(t, { from: t_o, to: 0.4, duration: 0.5 });
				//removeObserver(n);
			}
		}
	}
}






/*|||||||||||||||||||||||||||||||||||||*/
/*||||||||||   ADD/REMOVE   ||||||||||*/
/*||||||||||   OBSERVERS    ||||||||||*/
/*|||||||||||||||||||||||||||||||||||||*/
function addObserver(tar) {
	switch($(tar)) {
		case $('nav_l_arrow') : $(tar).observe('click', function(event) { event.stop(); moveNav(this); });
		break;
		case $('nav_r_arrow') : $(tar).observe('click', function(event) { event.stop(); moveNav(this); });
		break;
		case $('content_l_arrow') : $(tar).observe('click', function(event) { event.stop(); selectTrack(this); });
		break;
		case $('content_r_arrow') : $(tar).observe('click', function(event) { event.stop(); selectTrack(this); });
		break;
		default :
			$(tar).observe('click', function(event) {
				event.stop();
				selectTrack(this);
				moveNav(this);
			});
	}
	$(tar).setStyle({cursor : 'pointer'});
}

function removeObserver(tar) {
	$(tar).stopObserving();
	$(tar).setStyle({cursor : 'auto'});
}




/*|||||||||||||||||||||||||||||||||||||*/
/*||||||||||   MOUSE WHEEL   ||||||||||*/
/*|||||||||||||||||||||||||||||||||||||*/
/*
* Orginal: http://adomas.org/javascript-mouse-wheel/
* prototype extension by "Frank Monnerjahn" themonnie @gmail.com
*/
Object.extend(Event, {
        wheel:function (event){
				event.stop();
                var delta = 0;
                if (!event) event = window.event;
                if (event.wheelDelta) {
                        delta = event.wheelDelta/120;
                        if (window.opera) delta = -delta;
                } else if (event.detail) { delta = -event.detail/3;     }
                return Math.round(delta); //Safari Round
        }
});
/*
* end of extension
*/
 

function handleSite(e) {
	//  counterSite +=  Event.wheel(e);
	// $('delta').innerHTML = counterSite +'#'+ Event.wheel(e) + ": " + (Event.wheel(e) <0 ? 'down' : 'up' );
}
function handleDIV(e) {
	counterDIV +=   0 - Event.wheel(e);
	if(counterDIV > total_nav_btns-1 ) counterDIV = 0;//total_nav_btns-1;
	else if(counterDIV < 0 ) counterDIV = total_nav_btns-1; //0;
	selectTrack($('n'+counterDIV));
}



/*|||||||||||||||||||||||||||||||||||||*/
/*||||||||||  YOUTUBE FUNCS  ||||||||||*/
/*|||||||||||||||||||||||||||||||||||||*/
function onYouTubePlayerReady(playerId) {
	var p = playerId;
	var n = p.slice(2);
	ytPlayers.push( {
		'obj': $('content-youtube_obj'+n),
		'pid': playerId,
		'id': n
	});
}

function onAudioPlayerReady(event) {
	aPlayers.push( {
		'id' : event.id,
		'ref' : event.ref
	});
}


/*|||||||||||||||||||||||||||||||||||||*/
/*||||||||||  DOCUMENT READY  ||||||||||*/
/*|||||||||||||||||||||||||||||||||||||*/
document.observe("dom:loaded", function() {
	nav_btns = $A($$('div.nav_btn'));
	total_nav_btns = nav_btns.length;
	nav_btns.each(function(n, i) {
		n.n_id = i;
		n.unsel = n.down();
		n.sel = new Image();
		n.sel.src = img_path+'nav/track'+i+'_sel.png';
		addObserver(n);
	});
	addObserver($('nav_l_arrow'));
	addObserver($('nav_r_arrow'));
	addObserver($('content_l_arrow'));
	addObserver($('content_r_arrow'));
	selectTrack($('n0'));
	Event.observe($('nav'), "mousewheel", handleDIV, false);
	Event.observe($('nav'), "DOMMouseScroll", handleDIV, false); // Firefox
	Event.observe($('content'), "mousewheel", handleDIV, false);
	Event.observe($('content'), "DOMMouseScroll", handleDIV, false); // Firefox
	document.observe('keydown', function(event) {
		event.stop();
		if 		(event.keyCode == Event.KEY_LEFT  || event.keyCode == Event.KEY_UP)    selectTrack( $('content_l_arrow') );
		else if (event.keyCode == Event.KEY_RIGHT || event.keyCode == Event.KEY_DOWN)  selectTrack( $('content_r_arrow') );
	});
	if( $('header_itunes') ) 	new Rollover('header_itunes');
	if( $('header_bh') ) 		new Rollover('header_bh');
	if( $('nav_l_arrow') ) 		new Rollover('nav_l_arrow');
	if( $('nav_r_arrow') ) 		new Rollover('nav_r_arrow');
	if( $('content_l_arrow') ) 	new Rollover('content_l_arrow');
	if( $('content_r_arrow') ) 	new Rollover('content_r_arrow');
	for(var i = 0; i < total_nav_btns; i++) {
		if( $('content-credits'+i) ) 	new Rollover('content-credits'+i);
		if( $('content-itunes'+i) ) 	new Rollover('content-itunes'+i);
		if( $('content-bh'+i) ) 		new Rollover('content-bh'+i);
		if( $('content-lyrics'+i) ) 	new Rollover('content-lyrics'+i);
		
	}
	if( $('footer-bhlinks') )	new Rollover('footer-bhlinks');
});