var XMLPATH = "Objects/Waves_demo_player/demo_swich/demo_players.xml";

 //QueryString jQuery plugin
  (function($)
  {
   var QueryStringBasic = function()
   {
   };

   QueryStringBasic.prototype = {
    //properties
    qs : window.location.search, //?arg1=val1&arg2=val2&arg3=val3

    //methods
    get: function() //this function has no args and result an object: {arg1: val1, arg2: val2, arg3:val3}
    {
     var argsObj = new Object();
     argsObj["length"] = 0;

     //qs is empty or contains '?' only
     if(this.qs == "" || this.qs.substring(1) == "")
        return argsObj;

     $.each(this.qs.substring(1).split("&"), function(index, value)
     {
        if(value.split("=").length != 2)
            return argsObj;

        argsObj[value.split("=")[0]] = value.split("=")[1];
        argsObj["length"] = argsObj["length"] + 1;
     });

     return argsObj;
    },


    getVal: function(val)
    {
     var o = this.get();
     return(o[val]);
    }
   }


   $.QS = function(val)
   {
        var qsb = new QueryStringBasic();

        if(val == undefined)
             return qsb.get();
        else
             return qsb.getVal(val);
   };

  })(jQuery);

/* jQuery.preloader - v0.95 - K Reeve aka BinaryKitten */
(function ($) 
{
	$.preLoadImages = function(imageList, callback, current, XmlDoc) 
	{
		var i, total, loaded = 0;		
		
		if (typeof imageList != 'undefined') 
		{
			if ($.isArray(imageList)) 
			{
				total = imageList.length; // used later				
				for (i=0; i < total; i++) 
				{
					var img = new Image();
					$(img).load(function()
					{
						loaded++; // should never hit a race condition due to JS's non-threaded nature
						if (loaded == total) 
						{
							if ($.isFunction(callback)) 
							{
								callback(current, XmlDoc);
							}
						}					
					});
					$(img).attr("src", imageList[i]);					
				}
			}
		}
	};
	
})(jQuery); 

/* end of jQuery.preloader - v0.95 - K Reeve aka BinaryKitten */



$("document").ready(init);


//body onclick -> close ddl
$(document).click(function()
{
	if($("#ddlCollection") != undefined)
	{
	 	$("#ddlCollection").hide();
	}
	
});


function init()
{
	$.ajax({url: XMLPATH,
		    type: "GET",
			cache: false, 
		    success: DrawCollection,
			dataType: "xml"});
 
}



function createCombo(colID, name){
	
	var htmlSelected = "";
	
	htmlSelected+="<div id=\"selected\"  style=\"background-image: url(Objects/Waves_demo_player/demo_swich/DDL.jpg); background-repeat: no-repeat; background-color: rgb(208, 205, 206); width: 377px; display: block; float: left; height: 27px; cursor:default; position:absolute;\">";	
	htmlSelected+="<span class=\"ddlSpan\" title=\""+ name +"\">"+ name+ "</span>"	
	htmlSelected+="</div>";
	
	return htmlSelected;
	
}

function createImg(colID, source, name, descr, plugLink, XmlDoc){
   

  //without description
  //return ("<img id=\""+ colID +"\" class=\"image\" alt=\"" + name +"\" title=\"" + name +"\" src=\""+ source  +"\"/>");

  var htmlImg = "";
  
  htmlImg+="<img id=\""+ colID +"\" class=\"image\" alt=\"" + name +"\" title=\"" + name +"\" src=\""+ source  +"\"/>"

   htmlImg+="<p class=\"descr\" style=\"font-size:12px; margin-top:6px; margin-left:2px; margin-right:2px; margin-bottom:2px;\">";
   
   if(colID == "4jjp"){
	   //exception  for 'JJP Drums and Cymbals & Percussion' : implementation for each of the part relevant link
	   var name1="JJP Drums";
	   var name2="Cymbals & Percussion";
	   var plugLink1 = "content.aspx?id=" + $("item[id=\"7jjp\"]", XmlDoc).find("plugpage").find(lang).text();
	   var plugLink2 = plugLink;
	   
	   htmlImg+="<a  class=\"plugPage\"  style=\"font-size:12px;\" title=\""+ name1 +"\"  href=\""+plugLink1+"\">" + name1 + "</a> and ";
	   htmlImg+="<a  class=\"plugPage\"  style=\"font-size:12px;\" title=\"JJP "+ name2 +"\"  href=\""+plugLink2+"\">" + name2 + "</a>";
       htmlImg+="<span class=\"descr\">" + descr + "</span>";
       htmlImg+="</p>";
	  
   }
   else{
	   htmlImg+="<a  class=\"plugPage\"  style=\"font-size:12px;\" title=\""+ name +"\"  href=\""+plugLink+"\">" + name + "</a>";
	   htmlImg+="<span class=\"descr\">" + descr + "</span>";
	   htmlImg+="</p>";
   }
   
  return htmlImg;

}

function createFlash(colID, source){
	  
	
	   var html = "";
	   
      // html+="<div id=\""+ colID +"\" class=\"media\" style=\"display:block; background-image: url(Objects/Waves_demo_player/demo_swich/ajax-loader.gif); background-repeat:no-repeat; \">"; wmode="transparent"
	
	   html+="<object codebase=\"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7\"";  
	   html+=" classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\"";  
	   html+="type=\"application/x-oleobject\" style=\"height:100px;\">"; 
	   html+="<param name=\"src\" value=\"" + source + "\"/> ";
       html+="<param name=\"height\" value=\"100\"/> ";
	   html+="<param name=\"width\" value=\"200\"/> ";		
       html+="<param name=\"bgcolor\" value=\"#D0CDCE\"/> ";  
	   html+="<param name=\"wmode\" value=\"window\"/> ";
	   html+="<embed  width=\"196\" height=\"100\"  wmode=\"window\"  bgcolor=\"#D0CDCE\"  src=\"" + source + "\" type=\"application/x-shockwave-flash\"  pluginspage=\"http://www.adobe.com/go/getflashplayer\"></embed>";
	   html+="</object>";				 
		 
	
       return (html);

}

function DrawCollection(XmlDoc)
{	

	 //load relevant collection from redirection from others pages 
	 QueryString(XmlDoc);
	 
	  document.getElementById("selectedPreload").innerHTML = "<img alt=\"Please Choose Your Collection from the Left Menu\" style=\"margin-left:-16px;\" src=\"Objects/Waves_demo_player/demo_swich/preloadText.jpg\"/>";

  
   	//fill DDL on left menu click
	$("a.sideMenu").click(function(e) 
     {
	    //loader image
	    document.getElementById("imageDiv").innerHTML = "<div style=\"height:170px; width: 375px; text-align: center; margin-top: 50px;\" ><img src=\"Objects/Waves_demo_player/demo_swich/ajax-loader.gif\"/></div>";
	
	 	demo_player_preload($(this), XmlDoc);


        e.stopPropagation(); 
		if($("#ddlCollection").is(":visible"))
		{
		   $("#ddlCollection").hide();
		}



	   //side menu ancore
	   return false;

     });

	$("#selectedPreload").click(function(e) 
	{   
		e.stopPropagation(); 
		
		if($("#ddlCollection").is(":visible"))
		{
		  $("#ddlCollection").hide();
		  
		}
		else
		{
			$("#ddlCollection").show();
		}
	});
	
}



//build content
function build_content(current, XmlDoc)
{		
		
	    var colID = current.attr("id").toString().toLowerCase();


	   
		 var htmlDdl = "";
	   
	     var name;
         var image;
         var flash;
		 var descr;
		 var plugLink;
         var idXML;
         var collection;
		 var count = 0;
  
  
    	 var items = $("item", XmlDoc); 	   		
	     
	   items.each(function()
		{
	
		  name  = $(this).find("name").text();
		  image = "Objects/Waves_demo_player/demo_swich/images/" + $(this).find("img").text();
		  flash = "Objects/Waves_demo_player/demo_swich/flash/" + $(this).find("flash").text();
		  descr = $(this).find("descr").text();
		  idXML = $(this).attr("id").toString().toLowerCase();
		  collection = $(this).find("collection").text().toString().toLowerCase();
		  plugLink = "content.aspx?id=" + $(this).find("plugpage").find(lang).text();
		  

		  if(collection == colID)
		  {     
                 htmlDdl += "<li  style=\"list-style: none; margin:0px; padding:0px;\">";  
				 htmlDdl += "<a id=\""+ idXML +"\" class=\"ddl\" title=\""+ name +"\" href=\"JavaScript:void(0);\">"+ name +" </a>";  
				 htmlDdl += "</li>"; 
		  }	

		
			  //add html	
             document.getElementById("ddlCollectionList").innerHTML = htmlDdl;
			
			if(idXML == ("1"+colID)){
			//document.getElementById("selected").innerHTML = "<span class=\"ddlSpan\" style=\"margin-left:10px; margin-top:7px; display: block; float: left;\">"+ name+ "</span></div>";	
			

			  //document.getElementById("flashObject").innerHTML = createFlash(idXML, flash);
			  // $("object").find("param[name='src']").attr("value", flash);
			  // $("embed").attr("src", flash);
	

              document.getElementById("selectedPreload").innerHTML = createCombo(idXML, name);	
			  document.getElementById("imageDiv").innerHTML = createImg(idXML, image, name, descr, plugLink, XmlDoc);
			  document.getElementById("flashDiv").innerHTML = createFlash(idXML, flash);
	  
			  	  
			}
			

		 
			//change img on DDL checked options
			 $("a.ddl").click(function(e) 
			 { 
			   e.stopPropagation(); 
			   
			   
               var currentId = $(this).attr("id").toString().toLowerCase();
			   var currentName = $("item[id=\""+ currentId +"\"]", XmlDoc).find("name").text();
			   var imgSource = "Objects/Waves_demo_player/demo_swich/images/" + $("item[id=\""+ currentId +"\"]", XmlDoc).find("img").text();
			   var flashSource = "Objects/Waves_demo_player/demo_swich/flash/" + $("item[id=\""+ currentId +"\"]", XmlDoc).find("flash").text();
			   var descr = $("item[id=\""+ currentId +"\"]", XmlDoc).find("descr").text();
			   var plugLink =  "content.aspx?id=" + $("item[id=\""+ currentId +"\"]", XmlDoc).find("plugpage").find(lang).text();

			   //document.getElementById("selected").innerHTML = "<span class=\"ddlSpan\" style=\"margin-left:10px; margin-top:7px; display: block; float: left;\">"+ currentName+ "</span></div>";

			   //document.getElementById("flashObject").innerHTML = createFlash(currentId, flashSource);
			  //$("param[name='src']").attr("value", flashSource);
               //$("embed").attr("src", flashSource);
			   
   
			   document.getElementById("selectedPreload").innerHTML = createCombo(idXML, currentName);	
		       document.getElementById("imageDiv").innerHTML = createImg(currentId, imgSource, currentName, descr, plugLink, XmlDoc);
			   document.getElementById("flashDiv").innerHTML = createFlash(currentId, flashSource);

			   
			   

		       if($("#ddlCollection").is(":visible"))
		         {
					
					$("#ddlCollection").hide();
				
			     }
			   else
			      {
				    $("#ddlCollection").show();

			      }

		      });
		

			 
		});
		
	
		//selected item in the side menu
		$("ul.menu>li").each(function()
		{   
		    var sideMenuId = $(this).find("a.sideMenu").attr("id").toString().toLowerCase();
			
			
			if(sideMenuId == colID)
			{
				$(this).removeClass().addClass("ActiveLI");

			}
			else
			{
				$(this).removeClass().addClass("RegularLI");
			}
			
		});	
		

		$("#ddlCollection").css("border","1px solid gray");
	
}


//preload 
function demo_player_preload(current, XmlDoc)
{

	var colID = current.attr("id").toString().toLowerCase();
	
	
	var collection;
	var images_arr = new Array();	
	var image;
	var count = 0;
	
	var items = $("item", XmlDoc); 
	
	items.each(function()
	{
		 collection = $(this).find("collection").text().toString().toLowerCase();
		
		 if(collection == colID)
		 {       
           	image = "Objects/Waves_demo_player/demo_swich/images/" + $(this).find("img").text();   
			images_arr[count] = image;
			count++;  
		 }			
	});
	
	
	
	$.preLoadImages(images_arr, build_content, current, XmlDoc); 	

}



function QueryString(XmlDoc)
{
	var col_name = $.QS()["name"];
	//get query string------------
     //var ancore = window.location.hash;
    // ancore =  ancore.toString().replace("#", "");
	
	if(col_name != undefined)
	{
     	demo_player_preload($("a[id='"+col_name.toLowerCase()+"']"), XmlDoc);
	}

}

