/***********************
* Adobe Edge Composition Actions
*
* Edit this file with caution, being careful to preserve 
* function signatures and comments starting with 'Edge' to maintain the 
* ability to interact with these actions from within Adobe Edge
*
***********************/
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

   //Edge symbol: 'stage'
   (function(symbolName) {
      
      
      Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {
	var clickEventType = ('ontouchstart' in document.documentElement ? "touchstart" : "click");
	var headline;
	var headlinetxt = sym.getSymbol("styleHead").$("headlineTxt").css("pointer-events","none");
	var source;
	var sourcetxt = sym.getSymbol("styleBase").$("sourceTxt").css("pointer-events","none");
	var btnNo = 0;
	var yellowBg = {"background-color":"rgba(251,175,23,1)", "box-shadow":"5px 5px 5px rgba(0,0,0,0.3)", "border-width":"1px","border-style":"solid","border-color":"rgba(255,255,255,1)", "border-radius":"5px"};
	var txt=[];
	for (var i=0;i<36;i++){
	txt[i] = sym.$("txt"+i).css({"pointer-events":"none",});
	}
	txt[31].css(yellowBg);
	txt[32].css(yellowBg);
	txt[33].css(yellowBg);
	
	var txtArr=[];
	var datestring;
	var catstring;
	var kmstring;
	
	//AJAX retrieves data from xml source specified in url, maps xml variable to DOM object variable
	$.ajax({	
		type: "GET",
		url: "GN32206.xml",
		dataType: "xml",
		success: function(xml) {
			custonCol = $(xml).find('customColour').text();
			sym.getSymbol("styleHead").$("headerBox").css("background-color",custonCol);
			headline = $(xml).find('headline').text();
			headlinetxt.html(headline);
			source = $(xml).find('source').text();
			sourcetxt.html(source);
	
			for (var i=0; i<35; i++){
			txtArr[i]=$(xml).find('txt'+i).text();
			txt[i].html(txtArr[i]);
			}
	
			stringDate = $(xml).find('txt0').text(); 
         datestring=stringDate.split(":");

         stringCat = $(xml).find('txt1').text(); 
         catstring=stringCat.split(":");

         stringKm = $(xml).find('txt2').text(); 
         kmstring=stringKm.split(":");

      for (var h=0;h<12; h++){
		sym.getSymbol("auxBtnsMc").getSymbol("auxBtn"+h).$("noTxt").html(h+1);
		sym.getSymbol("auxBtnsMc").getSymbol("auxBtn"+h).$("dateTxt").empty();
		sym.getSymbol("auxBtnsMc").getSymbol("auxBtn"+h).$("dateTxt").append(datestring[h]);
		sym.getSymbol("auxBtnsMc").getSymbol("auxBtn"+h).$("catTxt").empty();
		sym.getSymbol("auxBtnsMc").getSymbol("auxBtn"+h).$("catTxt").append(catstring[h]);
		sym.getSymbol("auxBtnsMc").getSymbol("auxBtn"+h).$("kmTxt").empty();
		sym.getSymbol("auxBtnsMc").getSymbol("auxBtn"+h).$("kmTxt").append(kmstring[h]);
	}

			sym.$("txt18").animate({left:539 - sym.$("txt18").width() + 6}, 0);
			sym.$("txt31").animate({left:372 - sym.$("txt31").width()/2 + 6}, 0);
			sym.$("txt32").animate({left:404 - sym.$("txt32").width()/2 + 6}, 0);
			sym.$("txt33").animate({left:313 - sym.$("txt33").width()/2}, 0);


		}
	}); // END XML




for (var b=0;b<12; b++){
			sym.$("race"+b).stop().fadeOut(0);
		}


	// AUX BUTTONS
	auxArray = []; //the array that will hold references to the buttons.

	for (var a = 0; a < 12; a++){
		var auxBtnSymbols = sym.getSymbol("auxBtnsMc").getSymbol("auxBtn" +a); // Create an instance element of a symbol as a child of the given parent element
		auxBtnSymbols.setVariable("auxId", a); //set the value of a Symbol variable
		auxArray.push(auxBtnSymbols); //push it into the array
	}

	$.each(auxArray, function( count, auxInTheArray ){ //a 'for each' loop through the newly populated array
		var auxBtnItem = $(auxInTheArray); //create jQuery reference to the item
		var auxBtnElement = auxInTheArray.getSymbolElement(); //create a jQuery reference to the DIV element inside the symbol
		auxBtnElement.bind (clickEventType, {auxId:count}, auxBtnClick);
		auxBtnElement.bind ("mouseover", {auxId:count}, auxBtnShow);
		auxBtnElement.bind ("mouseout", {auxId:count}, auxBtnHide);
	})

	function resetAux(){
		for (var a=0; a<auxArray.length; a++){
        	auxArray[a].$("btnClick").fadeOut(0);
       	auxArray[a].$("btnOver").fadeOut(0);
			auxArray[a].$("dateTxt").css({"color":"black"});
			auxArray[a].$("catTxt").css({"color":"black"});
			auxArray[a].$("kmTxt").css({"color":"black"});
			auxArray[a].$("noBox").css({"background-color":"grey"});
		}
		for (var b=0;b<12; b++){
			sym.$("race"+b).stop().fadeOut(200);
		}
	}
	resetAux();
	sym.$("race0").stop().fadeIn(0);
	sym.$("txt30").stop().animate ({opacity:0}, 0);
	sym.$("txt33").stop().animate ({opacity:0}, 0);

	function auxBtnClick (e){
		resetAux(); //set them all back to normal state
		var auxAux_id = (e.data.auxId); //get the id of the clicked item
		sym.getSymbol("auxBtnsMc").getSymbol("auxBtn" + auxAux_id).$("btnClick").fadeIn(0);
		sym.getSymbol("auxBtnsMc").getSymbol("auxBtn" + auxAux_id).$("dateTxt").css({"color":"white"});
		sym.getSymbol("auxBtnsMc").getSymbol("auxBtn" + auxAux_id).$("catTxt").css({"color":"white"});
		sym.getSymbol("auxBtnsMc").getSymbol("auxBtn" + auxAux_id).$("kmTxt").css({"color":"white"});
		sym.getSymbol("auxBtnsMc").getSymbol("auxBtn" + auxAux_id).$("noBox").css({"background-color":"black"});
		sym.$("race"+auxAux_id).stop().fadeIn(300);
		if (auxAux_id >= 7){
			sym.$("txt33").empty();
			sym.$("startStopPointers").stop().fadeOut(0);
			sym.$("txt30").stop().animate ({opacity:1}, 100);
			sym.$("txt31").stop().animate ({opacity:0}, 100);
			sym.$("txt32").stop().animate ({opacity:0}, 100);
			sym.$("txt33").stop().animate ({opacity:1}, 100);
		}else{
			sym.$("startStopPointers").stop().fadeIn(0);
			sym.$("txt30").stop().animate ({opacity:0}, 100);
			sym.$("txt31").stop().animate ({opacity:1}, 100);
			sym.$("txt32").stop().animate ({opacity:1}, 100);
			sym.$("txt33").stop().animate ({opacity:0}, 100);
		}
		if (auxAux_id==7){
			sym.$("txt33").append(txtArr[33] + "<br>" + "4 " + txtArr[34]);
		}
		if (auxAux_id==8){
			sym.$("txt33").append(txtArr[33] + "<br>" + "10 " + txtArr[34]);
		}
		if (auxAux_id==9){
			sym.$("txt33").append(txtArr[33] + "<br>" + "7 " + txtArr[34]);
		}
		if (auxAux_id==10){
			sym.$("txt33").append(txtArr[33] + "<br>" + "7 " + txtArr[34]);
		}
		if (auxAux_id==11){
			sym.$("txt33").append(txtArr[33] + "<br>" + "14 " + txtArr[34]);
		}
	}

	function auxBtnShow (e){
		var auxAux_id = (e.data.auxId); //get the id of the over button
		sym.getSymbol("auxBtnsMc").getSymbol("auxBtn" + auxAux_id).$("btnOver").stop().fadeIn(300);
	}
	function auxBtnHide (e){
		var auxAux_id = (e.data.auxId); //get the id of the out button
		sym.getSymbol("auxBtnsMc").getSymbol("auxBtn" + auxAux_id).$("btnOver").stop().fadeOut(300);
	}

// MAKE AUX0 VISIBLE
	sym.getSymbol("auxBtnsMc").getSymbol("auxBtn0").$("btnClick").fadeIn(0);
	sym.getSymbol("auxBtnsMc").getSymbol("auxBtn0").$("btnClick").fadeIn(0);
	sym.getSymbol("auxBtnsMc").getSymbol("auxBtn0").$("dateTxt").css({"color":"white"});
	sym.getSymbol("auxBtnsMc").getSymbol("auxBtn0").$("catTxt").css({"color":"white"});
	sym.getSymbol("auxBtnsMc").getSymbol("auxBtn0").$("kmTxt").css({"color":"white"});

         	});//Edge binding end	
		
		// VIDEO BTN 1 =========================================================
         	
			
         	
         		
         	
			
			
         	// VIDEO BTN 2 =========================================================
         	
         	
         	
         		
         	
         	


   })("stage");
   //Edge symbol end:'stage'

   //=========================================================
   
   //Edge symbol: 'StyleBase'
   (function(symbolName) {   
   
   })("StyleBase");
   //Edge symbol end:'StyleBase'

   //=========================================================
   
   //Edge symbol: 'styleHead_1'
   (function(symbolName) {   
   
   })("styleHead");
   //Edge symbol end:'styleHead'

   //=========================================================
   
   //Edge symbol: 'Preloader'
   (function(symbolName) {   
   
   })("Preloader");
   //Edge symbol end:'Preloader'

   //=========================================================
   
   //Edge symbol: 'menuBtn_1'
   (function(symbolName) {   
   
      })("auxBtn");
   //Edge symbol end:'auxBtn'

   //=========================================================
   
   //Edge symbol: 'auxBtnsMc'
   (function(symbolName) {   
   
   })("auxBtnsMc");
   //Edge symbol end:'auxBtnsMc'

   //=========================================================
   
   //Edge symbol: 'auxBtn_1'
   (function(symbolName) {   
   
         })("auxBtn2");
   //Edge symbol end:'auxBtn2'

})(jQuery, AdobeEdge, "GraphicNews32206");