/***********************
* 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) {
//get the id of the clicked item         // insert code to be run when the composition is fully loaded here

         var headline;
         var headlinetxt = sym.getSymbol("styleMc").$("headlineTxt").css("pointer-events","none");
         var stand;
         var standtxt = sym.getSymbol("styleMc").$("standTxt").css("pointer-events","none");
         var source;
         var sourcetxt = sym.getSymbol("styleBase").$("sourceTxt").css("pointer-events","none");
         var menu0;
         var menu0txt = sym.getSymbol("styleMc").$("menuTxt0").css("pointer-events","none");
         var menu1;
         var menu1txt = sym.getSymbol("styleMc").$("menuTxt1").css("pointer-events","none");
         var txt=[];
         txt[1]=sym.$("txt1").css("pointer-events","none");
         txt[2]=sym.getSymbol("keyMc").$("txt2").css("pointer-events","none");
         txt[3]=sym.getSymbol("keyMc").$("txt3").css("pointer-events","none");
         txt[4]=sym.getSymbol("keyMc").$("txt4").css("pointer-events","none");
         txt[5]=sym.getSymbol("keyMc").$("txt5").css("pointer-events","none");
         txt[6]=sym.getSymbol("keyMc").$("txt6").css("pointer-events","none");
         txt[7]=sym.getSymbol("keyMc").$("txt7").css("pointer-events","none");
         txt[8]=sym.getSymbol("keyMc").$("txt8").css("pointer-events","none");
         txt[9]=sym.getSymbol("keyMc").$("txt9").css("pointer-events","none");
         txt[10]=sym.getSymbol("keyMc").$("txt10").css("pointer-events","none");
         txt[11]=sym.getSymbol("keyMc").$("txt11").css("pointer-events","none");
         txt[12]=sym.getSymbol("keyMc").$("txt12").css("pointer-events","none");
         txt[13]=sym.getSymbol("keyMc").$("txt13").css("pointer-events","none");
         txt[14]=sym.getSymbol("keyMc").$("txt14").css("pointer-events","none");
         txt[15]=sym.$("txt15").css("pointer-events","none");
         txt[16]=sym.$("txt16").css("pointer-events","none");
         txt[17]=sym.$("txt17").css("pointer-events","none");
         txt[18]=sym.$("txt18").css("pointer-events","none");
         txt[19]=sym.$("txt19").css("pointer-events","none");
         txt[20]=sym.$("txt20").css("pointer-events","none");
         txt[21]=sym.getSymbol("keyMc").$("txt21").css("pointer-events","none");
         txt[22]=sym.getSymbol("keyTxt").$("txt22").css("pointer-events","none");
         txt[23]=sym.getSymbol("keyTxt").$("txt23").css("pointer-events","none");
         txt[24]=sym.getSymbol("keyTxt").$("txt24").css("pointer-events","none");
         txt[25]=sym.getSymbol("keyTxt").$("txt25").css("pointer-events","none");
         txt[26]=sym.getSymbol("keyTxt").$("txt26").css("pointer-events","none");
         txt[27]=sym.getSymbol("keyTxt").$("txt27").css("pointer-events","none");
         txt[28]=sym.getSymbol("keyTxt").$("txt28").css("pointer-events","none");
         txt[29]=sym.getSymbol("keyTxt").$("txt29").css("pointer-events","none");
         txt[30]=sym.getSymbol("keyTxt").$("txt30").css("pointer-events","none");
         txt[31]=sym.getSymbol("keyTxt").$("txt31").css("pointer-events","none");
         txt[32]=sym.getSymbol("keyTxt").$("txt32").css("pointer-events","none");
         txt[33]=sym.getSymbol("keyTxt").$("txt33").css("pointer-events","none");
         txt[34]=sym.$("txt34").css("pointer-events","none");
         txt[35]=sym.$("txt35").css("pointer-events","none");
         txt[36]=sym.$("txt36").css("pointer-events","none");
         txt[37]=sym.$("txt37").css("pointer-events","none");
         txt[38]=sym.$("txt38").css("pointer-events","none");
         txt[39]=sym.$("txt39").css("pointer-events","none");
         txt[40]=sym.$("txt40").css("pointer-events","none");
         txt[41]=sym.$("txt41").css("pointer-events","none");
			var txtArr=[];

           //AJAX retrieves data from xml source specified in url, maps xml variable to DOM object variable
           $.ajax({	
         	type: "GET",
         	url: "GN29783.xml",
         	dataType: "xml",
         	success: function(xml) {
			headline = $(xml).find('headline').text();
         		headlinetxt.html(headline);
         		stand = $(xml).find('stand').text();
         		standtxt.html(stand);
         		source = $(xml).find('source').text();
         		sourcetxt.html(source);
         		menu0 = $(xml).find('menu0').text();
         		menu0txt.html(menu0);
         		menu1 = $(xml).find('menu1').text();
         		menu1txt.html(menu1);
			for (var i=1; i<42; i++){
			txtArr[i]=$(xml).find('txt'+i).text();
			txt[i].html(txtArr[i]);
			}
         		}
         	}); // END XML

// STOP ELEMENTS INTERACTING WITH MOUSE
	sym.$("handMc").css("pointer-events","none");
	sym.$("videoIcon").css("pointer-events","none");
	sym.$("carIcon").css("pointer-events","none");

// HIDE ELEMENTS
        sym.$("videoPanel").hide();

// MAKE ELEMENTS INVISIBLE
	sym.getSymbol("carBottomMc").$("carBottom").animate({opacity: 0}, 0);
	sym.$("arrowBtn").animate({opacity: 0}, 0);
	sym.$("keyMc").animate({opacity: 0}, 0);
	sym.$("keyTxt").animate({opacity: 0}, 0);
	sym.$("txt34").animate({opacity: 0}, 0);
	sym.$("handMc").animate({opacity: 0}, 0);

// Animate cars at start
	var speed = 900;	
	sym.getSymbol("carsMc").$("car1").delay(200). animate({left: 0}, speed);
	sym.getSymbol("carsMc").$("car2").delay(400).animate({left: 0}, speed);
	sym.getSymbol("carsMc").$("car3").delay(600).animate({left: 0}, speed);
	sym.getSymbol("carsMc").$("car4").delay(800).animate({left: 0}, speed);
	sym.getSymbol("carsMc").$("car5").delay(1000).animate({left: 0}, speed);
	sym.getSymbol("carsMc").$("car6").delay(1200).animate({left: 0}, speed);
	sym.getSymbol("carsMc").$("car7").delay(1400).animate({left: 0}, speed);
	sym.getSymbol("carsMc").$("carTop").delay(1400).animate({left: 0}, speed);
	sym.$("keyMc").delay(2500).animate({opacity: 1}, 800);
	sym.$("txt34").delay(2900).animate({opacity: 1}, 800);
	sym.$("arrowBtn").delay(3200).animate({opacity: 1}, 800);


// SLIDE CUT AWAY CAR UP AND DOWN --------------------------------------------
	var slideCar = "carDOWN";
        function doClick() {
			if(slideCar == "carDOWN"){
				sym.getSymbol("carBottomMc").$("carBottom").animate({opacity: 1}, 500);
				sym.getSymbol("carBottomMc").$("carBottom").delay(380).animate({top: -96}, 400);
				sym.getSymbol("carBottomMc").$("slideBg").delay(500).animate({top: -154}, 800);
				sym.$("arrowBtn").delay(840).animate({top: 276}, 440);
				sym.$("keyTxt").delay(1400).animate({opacity: 1}, 800);
				// ROTATE BUTTON 180
				sym.$('arrowBtn').animate({borderSpacing: 180}, {
				step: function(now,fx) {
				$(this).css('-webkit-transform','rotate('+now+'deg)');
				$(this).css('-moz-transform','rotate('+now+'deg)'); 
				$(this).css('transform','rotate('+now+'deg)');
				},duration:'fast'},'linear');
				slideCar = "carUP";
			}else{	
				sym.$("keyTxt").animate({opacity: 0}, 400);
				sym.getSymbol("carBottomMc").$("carBottom").delay(300).animate({top: 0}, 400);
				sym.getSymbol("carBottomMc").$("slideBg").delay(300).animate({top: 181}, 1000);
				sym.getSymbol("carBottomMc").$("carBottom").delay(800).animate({opacity: 0}, 500);	
				sym.$("arrowBtn").delay(300).animate({top: 404}, 240);
				// ROTATE BUTTON 0
				sym.$('arrowBtn').animate({borderSpacing: 0}, {
				step: function(now,fx) {
				$(this).css('-webkit-transform','rotate('+now+'deg)');
				$(this).css('-moz-transform','rotate('+now+'deg)'); 
				$(this).css('transform','rotate('+now+'deg)');
				},duration:'fast'},'linear');
				slideCar = "carDOWN";
			}
	}
// MOVE HAND
	sym.$("handMc").delay(3200).animate ({opacity:1, top:-190, left:-460}, 1000);
	sym.$("handMc").delay(200).animate ({top:-597, left:300}, 1000);

// ARROW BUTTON
	Symbol.bindElementAction(compId, symbolName, "${_arrowBtn}", "click", function(sym, e) {
		doClick();
	});

// MENU BUTTONS --------------------------------------------	
         //the array that will hold references to the buttons.
         menuArray = [];

         for (var m = 0; m < 2; m++){
         	 // Create an instance element of a symbol as a child of the given parent element
         	 var menuBtnSymbols = sym.getSymbol("styleMc").getSymbol("menuBtn" +m);
         	 //set the value of a Symbol variable
         	 menuBtnSymbols.setVariable("menuId", m);
         	 //push it into the array
         	 menuArray.push(menuBtnSymbols);
         }

         //a 'for each' loop through the newly populated array.
         $.each(menuArray, function( count, btnInTheArray ){
         	 //create jQuery reference to the item.
         	 var menuBtnItem = $(btnInTheArray);
         	 //create a jQuery reference to the DIV element inside the symbol.
         	 var menuBtnElement = btnInTheArray.getSymbolElement();
         	 //now you can bind interactivity to the menu items' DIVs
         	 menuBtnElement.bind ("click", {menuId:count}, menuBtnClick);
         	 menuBtnElement.bind ("mouseover", {menuId:count}, menuShow);
         	 menuBtnElement.bind ("mouseout", {menuId:count}, menuHide);
         	}
         )

         function resetMenu (){
		for (var m=0; m<menuArray.length; m++){
			var menu_arr = ["menuTxt0","menuTxt1"];
			$.each(menu_arr, function(index, value) {
			sym.getSymbol("styleMc").$(value).css('opacity', '0');
			});
         	menuArray[m].$("menuBtnOverClick").animate ({opacity: 0}, 0);
         	menuArray[m].$("menuBtnOver").animate ({opacity: 0}, 0);
		}
         }
	resetMenu();

	sym.getSymbol("styleMc").getSymbol("menuBtn0").$("menuBtnOverClick"). animate ({opacity: 1}, 0); // Make button 0 visible

        function menuBtnClick (e){

         	resetMenu(); //set them all back to normal state
         	var selectedMenu_id = (e.data.menuId); //get the id of the clicked item
         	sym.getSymbol("styleMc").getSymbol("menuBtn"+ selectedMenu_id).$("menuBtnOverClick"). animate ({opacity: 1}, 0);
         	sym.getSymbol("styleMc").$("menuTxt"+ selectedMenu_id). animate ({opacity: 1}, 0);
		if (selectedMenu_id == 0){
		sym.$("videoPanel").animate({opacity: 0}, {
		complete: function() { 
		sym.$("videoPanel").hide();
    		}
		});
		document.getElementById('vid1').pause();
		}
		if (selectedMenu_id == 1){
		sym.$("videoPanel").show();
		sym.$("videoPanel").animate({opacity: 1}, 1000);
		document.getElementById('vid1').play();
		}
         }
         function menuShow (e){
         	var selectedMenu_id = (e.data.menuId); //get the id of the over button
         	sym.$('handMc').hide();
		sym.getSymbol("styleMc").getSymbol("menuBtn" + selectedMenu_id).$("menuBtnOver"). animate ({opacity: 1}, 0);
		sym.getSymbol("styleMc").$("menuTxt" + selectedMenu_id). animate ({opacity: 1}, 0);

         }
         function menuHide (e){
         	var selectedMenu_id = (e.data.menuId); //get the id of the out button
		sym.getSymbol("styleMc").getSymbol("menuBtn" + selectedMenu_id).$("menuBtnOver"). animate ({opacity: 0}, 0);
		sym.getSymbol("styleMc").$("menuTxt" + selectedMenu_id). animate ({opacity: 0}, 0);

         }


// Embed a movie: create text variable 
	var vid = $("<video width='640' height='480' controls='controls' id='vid1'>" +
	"<source src='media/GN29783.mp4' type='video/mp4' />" +
	"<source src='media/GN29783.webm' type='video/webm' />" +
	"<source src='media/GN29783.ogg' type='video/ogg' />" +
	"This browser is not compatible with HTML5" +
	"</video>");

	// stage symbol lookup, and append the above vid object to it;
	// in other words, get the div called 'videobox' and attach the video control to it;
	sym.getSymbol("videoPanel").$("videobox").append(vid);





         });//Edge binding end	

         	
         	
         	
         		
         	
         	


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

//=========================================================
   //Edge symbol: 'handMc'
   (function(symbolName) {

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

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

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

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

   //=========================================================
   
   //Edge symbol: 'btnMc'
   (function(symbolName) {   

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

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

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

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

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

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

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

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

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