// This uses Prototype

// This changes the class of the garage parts application items when the user moves the
// mouse over them and also sets up expanding the tree when the user clicks the items
$$(".garage_partsapplication li").each(function(elmt) {
    
    elmt.childElements().each(function(childElmt) {
        if (childElmt.tagName.toLowerCase() == 'ul') {
            childElmt.addClassName('gcol');
        }
    });
});


$$(".garage_partsapplication li span").each(function(elmt) {    

    // mousedown is used instead of click because IE doesn't detect which mouse button is used otherwise
    elmt.observe('mousedown', function(event) {
        // isLeftClick doesn't work in IE9 with this version of Prototype
        //if (Event.isLeftClick(event)) {
            // Toggle between a plus and minus sign
            this.toggleClassName('gexp');

            // Toggle between this node collapsed or expanded
            this.siblings().each(function(childElmt) {
                if (childElmt.tagName.toLowerCase() == 'ul') {
                    childElmt.toggleClassName('gcol');
                }
            });
        //}
    });

});





function garageVehicleSelectChange(curSelect, curLevelNum) {

   // If the option's string starts with 'VEHICLE ' then redirect to that node's vehicle page
   // Otherwise continue fetching data for the child node
   var optionArray = curSelect.value.split("VEHICLE ");
   if (optionArray.length > 1) {
      garageIsLoading();
      vehicleURL = vehiclePlaceholderURL;
      vehicleURL = vehicleURL.replace("PLACEHOLDER", optionArray[1]);
      window.location = vehicleURL;
      return;
   }
   else {

       validLevelNum = curLevelNum;
       // If the user selected the first option, that's the "Select a ..." text which isn't a
       // valid option, so pretend that they didn't select that at all.
       if (curSelect.selectedIndex == 0) {
           validLevelNum--;
       }

       // Pass the elements up to and including this one
       var elementsToPass = [];
       for (var i = 0; i <= validLevelNum; i++) {
          elementsToPass.push($('vehicleLevel' + i));
       }

       // Since any change the user makes to this select box affects all subsequent select boxes
       // that might exist, all subsequent select boxes should be cleared before the next select
       // box is populated
       // Go up to 1000 as an emergency brake
       for (i = validLevelNum + 1; i < 1000; i++) {
          var selectToClear = $('vehicleLevel' + i);
          if (selectToClear) {

             // Clear this select box
             //selectToRemove.descendants().each(Element.remove);

             // Remove all the elements but the first one (since that is the one with the prompt text)
             while (selectToClear.length > 1) {
                 selectToClear.removeChild(selectToClear.lastChild);
             }

             selectToClear.disabled = true;
             selectToClear.addClassName('disabled');

          }
          else {
             break;
          }
       }

       var nextSelectBox = $('vehicleLevel' + (validLevelNum + 1));
       nextSelectBox.disabled = false;
       nextSelectBox.removeClassName('disabled');

       return new Ajax.Updater(nextSelectBox,
                               garageFetchURL,
                               { method: 'post',
                                 parameters: Form.serializeElements(elementsToPass),
                                 onLoading: garageIsLoading(),
                                 onComplete: garageDoneLoading()
                               });
	   }

}

function garageIsLoading()
{
   $('garage_loading_spinner').removeClassName('no-display');
}

function garageDoneLoading()
{
   $('garage_loading_spinner').addClassName('no-display');
}






// This stops the next event from executing when the add to cart button is clicked
$$(".garage_vehicle_parts .part_type .single_part .button").each(function(elmt) {

    elmt.observe('mousedown', function(event) {
        Event.stop(event);
    });
});


// Without this javascript the user can click the name or the image in a garage single_part block
// This javascript makes the entire block clickable
// It finds the first link in the block and makes the entire block click go to that
// It also makes the browser add the single_part_hover class to a block when the
// user hovers over that block
$$(".garage_vehicle_parts .part_type .single_part").each(function(elmt) {

    // mousedown is used instead of click because IE doesn't detect which mouse button is used otherwise
    elmt.observe('mousedown', function(event) {
        // isLeftClick doesn't work in IE9 with this version of Prototype
        //if (Event.isLeftClick(event)) {
            window.location = $(this).down("a").readAttribute("href");
            return false;
        //}
    });


    elmt.observe('mouseover', function() {
        this.addClassName('garage_part_hover');
    });
    elmt.observe('mouseout', function() {
        this.removeClassName('garage_part_hover');
    });

});