var toggleDiv = "#content2";
var ajaxContent = "#scroller";
var ready = false;
var isToggle = false;
var flashvars = {};
var params = {};
var activeMenu = null;
var prevMenu = null;
var clear = false;
var mainMsg = "";
var isAnim = false;

var attributes = { id: "radioPlayer", name: "radioPlayer" };
			 
swfobject.embedSWF("player.swf", "player", "240", "31", "10", "/path/to/expressinstall.swf", flashvars, params, attributes);
				
				
  function playRadio() {
				
	var swf = document.getElementById("radioPlayer");
				
	if($("#play-button").attr("id")== "play-button"){				
					
		swf.playRadio();
					
	} else {					
					
		swf.stopRadio();
	}			
 				 
  }
			
  function setPlaying(value) {
	  
	 if (value == 0) {
					 
		$("#stop-button").attr("id","play-button");
					 
		} else {
					 
		$("#play-button").attr("id","stop-button");
					 
		}
  }
  
  function showMenu(menu,mode){

		
		  if(!isToggle){
		
			  
			  if(activeMenu != menu || !ready){
				  
				  prevMenu = activeMenu;
				  activeMenu = menu;		  
				  
				  setContent(menu,mode,false);
			  }
		  
		  }else{
			
		    if(activeMenu != menu){	
			    
			  prevMenu = activeMenu;
			  activeMenu = menu;			  
			  
			  setContent(menu,mode,true);
		    }
		    
		  }
	  
  }
  
  function closeMenu(){

	  if(isToggle){
		  
		  activeMenu = null;
		  isToggle = false;
		  $(toggleDiv).slideToggle();
	  }
  }
  
  function setContent(menu,mode,append){
  
	  
	var url = "";
	  
	url= "inc/getData.php";

 
	$.ajax({
			
		url: url,
		global: false,
		type: "POST",
		data: {request: menu, mode: mode},
		dataType: "text",
		success: function(msg){
			
			ready = true;
			mainMsg = msg;
			
			if(!append){
				
			     $(ajaxContent).html(msg);
			     $(toggleDiv).slideToggle();
			     isToggle = true;		     
			
				
				
			}
			if(append){
				
			lastIndex = 0;	
				
				$.each($('.slideContent'), function(index, value) { 
					
					lastIndex =  index;
					
				});
				
				$(msg).appendTo(ajaxContent);
				clear = true;
				
				
				
				$("#section").trigger( 'goto',[lastIndex+1]);
				
			}
	
				      
		},
		error: function(){
				
			isToggle = false;
			ready = false;
			alert(url);
				      
		  }
		}
	);  
			
  }
  
  function initScroller(){

	$('#contentAjax').serialScroll({
		
			target: '#section',
			items:'.slideContent', // Selector to the items ( relative to the matched elements, '#sections' in this case )
			axis:'x',// The default is 'y' scroll on both ways
			duration:800,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
			force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
			lazy: true,
			//queue:false,// We scroll on both axes, scroll both at the same time.
			//event:'click',// On which event to react (click is the default, you probably won't need to specify it)
			//stop:false,// Each click will stop any previous animations of the target. (false by default)
			//lock:true, // Ignore events if already animating (true by default)		
			//start: 0, // On which element (index) to begin ( 0 is the default, redundant in this case )		
			//cycle:true,// Cycle endlessly ( constant velocity, true is the default )
			//step:1, // How many items to scroll each time ( 1 is the default, no need to specify )
			//jump:false, // If true, items become clickable (or w/e 'event' is, and when activated, the pane scrolls to them)
			//lazy:false,// (default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
			//interval:1000, // It's the number of milliseconds to automatically go to the next
			//constant:true, // constant speed
			
			onBefore:function( e, elem, $pane, $items, pos ){
				
			
				/**
				 * 'this' is the triggered element 
				 * e is the event object
				 * elem is the element we'll be scrolling to
				 * $pane is the element being scrolled
				 * $items is the items collection at this moment
				 * pos is the position of elem in the collection
				 * if it returns false, the event will be ignored
				 */
				 //those arguments with a $ are jqueryfied, elem isn't.

				 
				e.preventDefault();
				if( this.blur )
					this.blur();
			},
			onAfter:function( elem ){
				
				 if(prevMenu != null && clear){
					
					var prevClass = '.slideContent.'+prevMenu;	
					var activeClass = '.slideContent.'+activeMenu;				
					
					
					//$(prevClass).remove();
					
					$(prevClass).html("");
					$(prevClass).attr('class','emptySlide');
	
					ms='<div id="section" style="width:960px;height:363px;clear:left;overflow:hidden;">';
				
					ms+='<div id="scroller" style="width:10000px;">';
						
					ms+= '</div></div>';
					
					
				     $('#contentAjax').html(ms);
				     $(ajaxContent).html(mainMsg);
				     
				     clear = false;
				     
				     
				     initScroller();
				    
				}
	
			}
		});	  
	  
  }