/**
 * The 360radio jQuery tools library
 * 
 * contains: 
 *   accordion menu
 *   server synchronized clock
 *   image rotation
 *   now playing
 *
 *
 * @package 360radio
 * @subpackage 360radio
 * @since 360radio v01.0
 */

/* ----- create left menu as accordion menu (jQuery) ----- */
function initLeftMenu() {
	$('ul#menu-left-menu li ul').hide();
	
	/* do not show any submenu 
	 * $('ul#menu-left-menu li ul:first').show(); 
	 */

	$('ul#menu-left-menu > li > a').hover(function() 
	{
		var checkElement = $(this).next();
		var parent = $(this).parent('li');
		
		parent.mouseleave(function() {
			checkElement.slideUp('normal');
		});
		
		if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
			// checkElement.slideUp('normal');
			return false;
		}
		
		if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
			$('ul#menu-left-menu li ul:visible').slideUp('normal');
			checkElement.slideDown('normal');
			
			return false;
		}
	});
}

/* ----- image rotator (jQuery) ----- */
function imageRotator() {
	//Set the opacity of all images to 0
	$('div#header_banner ul li').css({opacity: 0.0});
	
	//Get the first image and display it (gets set to full opacity)
	$('div#header_banner ul li:first').css({opacity: 1.0});
		
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('rotate()',5000);	
}

function rotate() {	
	//Get the first image
	var current = ($('div#header_banner ul li.show')?  $('div#header_banner ul li.show') : $('div#header_banner ul li:first'));

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#header_banner ul li:first') :current.next()) : $('div#header_banner ul li:first'));	
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
};

/* ----- now playing display (jQuery/Ajax) ----- */
// calculate the width of the text in the defined element
$.fn.textWidth = function(){
  	var html_org = $(this).html();
  	var html_calc = '<span>' + html_org + '</span>'
  	$(this).html(html_calc);
  	var width = $(this).find('span:first').width();
  	$(this).html(html_org);
  	return width;
};

// get current absolute position modify left to make text move in and call the corresponding functions
function nowPlayingLoop(page_url) {
	var position = $("p#now_playing_text").offset();
	var top = position.top;
	var left = position.left;
	var box_width = $("div#now_playing_box").width();
	
	moveText(page_url, top, left, box_width);
}

function moveText(page_url, top, left, box_width) {
	getText(page_url);
	$("p#now_playing_text").offset({top: top, left: left + box_width});
	
	// get the text width to know when to stop scrolling
	var text_width = $("p#now_playing_text").textWidth();
	// the number of pixels to scroll until the complete text passed through the box
	var length = text_width + box_width; 
	var time = length * 30;
	
	$("p#now_playing_text").animate({
            "left": '-=' + length
        }, time, "linear", function() {
			moveText(page_url, top, left, box_width);
		});						
}

function getText(page_url) {
	$.ajax({
		url : page_url, 
		cache : false,
		dataType : "text",
		success : function (data) {
			$("p#now_playing_text").html(data);
		}, 
		error : function(request, status, error) {
			// alert(request.responseText);
		}
	});
}



/* ----- clock display (jQuery) ----- */
var weekday = ["lunes", "martes", "miercoles", "jueves", "viernes", "sabado", "domingo"];

function serverClock(container, serverTime) {
	this.container = document.getElementById(container);
	this.time = new Date(serverTime);	
	this.setDisplay();
	this.updateTime();
}

serverClock.prototype.setDisplay = function() {
	var time = this.time;
	var wday = time.getDay();
	var day = time.getDate();
	var month = time.getMonth();
	var year = time.getFullYear();
	var hour = time.getHours();
	var min = time.getMinutes();
	var sec = time.getSeconds();
	
	(hour < 10) ? (hour = '0' + hour) : hour; 
	(min < 10) ? (min = '0' + min) : min; 
	(sec < 10) ? (sec = '0' + sec) : sec; 

	// this.container.innerHTML = weekday[wday] + " " + day + "." + month + "." + year + " " + hour + ":" + min + ":" + sec;
	this.container.innerHTML = day + "." + month + "." + year + " - " + hour + ":" + min + ":" + sec;
}

serverClock.prototype.updateTime = function() {
	var clock = this;
	this.time.setSeconds(this.time.getSeconds() + 1);
	this.setDisplay();
	setTimeout(function(){ clock.updateTime() }, 1000)
}

/* xspf player popup */
function xspf_popup(title, width, height, player_url, skin_url, load_url, play_url) {
	var left = (screen.width / 2) - (width / 2);
	var top = (screen.height / 2) - (height / 2);
	var window_width = width + 10;
	var window_height = height + 10;
	
	var xspfWin = window.open('', title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + window_width + ', height=' + window_height + ', top=' + top + ', left=' + left);
	
	// construct the window
	xspfWin.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">');
	xspfWin.document.write('<html>');
	xspfWin.document.write('<body>');
	xspfWin.document.write('<div id="the_content">');
	xspfWin.document.write('<object width="' + width + '" height="' + height + '" class="flashmovie" id="fm_xspf_jukebox_2107884672" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">');
	xspfWin.document.write('<param value="' + player_url +'" name="movie">');
	xspfWin.document.write('<param value="skin_url=' + skin_url + '&amp;loadurl=' + load_url + '&amp;' + play_url + '" name="flashvars">');
	xspfWin.document.write('<param value="transparent" name="wmode"><!--[if !IE]>-->');
	xspfWin.document.write('<object width="' + width + '" height="' + height + '" name="fm_xspf_jukebox_2107884672" data="' + player_url + '" type="application/x-shockwave-flash">');
	xspfWin.document.write('<param value="skin_url=' + skin_url + '&amp;loadurl=' + load_url + '&amp;' + play_url + '" name="flashvars">');
	xspfWin.document.write('<param value="transparent" name="wmode">');
	xspfWin.document.write('<!--<![endif]--><!--[if !IE]>--></object><!--<![endif]-->');
	xspfWin.document.write('</object>');
	xspfWin.document.write('</div>');
	xspfWin.document.write('</body>');
	xspfWin.document.write('</html>');
	xspfWin.document.close();
	xspfWin.focus();
}

/* ----- execute methods after page is loaded (jQuery) ----- */
$(document).ready(function() {
	//Load the slideshow
	imageRotator();
	initLeftMenu();
});