function debug(string) {
  $('#serv-debug').append(string+'<br />');
	if (typeof console == "object") {
		console.log(string);
	}
}

/**
 * Event propagation canceling
 */
//stop event propagation
function stopBubble(e) {
  //If an event object exists this is a non-IE browser
  if (e && e.stopPropagation) 
    e.stopPropagation();
  //else we are dealing with IE
  else
    window.event.cancelBubble = true;
}

//stop default action from occuring
function stopDefault(e) {
  //Prevent the default browser action (W3C)
  if (e && e.preventDefault)
    e.preventDefault();
  //A shortcut for stopping the browser action in IE
  else
    window.event.returnValue = false;
}

function stopAllPropagation(e) {
  stopBubble(e);
  stopDefault(e);
}

/**
 * Returns DOM-node object for the Flash
 * @param {String} movieName - name of the movie
 */
function getFlashMovie(movieName) {
  var isIE = navigator.appName.indexOf("Microsoft") != -1;
  return (isIE) ? window[movieName] : document[movieName];
}

/**
 * Used by Flash to get the icon paths and link targets for each
 * icon.
 * 
 * Fetches the icon paths and anchor links targets from the HTML 
 * service selector and returns a 2-dimensional array with these 
 * values.
 */
function getXml(){
 var a = [];
 $('#serv-navi-html li a').each(function() {      
   var imgSrc = $('img', this).attr('src');
   imgSrc = imgSrc.replace(/_medium\.png/, '.png');
   a.push([$(this).attr('href'), imgSrc]);
 })
 return a;
}

/**
 * Mouseover event handler for the flash service selector
 * @param {String} serviceName - name of the service
 * @param {Integer} index - order of the icon in the icon list 
 * @param {Integer} position - position of the icon in pixels
 *           (counted from the left edge of the Flash element)
 */
function focusIn(serviceName, index, position) {
  OviUI.showTooltip($('#serv-navi-html ul li:eq('+index+') p')[0].innerHTML,position, 75);
}

function focusOut(){
  OviUI.focusOut();
}

function serviceSelection(serviceName){
  OviUI.showServiceFlash(serviceName);
}

function backToDefault(){
  OviUI.closeServInfoFlash(); 
  getFlashMovie("SERVICESELECTOR").backToDefault();
}

function serviceInfoModeEnabled(){
  var hashVal = location.hash.replace(/#show-/, '#');
  if ($(hashVal + '.serv-info').length == 1) {
    return true;
  } 
  return false;
}

/**
 * Hides Ovi video player
 */
function hideTakeoverContent() {
	$('#serv-video-container').css('display', 'none');
	$('#serv-main-box').css('display', 'block');
	//OviUI.hbxPageView('video+close');
}

var OviUI = {
	showVideoPlayer : function() {
		//show video button
		if (typeof videoFlashLoaded!="undefined" && videoFlashLoaded) {
			$('#serv-video-container').css('display', 'block');
			$('#serv-main-box').css('display', 'none');
			OviUI.hbxPageView('video+open'); 
		}
	},
	
  flashLoaded : function(p){
    if (!p) return;
    $('#serv-navi-html ul')[0].style.display = "none"; 
    OviUI.flashSelector = true;
    $('#serv-tooltip').addClass('flash-navi-main');
  },
  
  getFlashMovie : function(movieName) {
    var isIE = navigator.appName.indexOf("Microsoft") != -1;
    return (isIE) ? window[movieName] : document[movieName];
  },
  
 /**
  * Supplies to the SWF movie the HTML code for the services selector 
  */
 getSelectorHTML : function(){
   return $('#serv-navi-html ul')[0].innerHTML;
 },
 
 /**
  * Calculates the position for the tooltip and displays it
  * @param coord integer, center point of the icon the user is hovering above
  */
 showTooltip : function(text, coord, width) {
   //reset tooltip position
   $('#serv-tooltip')[0].style.left = '0px';
   //show tooltip
   $('#serv-tooltip')[0].style.display = 'block';
   $('#serv-tooltip-inner')[0].innerHTML = text;
   //calculate the position of the tooltip
   if (OviUI.flashSelector) {
     var l = Math.floor(coord - ( coord + 120 ) / 1000 * $('#serv-tooltip').width());
     //debug('coord: '+coord);
     //debug('No flash l: '+l);
   } else {
     var l = Math.floor(coord - ( coord + 120 ) / 1000 * $('#serv-tooltip').width());
     //debug('No flash l: '+l);
   }
   //check for tooltip overflowing the available area
   var d = $('#serv-tooltip').width() + l;
   if (d > 738) l = l - (d-728);
   //debug('final l: '+l);
   $('#serv-tooltip')[0].style.left = l+'px';
  
   //show arrow
   if (OviUI.flashSelector) {
     $('#serv-tooltip-arrow ')[0].style.left = Math.floor(coord-l-5)+'px';
   } else {
     $('#serv-tooltip-arrow ')[0].style.left = Math.floor(coord-l-5)+'px';
   }
 },
 
 hideTooltip : function() {
   $('#serv-tooltip')[0].style.display = 'none';
 },
 
 /**
  * Actions performed when cursor hovers out of the selected icon (JavaScript)
  */
 focusOut : function() {
   //debug("Hovering out "+ new Date().getTime() + "<br />");
   //clear previous timeouts
   if (OviUI.tooltipHideTimeout != null) {
     window.clearTimeout(OviUI.tooltipHideTimeout);
     OviUI.tooltipHideTimeout = null;
   }
   OviUI.hideTooltip();
  /* if (OviUI.serviceInfoShown){
     OviUI.tooltipHideTimeout = window.setTimeout("OviUI.hideTooltip()", 1000);
     return;
   }*/

  // OviUI.tooltipHideTimeout = window.setTimeout("OviUI.hideTooltip()", 1000);
 },
 
 hbxPageView : function(name) {
	  if (typeof hbx ==  "object") {
      if (hbx.mlc != undefined) {
        var hbxMlc = hbx.mlc;
      } else {
        var hbxMlc = false;
      }
	  } else {
	    var hbxMlc = false;
	  }
	  if (hbxMlc != false) _hbPageView(name, hbxMlc+"/"+name);
 },
 
 showServiceFlash : function(objID){
 	 OviUI.hbxPageView(objID.replace(/#/,''));
 	 location.hash = objID.replace(/#/, '#show-');
   $('#serv-default-view').hide();
   //move preview info content back to service info container
   //$('#serv-info-container').append($('#serv-info-box .serv-info'));
	 $('#serv-info-box .serv-info').remove();
   //show the currently selected content
   $('#serv-info-box').append($(objID).clone());
	 $('#serv-info-box .serv-info').attr("id", "");
   $('#serv-selected-close img').show();

   $('#serv-tooltip').removeClass('flash-navi-main');
   $('#serv-tooltip').addClass('flash-navi-small');
   $('#serv-tooltip').css({'top': '0px'});
   
   if(OviUI.serviceInfoShown == false) {
     OviUI.hideTooltip();
     OviUI.serviceInfoShown = true;
   }
   $('#serv-navi-flash').addClass('narrow');
	 try {
   	getFlashMovie("SERVICESELECTOR").serviceInfoMode();
   } catch (e) {}
	 OviUI.serviceInfoShown = true;
 },
 
 showService : function(objID){
 	 OviUI.hbxPageView(objID.replace(/#/,''));
 	 location.hash = objID.replace(/#/, '#show-');
   $('#serv-default-view').hide();
   //move preview info content back to service info container
   //$('#serv-info-container').append($('#serv-info-box .serv-info'));
	 $('#serv-info-box .serv-info').remove();
   //show the currently selected content
   //$('#serv-info-box').append($(objID));
	 $('#serv-info-box').append($(objID).clone());
	 $('#serv-info-box .serv-info').attr("id", "");
   $('#serv-selected-close img').show();
   //replace normal icons with small icons
   if(OviUI.serviceInfoShown == false) {
     OviUI.hideTooltip();
     $('#serv-navi-html ul li a img').each(function() { 
       var src = $(this).attr('src');
       src = src.replace(/_medium\.png/, '_small.png');
       $(this).attr({'src': src});
     });
     $('#serv-navi-html').addClass('navi-narrow');
   }
	 OviUI.serviceInfoShown = true;
 },
 
 closeServInfoFlash : function() {
 	 OviUI.hbxPageView("close-info-view");
   OviUI.hideTooltip();
   $('#serv-info-container').append($('#serv-info-box .serv-info'));
   $('#serv-default-view').show();
   $('#serv-selected-close img')[0].style.display="none";
   $('body').trigger('focus');
   $('#serv-tooltip').addClass('flash-navi-main');
   $('#serv-tooltip').removeClass('flash-navi-small');
   $('#serv-tooltip').css({'top': '-25px'});
   OviUI.serviceInfoShown = false;
   getFlashMovie("SERVICESELECTOR").backToDefault();
   $('#serv-navi-flash').removeClass('narrow');
   OviUI.hideTooltip();
	 OviUI.serviceInfoShown = false;
 },
 
 closeServInfo : function() {
 	 OviUI.hbxPageView("close-info-view");
   if (OviUI.flashSelector) OviUI.closeServInfoFlash();
   OviUI.hideTooltip();
   $('#serv-info-container').append($('#serv-info-box .serv-info'));
   $('#serv-default-view').show();
   $('#serv-selected-close img')[0].style.display="none";
   $('body').trigger('focus');
   //replace small icons with normal size icons
   $('#serv-navi-html ul li a img').each(function() { 
     var src = $(this).attr('src');
     src = src.replace(/_small\.png/, '_medium.png');
     $(this).attr({'src': src});
   });
   $('#serv-navi-html').removeClass('navi-narrow');
   OviUI.serviceInfoShown = false;
 },
 
 tooltipHideTimeout : null,
 tooltipshown : false,
 currentIcon : null,
 serviceInfoShown : false,
 flashSelector : false
}

$(function() {
  //icons selector hover code
  $('#serv-navi-html ul li').hover(
    function(){
     var c = $(this)[0].offsetLeft;
     var w = $(this).width();
     var t = $('p',this).html();
     OviUI.showTooltip(t,c + w/2 - 5, w);
    }, OviUI.focusOut
  );
  //icons selector click events
  $('#serv-navi-html ul li').click(function(e) {
    OviUI.showService( $('a',this).attr('href'));
    stopAllPropagation(e);
    $(this).blur();
  });
  //service view close button click event
  $('#serv-selected-close').click(function(e) {		    
    OviUI.closeServInfo();
    $(this).blur();
		location.hash = '#start';
		stopAllPropagation(e);
  });
	
	//handle hash params
  var hashVal = location.hash.replace(/#show-/, '#');
  if ($(hashVal+'.serv-info').length == 1) {
    OviUI.showServiceModeFlash = true;
		//check that flash is working / initialized
    if (OviUI.flashSelector ) {
			try {
			 getFlashMovie("SERVICESELECTOR").serviceInfoMode();
			} catch (e) {}
      OviUI.showServiceFlash(hashVal);
		} /*else if (OviUI.flashSelector && typeof getFlashMovie("SERVICESELECTOR").serviceInfoMode == "function") {
			OviUI.showServiceFlash(hashVal);
			//do nothing
    }*/ else {
      OviUI.showService(hashVal);
    }
  }
	if (so3.write('serv-video-container')) {
		$('#serv-link-right').css('display', 'block'); 
  	$('#serv-link-right').click(function(){
  		OviUI.showVideoPlayer();
  	})
  } else {
		$('#serv-img-right').css('display', 'block'); 
	}
});