var wm_Cfgr =
{
  buttonIDs: [ "nextButton", "blaze_control_restart", "blaze_control_save", "blaze_control_top", "blaze_control_sole", 
              "blaze_control_side", "blaze_control_zoomin", "blaze_control_zoomout", "blaze_control_print",
              "blaze_control_share", "blaze_control_finish", "change_background_button", "addtocartbutton" ],
  shoePanels: [ "shoe_panels_div0", "shoe_panels_div1", "shoe_panels_div2", "shoe_panels_div3" ],
  shoePanelPrefix: "shoe_panel_next",
  
  numElevations: 0,
  viewSelectionDiv: null,
  xMax: null,
  xMin: null,
  yMax: null,
  yMin: null,
  currElevation: null,
  brandingName: null,
  init: function()
  {
    var self = wm_Cfgr;
    // Set behaviours for View Selection Panel.
    var viewSelectionDiv = document.getElementById( "view_selection_div" );
    if ( viewSelectionDiv ) {
      // Store the View Selection Panel so we can easily refer to it later ...
      self.viewSelectionDiv = viewSelectionDiv;
      // ... work out its boundaries ...
      self.getVSDivBounds( );
      // ... and count the number of items it has.
      self.numElevations = self.countVSDivItems( );
      self.setVSDivEvents( );
      // We will need to re-compute the View Selection Panel bounds if the window is resized.
      Core.addEventListener( window, "resize", self.resizeListener );
    }
    // Set mouse over behaviours for shoe panels ...
    for ( var a in self.shoePanels ) {
      self.setShoePanelEvents( self.shoePanels[a] );
    }
    // Set mouse over behaviours for image buttons ...
    for ( var appBtn in self.buttonIDs ) {
      self.setBtnEvents( self.buttonIDs[appBtn] );
    }
    // ... and swatches.
    var swatches = Core.getElementsByClass( "swatches" );
    for ( var i = 0; i < swatches.length; i++ ) {
      self.setSwatchEvents( swatches[i] );
    }
		//.... and flag swatches
		var swatchesFlag = Core.getElementsByClass( "swatches_flag" );
		for ( var i = 0; i < swatchesFlag.length; i++ ) {
			self.setSwatchEventsFlag( swatchesFlag[i] );
		}
    // set events for radio button toggles
    var radioBtns = Core.getElementsByClass( "radioToggle" );
    for ( var i = 0; i < radioBtns.length; i++ ) {
      self.setRadioToggleEvents( radioBtns[i] );
    }
  
    // set click event for info buttons
    var infoBtns = Core.getElementsByClass( "options_title_infobutton" );
    for ( var i = 0; i < infoBtns.length; i++ ) {
      self.setInfoBtnEvents( infoBtns[i] );
    }
    
    initNext();
    
    // Initialise the panel DIVs.
    if(summaryFromLink == 'true'){
  //    goToSummary();
      summaryFromLink = 'false';
     } else{
      initDivs();
    }
  },
  
  getVSDivBounds: function( ) {
    var self = wm_Cfgr;
    var vsDiv = self.viewSelectionDiv;
    var divPos = wm_Screen.getPosition( vsDiv );
    self.xMin = divPos[0] + 2;  // apply a tolerance to this measurement.
    self.yMin = divPos[1] + 2;  // apply a tolerance to this measurement.
    self.xMax = self.xMin + parseFloat( Core.getComputedStyle( vsDiv, "width" ) );
    self.yMax = self.yMin + parseFloat( Core.getComputedStyle( vsDiv, "height" ) );
  },

  setShoePanelListeners: function( ) {
    var self = wm_Cfgr;
    // Set mouse over behaviours for shoe panels ...
    for ( var a in self.shoePanels ) {
      self.setShoePanelEvents( self.shoePanels[a] );
    }
  },

  countVSDivItems: function( )
  {
    var self = wm_Cfgr;
    var numItems = 0;
    var thePanel = self.viewSelectionDiv;
    if ( thePanel ) {
      // Get hold of all the DIVs within this element.
      var aDivs = thePanel.getElementsByTagName( "DIV" );
      for ( var i = 0; i < aDivs.length; i++ ) {
        var cDiv = aDivs[i];
        if ( Core.hasClass( cDiv, "shoe_elevation" ) ) {
          numItems++;
        }
      }
    }
    return numItems;
  },
  
  setVSDivEvents: function( )
  {
    var self = wm_Cfgr;
    // Get hold of all the DIVs within the View Selection Panel.
    var aDivs = self.viewSelectionDiv.getElementsByTagName( "DIV" );
    for ( var i = 0; i < aDivs.length; i++ ) {
      var cDiv = aDivs[i];
      if ( Core.hasClass( cDiv, "shoe_elevation" ) ) {
        Core.addEventListener( cDiv, "click", self.vsDivClickListener );
        Core.addEventListener( cDiv, "mouseover", self.vsDivOverListener );
        Core.addEventListener( cDiv, "mouseout", self.vsDivOutListener );
      }
    }
  },
  
  getElevItemNo: function( event )
  {
    // Get the source element from the event ...
    var thisElement = wm_Event.getEventSrc( event );
    // Get hold of the shoe item number ...
    var shoeItem = thisElement;
    while ( ! Core.hasClass( shoeItem, 'shoe_elevation' ) ) {
      shoeItem = shoeItem.parentNode;
    }
    return shoeItem.id.slice( -1 );
  },
  
  vsDivClickListener: function( event )
  {
    var self = wm_Cfgr;
    // Get the source element from the event ...
    var thisElement = wm_Event.getEventSrc( event );
    // ... and get hold of the number of the item that was clicked ...
    var shoeItem = thisElement;
    while ( ! Core.hasClass( shoeItem, 'shoe_elevation' ) ) {
      shoeItem = shoeItem.parentNode;
    }
    var itemNo = shoeItem.id.slice( -1 );
   // alert(shoeItem.id + "position");
    // Get hold of the shoe item position
    var position = document.getElementById(shoeItem.id + "position").value;
    // change blaze position
    swing(position);
    // dummy server call to keep session alive
    keepSessionAlive();
    // We have already worked out the number of items in the View Selection Panel ...
    var numItems = self.numElevations;
    var panelName = 'shoe_elevation_next';
    // Reset all the button rollover images ...
    self.resetVSDivImages( );
    // ... and set this button to ON.
    self.setVSDivBtn( itemNo, true );
    // Restore all listeners for all the shoe panels ...
    self.setShoePanelListeners( );
    // Restore the listeners for all other items in this panel ...
    self.setVSDivEvents( );
    // ... and remove the click listener for this item.
    Core.removeEventListener( shoeItem, "click", self.vsDivClickListener );
    self.currElevation = itemNo;
    // Finally, show the appropriate options panel.    
    selectOptionFromGroup( panelName, itemNo, numItems );
    return false;
  },
  
  resetVSDivImages: function( )
  {
    var self = wm_Cfgr;
    for ( var i = 0; i < self.numElevations; i++ ) {
      // Get hold of the button image ...
      var btnImage = document.getElementById( 'shoe_elevation_next' + i );
      // ... and swap in the 'off' version of the image.
      if ( btnImage ) {
        btnImage.src = btnImage.src.replace( /Button_On/,'Button_Off' );
        // "images/Button_Off" + j + ".jpg";
      }
    }
  },
  
  setVSDivBtn: function( itemNo, isOn )
  {
    // Get hold of the button image ...
    var btnImage = document.getElementById( 'shoe_elevation_next' + itemNo );
    // ... and swap in the appropriate version of the image.
    if ( btnImage ) {
      btnImage.src = ( isOn ) ? btnImage.src.replace( /Button_Off/,'Button_On' ) : btnImage.src.replace( /Button_On/,'Button_Off' );
    }
  },
  
  vsDivOverListener: function( event )
  {
    var self = wm_Cfgr;
    var itemNo = self.getElevItemNo( event );
    if ( itemNo != self.currElevation ) {
      // Get hold of the button image ...
      var btnImage = document.getElementById( 'shoe_elevation_next' + itemNo );
      // ... and swap in the 'over' version of the image.
      if ( btnImage ) {
        btnImage.src = btnImage.src.replace( /Button_Off/,'Button_On' );
      }
    }
    levelOneSlideOut( itemNo );
    Core.stopPropagation( event );
  },
  
  vsDivOutListener: function( event )
  {
    var self = wm_Cfgr;
    // Do mouseout for button image.
    var itemNo = self.getElevItemNo( event );   
    if ( itemNo != self.currElevation ) {
      // Get hold of the button image ...
      var btnImage = document.getElementById( 'shoe_elevation_next' + itemNo );
      // ... and swap in the 'over' version of the image.
      if ( btnImage ) {
        btnImage.src = btnImage.src.replace( /Button_On/,'Button_Off' );
      }
    }
    // Then work out if the panel needs to slide back ...
    // Work out where the mouse is positioned.
    var mousePosition = wm_Screen.getCursorPosition( event );
    var posX = mousePosition[0];
    var posY = mousePosition[1];
    // ... and determine whether the mouse pointer is within the View Selection Panel.
    if ( posX >= self.xMax || posX <= self.xMin || posY >= self.yMax || posY <= self.yMin ) {
      levelOneSlideBack();
    }
    Core.stopPropagation( event );
    return false;
  },
  
  setShoePanelEvents: function( panelID )
  {
    var self = wm_Cfgr;
    // Set mouse over behaviours for image buttons.
    var thePanel = document.getElementById( panelID );
    self.setPanelItemEvents( thePanel );
  },
  
  setPanelItemEvents: function( thePanel )
  {
    var self = wm_Cfgr;
    if ( thePanel ) {
      // Get hold of all the DIVs within this element.
      var aDivs = thePanel.getElementsByTagName( "DIV" );
      for ( var i = 0; i < aDivs.length; i++ ) {
        var cDiv = aDivs[i];
        if ( Core.hasClass( cDiv, "shoe_panel_item" ) ) {
          Core.addEventListener( cDiv, "click", self.panelClickListener );
          Core.addEventListener( cDiv, "mouseover", self.panelOverListener );
          Core.addEventListener( cDiv, "mouseout", self.panelOutListener );
        }
      }
    }
  },
  
  panelOverListener: function( event )
  {
    var self = wm_Cfgr;
    var itemNo = self.getShoeItemNo( event );
    highlite( itemNo );
    Core.stopPropagation( event );
  },
  
  panelOutListener: function( event )
  {
    var self = wm_Cfgr;
    var itemNo = self.getShoeItemNo( event );
    lowlite( itemNo );
    Core.stopPropagation( event );
  },
  
  getShoeItemNo: function( event )
  {
    // Get the source element from the event ...
    var thisElement = wm_Event.getEventSrc( event );
    // Get hold of the shoe item number ...
    var shoeItem = thisElement;
    while ( shoeItem.tagName.toUpperCase() != "DIV" ) {
      shoeItem = shoeItem.parentNode;
    }
    return shoeItem.id.slice( -2 );
  },
  
  panelClickListener: function( event )
  {
    var self = wm_Cfgr;
    // Get the source element from the event ...
    var thisElement = wm_Event.getEventSrc( event );
    // Get hold of the shoe item number ...
    var shoeItem = thisElement;
    while ( shoeItem.tagName.toUpperCase() != "DIV" ) {
      shoeItem = shoeItem.parentNode;
    }
    var itemNo = shoeItem.id.slice( -1 );
   // alert(shoeItem.id + "position");
    // Get hold of the shoe item position
    var position = document.getElementById(shoeItem.id + "position").value;
    // change blaze position
    swing(position);
    // dummy server call to keep session alive
    keepSessionAlive();
    // Get hold of the panel number from the parent DIV ...
    var parentDiv = shoeItem.parentNode;
    while ( parentDiv.id.search(/^shoe_panels_div/) == -1 ) {
      parentDiv = parentDiv.parentNode;
    }
    var panelNo = parentDiv.id.slice( -1 );
    // ... and the number of items in the list.
    var aContainer = shoeItem.parentNode;
    var numItems = aContainer.getElementsByTagName( "DIV" ).length;
    var panelName = self.shoePanelPrefix + panelNo;
    // Restore the click listeners for all other items in this panel ...
    self.setPanelItemEvents( parentDiv );
    // ... and remove the click listener for this item.
    Core.removeEventListener( shoeItem, "click", self.panelClickListener );
    Core.removeEventListener( shoeItem, "mouseover", self.panelOverListener );
    Core.removeEventListener( shoeItem, "mouseout", self.panelOutListener );
    // Finally, show the appropriate options panel.    
    showOptionsPanel( panelName, itemNo, numItems );
    return false;
  },
  
  setSwatchEvents: function( swatch )
  {
    var self = wm_Cfgr;
    for ( var i = 0; i < swatch.childNodes.length; i++ ) {
      var aChild = swatch.childNodes[i];
      if ( ( aChild.nodeType == 1 ) && ( aChild.tagName.toUpperCase() == "LI" ) ) {
   //     Core.addEventListener( aChild, "click", self.clickSwatchListener );
        Core.addEventListener( aChild, "mouseover", self.mouseOverSwatchListener );
        Core.addEventListener( aChild, "mouseout", self.mouseOutSwatchListener );
      }
    }
  },

	setSwatchEventsFlag: function( swatch )
	{
		var self = wm_Cfgr;
		for ( var i = 0; i < swatch.childNodes.length; i++ ) {
			var aChild = swatch.childNodes[i];
			if ( ( aChild.nodeType == 1 ) && ( aChild.tagName.toUpperCase() == "LI" ) ) {
  //			Core.addEventListener( aChild, "click", self.clickSwatchListenerFlag );
				Core.addEventListener( aChild, "mouseover", self.mouseOverSwatchListenerFlag );
				Core.addEventListener( aChild, "mouseout", self.mouseOutSwatchListenerFlag );
			}
		}
	},

  clickSwatchListener: function(event)
  {
    
      var self = wm_Cfgr;
      var imagePath = "";
      if(self.brandingName == 'Originals') {
        imagePath = "/global/configurator/originals/images/";
      } else {
        imagePath = "/global/configurator/sports/images/";
      }
      // Get the source element from the event ...
      var swatchImg = self.getSwatchImage( event );
      // ... and using its ALT text.
      var thisValue = swatchImg.alt;
      // Finally, update the display field ...
      var fieldName = self.getSwatchName( swatchImg );
      var displayField = document.getElementById( fieldName + "_selected" );
      displayField.childNodes[0].nodeValue = thisValue;
      // ... and set the selected state.
      var parent = swatchImg.parentNode;
      while ( parent.tagName.toUpperCase() != "LI" ) {
        parent = parent.parentNode;
      }
      var selectedItem = parent;
      var itemList = selectedItem.parentNode;
      self.setSwatchEvents( itemList );
      for ( var k = 0; k < itemList.childNodes.length; k++ ) {
        var aItem = itemList.childNodes[k];
        if ( ( aItem.nodeType == 1 ) && ( aItem.tagName.toUpperCase() == "LI" ) ) {
          aItem.style.backgroundImage = "url(" + imagePath + "ColorSelect.png)";
        }
      }
      selectedItem.style.backgroundImage = "url(" + imagePath + "ColorSelect_over.png)";
//      Core.removeEventListener( selectedItem, "click", self.clickSwatchListener );
      Core.removeEventListener( selectedItem, "mouseover", self.mouseOverSwatchListener );
      Core.removeEventListener( selectedItem, "mouseout", self.mouseOutSwatchListener );
      selectedItem.blur();
    
    
    Core.preventDefault( event );
  },
  
	
	clickSwatchListenerFlag: function(event)
	{
  
		var self = wm_Cfgr;	
    var imagePath = "";
      if(self.brandingName == 'Originals') {
        imagePath = "/global/configurator/originals/images/";
      } else {
        imagePath = "/global/configurator/sports/images/";
      }
		// Get the source element from the event ...
		var swatchImg = self.getSwatchImage( event );
		// ... and using its ALT text.
		var thisValue = swatchImg.alt;
		// Finally, update the display field ...
		var fieldName = self.getSwatchName( swatchImg );
		var displayField = document.getElementById( fieldName + "_selected" );		
		displayField.childNodes[0].nodeValue = thisValue;
		// ... and set the selected state.
		var parent = swatchImg.parentNode;
		
		while ( parent.tagName.toUpperCase() != "LI" ) {
  		parent = parent.parentNode;
  	}
		var selectedItem = parent;
		var itemList = selectedItem.parentNode;
		self.setSwatchEventsFlag( itemList );
		for ( var k = 0; k < itemList.childNodes.length; k++ ) {
			var aItem = itemList.childNodes[k];
			if ( ( aItem.nodeType == 1 ) && ( aItem.tagName.toUpperCase() == "LI" ) ) {
    		aItem.style.backgroundImage = "url(" + imagePath + "flagselect.png)";	/*on mouse over*/		
			}
		}
		selectedItem.style.backgroundImage = "url(" + imagePath + "flagselect_over.png)";/*on mouse click*/
//		Core.removeEventListener( selectedItem, "click", self.clickSwatchListenerFlag );
		Core.removeEventListener( selectedItem, "mouseover", self.mouseOverSwatchListenerFlag );
		Core.removeEventListener( selectedItem, "mouseout", self.mouseOutSwatchListenerFlag );
		selectedItem.blur();
    
		Core.preventDefault( event );
	},

  mouseOverSwatchListener: function(event)
  {
    var self = wm_Cfgr;
    // Get hold of the button image ...
    var parentItem = self.getParentItem( event );
    // ... and swap in the 'over' version of the image.
    if ( parentItem ) {
      var bgURL = Core.getComputedStyle( parentItem, "backgroundImage" );
       parentItem.style.backgroundImage = bgURL;
      parentItem.style.backgroundImage = parentItem.style.backgroundImage.replace( /.png\)$/,'_over.png)' );
    }
  },
  
  mouseOutSwatchListener: function( event )
  {
    var self = wm_Cfgr;
    // Get hold of the button image ...
    var parentItem = self.getParentItem( event );
    // ... and swap in the normal version of the image.
    if ( parentItem ) {
      parentItem.style.backgroundImage = parentItem.style.backgroundImage.replace( /_over.png\)$/,'.png)' );
    }
  },
	mouseOverSwatchListenerFlag: function(event)
	{
		var self = wm_Cfgr;
		// Get hold of the button image ...
		var parentItem = self.getParentItem( event );
		// ... and swap in the 'over' version of the image.
		if ( parentItem ) {
			var bgURL = Core.getComputedStyle( parentItem, "backgroundImage" );
      parentItem.style.backgroundImage = bgURL;
			parentItem.style.backgroundImage = parentItem.style.backgroundImage.replace( /.png\)$/,'_over.png)' );
		}
	},
	
	mouseOutSwatchListenerFlag: function( event )
	{
		var self = wm_Cfgr;
		// Get hold of the button image ...
		var parentItem = self.getParentItem( event );
		// ... and swap in the normal version of the image.
		if ( parentItem ) {
			parentItem.style.backgroundImage = parentItem.style.backgroundImage.replace( /_over.png\)$/,'.png)' );
		}
	},

  getSwatchImage: function( event )
  {
    // Get the source element from the event ...
    var thisElement = wm_Event.getEventSrc( event );
    while ( thisElement.tagName.toUpperCase() != "IMG" ) {
      thisElement = thisElement.childNodes[0];
    }
    return thisElement;
  },
  
  getSwatchName: function( swatchImg )
  {
    // Get the source element from the event ...
    var parent = swatchImg.parentNode;
    while ( parent.tagName.toUpperCase() != "LI" ) {
      parent = parent.parentNode;
    }
    var theSwatch = parent.parentNode;
    var swatchName = theSwatch.id.replace( /^swatch_/, '' );
    return swatchName;
  },
  
  setBtnEvents: function( buttonID )
  {
    var self = wm_Cfgr;
    // Set mouse over behaviours for image buttons.
    var theButton = document.getElementById( buttonID );
    if ( theButton ) {
      Core.addEventListener( theButton, "mouseover", self.mouseOverListener );
      Core.addEventListener( theButton, "mouseout", self.mouseOutListener );
      // TO DO: assign mouseUpListener adn mouseDownListener ...
      // Core.addEventListener( theButton, "mouseup", self.mouseUpListener );
      // Core.addEventListener( theButton, "mousedown", self.mouseDownListener );
    }
  },
  
  getButtonImage: function( event )
  {
    // Get the source element from the event ...
    var srcElement = wm_Event.getEventSrc( event );
    var btnImage;
    if ( srcElement.tagName.toUpperCase() == "A" ) {
      // If it's the anchor, we need to find the image ...
      for( var i=0; i < srcElement.childNodes.length; i++ ) {
          if ( srcElement.childNodes[i].tagName.toUpperCase() == 'IMG' ) {
            btnImage = srcElement.childNodes[i];
            break;
          }
      }
    } else {
      btnImage = srcElement;
    }
    return btnImage;
  },
  
  getParentItem: function( event )
  {
    // Get the source element from the event ...
    var srcElement = wm_Event.getEventSrc( event );
    var listItem;
    if ( srcElement.tagName.toUpperCase() == "LI" ) {
          return srcElement;
    }
    var parent = srcElement.parentNode;
    while ( parent.tagName.toUpperCase() != "LI" ) {
      parent = parent.parentNode;
    }
    listItem = parent;
    return listItem;
  },
  
  mouseOverListener: function(event)
  {
    var self = wm_Cfgr;
    // Get hold of the button image ...
    var btnImage = self.getButtonImage( event );
    // ... and swap in the 'over' version of the image.
    if ( btnImage ) {
      btnImage.src = btnImage.src.replace( /.png$/,'_over.png' );
    }
  },
  
  mouseOutListener: function( event )
  {
    var self = wm_Cfgr;
    // Get hold of the button image ...
    var btnImage = self.getButtonImage( event );
    // ... and swap in the normal version of the image.
    if ( btnImage ) {
      btnImage.src = btnImage.src.replace( /_over.png$/,'.png' );
    }
  },

  mouseDownListener: function(event)
  {
    var self = wm_Cfgr;
    // Get hold of the button image ...
    var btnImage = self.getButtonImage( event );
    // ... and swap in the 'over' version of the image.
    if ( btnImage ) {
      btnImage.src = btnImage.src.replace( /.png$/,'_down.png' );
    }
  },
  
  mouseUpListener: function(event)
  {
    var self = wm_Cfgr;
    // Get hold of the button image ...
    var btnImage = self.getButtonImage( event );
    // ... and swap in the 'over' version of the image.
    if ( btnImage ) {
      btnImage.src = btnImage.src.replace( /_down.png$/,'.png' );
    }
  },
  
  resizeListener: function( )
  {
    var self = wm_Cfgr;
    // Re-calculate the boundaries of the View Selection Panel.
    self.getVSDivBounds( );
  },
  
  setRadioToggleEvents: function( radioButton )
  {
    var self = wm_Cfgr;
    // Set click behaviour for radio buttons.
    if ( radioButton ) {
      Core.addEventListener( radioButton, "click", self.radioclickListener );
    }
  },
  
  radioclickListener: function(event)
  {
    var self = wm_Cfgr;
    // Get the source element from the event ...
    var srcElement = wm_Event.getEventSrc( event );
    
    // get element to toggle. take srcElement id upto underscore and append '_swatches' for element to toggle.
    var idx = srcElement.id.indexOf('_');
    if (idx > -1) {
      var elementId = srcElement.id.substr(0,idx) + '_swatches';
      var swatchContainer = document.getElementById(elementId);
      swatchContainer.style.display = (srcElement.checked && srcElement.value.toLowerCase() == 'yes') ? 'block' : 'none' ;
    }
  },
  
  setInfoBtnEvents: function( button )
  {
    var self = wm_Cfgr;
    var parent = button.parentNode;
      Core.addEventListener( parent, "click", self.clickInfoButtonListener );
  },
  
  clickInfoButtonListener: function(event)
  {
    var self = wm_Cfgr;
  
    document.getElementById("ov_info_msg").innerHTML=''; 
    
    // Get the source element from the event ...
    var srcElement = wm_Event.getEventSrc( event );

    populateInfoOverlay(srcElement);
    wm_Panel.show('ov_generic');
  } 
  
};

Core.start(wm_Cfgr);

function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}