// JavaScript Document

//JLib dependancies being written dynamically
document.write('<script src="/js/mootools.js" type="text/javascript"></script>');
document.write('<script src="/js/JTools.js" type="text/javascript"></script>');
document.write('<link rel="stylesheet" type="text/css" href="/js/toolLayout.css" />');

// Global variable Instanciation

//debugging variables
var debug = false; var bugReport = "Debug Output Window";
var jQdebug = false;
var imageListDebug = true;
var imageListOutput;

//under score delimit locations
var fitment = 0;
var stylePlc = 1;
var colorPlc = 2;
var plcHolder = 3;
var price = 4;
var pNum = 5;
var eXdetail = 6;

//custom phase text variables
var fitPhaseText = "Select Vehicle";
var stylePhaseText = "Select Style";
var optionText = "Select Color";

//custom float modification
var enableFloat = true;

//browser detection
var nscp = true; //true if browser is a standards compliant browser
if( navigator.appName == "Microsoft Internet Explorer" ) nscp = false;
var browserVersion = navigator.appVersion;

// phase skipping flags
var styleSkip = false;
var colorSkip = false;
var styleNone = false;
var colorNone = false;

// Flags to detect Specific Lines
// These are added in for specific attributes that may
// only be used for specific lines
var averyFlag = false;

// Multiple Tool flags
// the script manipulates elements within the tool div
// and these elements can vary with differant html sets
var jbasicFlag = false;
var jDisplayFlag = false;

//tool option flags
var jAnimateFlag = true; //dosnt work yet
var customDrops = false;
var multiColorFlag = false;

// Some Tool Sets utilize Images in the extra details place holder
// with in the Options Array.
// the URL can some times hold an underscore '_' which is used as a delimiter to break out
// important Array information this array stores those troublesome URL's untill they are needed.
// the image URL position in the array is replaced with a number which corresponds to the location
// in the imageList array
var imageList = new Array;
var htmlList = new Array; //not implimented, will be used for performance enhancement
var exDetailsList = new Array;

//global flags to force the Tool into certain states
var firstClick = true;
var firstTimeFill = new Array( true, true );
var selectFlags = new Array( false , false );
var textSize = '130%';
var oneImage = false;

// Library functions

//main driver of the Selection Tool, this will:
//run start up processes
//execute phase by phase handeling
//initiate animation sequences via phasing
//populate dropdowns with array information
//call processes for Detail Rendering into elements
function setPhase(phase){
    bugReport = "";
   
   // set variables to control the differant phases ( made solely to make the switch easier to understand )
   var selcFitment = 1;
   var selcStyle = 2;
   var selcColor = 3;
   var showFinal = 4;
   var showMultiColor = 5;
   
   // instanciation of all major element variable prototypes
   var SelectionTool = $( "SelectionTool" );
   // div ( this is the tag that holds the entire tool )
   var fits = $( "fits" );
   // Select Box
   var styleSelect = $( "styleSelect" );
   // Select Box
   var styleDetails;
   if(jDisplayFlag) {
    styleDetails = $( "details" );
    var imgDisp_cont = $('imgDisp_content');
    var imgList_cont = $('imgSelc_content');
   }else styleDetails = $( "styleDetails" );
   // Text Area
   var colorSelect = $( "colorSelect" );
   // Select Box
   var mColor1 = $( "mcolorSelectMid" );
   // Select Box
   var mColor2 = $( "mcolorSelectSide" );
   // Select Box
   var details = $( "details" );
   if(jDisplayFlag) var fitTag = $( "FitTagWrap" );
   // Text Area
   var jTcart = $( "jTcart" );
   // form input button
   var phaseText = $( "phaseText" );
   // font text
   var textPhase = $("textPhase"); 
    
   //add to cart detection Flag
   var cartFlag = false;
   
   var checkOutReady = false; //flag to detect if the user is ready to go to cart
   var imgIndex; //exstracted imgIndex from the imgList
   
   // Tool start up code ( executes only when tool if first used )
   if( firstClick ){

      if( debug ) bugReport += "Debug Mode Active"+"\n";
      
      //gets rid of that annoying "Details" title attribute
      $$('div.value').each(function(item){
             if(item.title == 'Details') item.title = '';
      });
      $$('div.Title').each(function(item){
             if(item.title == 'Details') item.title = '';
      });
      
      //set float state
      if(!enableFloat){
        SelectionTool.setStyle('float', 'none');
      }
      
      first = startUp( options_array ); //handles any start up array correction or excess field handleing

      // attempts to detect the presense of an addtocart element on the page
      try{
         if( $( "addtocart" ).id ) cartFlag = true;
      }
      catch( err ){
         cartFlag = false;
      }
      
      var jTcartForm = $('jTcartForm');
      if( cartFlag ){
         //set specific addtocart form infomation that hasnt already been written
         jTcart.className = 'add';
         jTcart.value = "Add to Cart";

         jTcartForm.style.floatStyle = 'right';
         
         
         jTcartForm.style.paddingLeft = '265px';
      }
      
            
      //slice out the IE browser Version
      if(!nscp){
          var sIndex,eIndex;
          sIndex = browserVersion.search(/msie/i);
          browserVersion = browserVersion.slice(sIndex,browserVersion.length);
          browserVersion = browserVersion.slice(5,8);
          browserVersion = parseFloat(browserVersion);
      }

      //set a custom textsize and float style for the streetbeat site
      if(window.location.href.search(/streetbeat/i) > 0){
          textSize = '130%';
          SelectionTool.setStyle('float', 'none');
      }
      
      //Event handlers
      //Fitment Select events
      fits.addEvent('mouseleave', function(){
        fits.blur();
      });
      fits.addEvent('mouseenter', function(){
        fits.focus();
      });
      //style Selection events
      styleSelect.addEvent('change', function(){
         setPhase(3);
         getDetails( options_array, fits.selectedIndex, styleSelect.selectedIndex, styleDetails );
      });
      //Color Select Events
       colorSelect.addEvent('change', function(){
        if(colorSelect.selectedIndex == 0){
            checkOutReady = false; setPhase(3);
        }else setPhase( 4 );
      });
      //MultiColor Events
      mColor1.addEvent('change',function(){
            selectFlags[0] = true;
            mColor1.style.backgroundColor = "#c9d8eb";
            if( this.selectedIndex == 0 ) this.selectedIndex ++ ;
            checkOutReady = multiSelectionHandler(selectFlags,phaseText);
            multiColor( colorSelect.selectedIndex, colorSelect.options, true );
      });
      mColor2.addEvent('change',function(){
            selectFlags[1] = true;
            mColor2.style.backgroundColor = "#c9d8eb";
            if( this.selectedIndex == 0 ) this.selectedIndex ++ ;
            multiColor( colorSelect.selectedIndex, colorSelect.options, true );
            checkOutReady = multiSelectionHandler(selectFlags,phaseText);
      });
   }

   // alerts to catch any attempt to move on with out making a selection first
   switch( phase ){
      case selcStyle :
         if( fits.selectedIndex == - 1 ){
            alert( "Please select a Fitment" );
            phase =9 ;
         }
         break;
      case selcColor :
         if( styleSelect.selectedIndex == - 1 ){
            alert( "Please select a Style" );
            phase =9 ;
         }
         break;
   }
   
   
   checkOutReady = false;
   
   if( debug ) bugReport += "Phase Shift Detected: "+phase+"\n";
   
   // ---------------------------------------------------- move to fitment selection ----------------------------------------------------
   if( phase == selcFitment ){
      
      extraDetailsHandler(true,0,0,0);
      checkOutReady == false;
      phaseText.innerHTML = "<h2 id='textPhase' style='font-size: "+textSize+"'>"+fitPhaseText+"</h2>";
      populate( fits, options_array, fits, false );
      // populates the fitment selection box
      fits.setStyle('width', 'auto');
      if(nscp){
        if(fits.offsetWidth < 360){
            fits.setStyle('width', 360);
        }
      }
      
      fits.selectedIndex = - 1;
      styleSelect.selectedIndex = 0;
      phaseText.style.backgroundImage = "url(http://www.yourhotcar.com/sbcimages/_library/redBack.jpg)";
      
      
      // reset our skip / none flags
      styleSkip = false;
      styleNone = false;
      
      dispDetails( details, options_array, fits.selectedIndex, false, false );
      
      // display information in the details box
    
      // blurs and focus's the select box with mouse position
      // because you have to click inside the box to scroll with the mouse wheel
      // and this box has an onclick event
   }
   
   // ---------------------------------------------------- move to style selection ----------------------------------------------------
   if( phase == selcStyle ){
      if(jDisplayFlag){
        imgIndex = options_array[fits.selectedIndex][0][0].split("_");
        imgIndex = parseFloat(imgIndex[plcHolder]);
        if(imageList[imgIndex].length > 1 ){
                imgDisp_cont.innerHTML = '<li class="imgDisp_item"><span><center><img onclick="Enlarge(this,false);" id="slide0" src="'+imageList[imgIndex][0]+'" title="Click To Enlarge" alt="Click To Enlarge" /></center></span></li>';
            }else{
                imgDisp_cont.innerHTML = '<li class="imgDisp_item"><span><center><img onclick="Enlarge(this,false);" id="slide0" src="'+imageList[imgIndex]+'" title="Click To Enlarge" alt="Click To Enlarge" /></center></span></li>';
                imgList_cont.innerHTML = '<li class="imgSelc_item" id="thumb0LI"><img id="thumb0" src="'+imageList[imgIndex]+'"  /></li>'; 
            }
      }
      extraDetailsHandler(true,0,0,0);
      extraDetailsHandler(false,fits.selectedIndex,0,0);
      elementArray = new Array;
      checkOutReady = false;
      fits.blur();
      phaseText.innerHTML = "<h2 id='textPhase' style='font-size: "+textSize+"'>"+stylePhaseText+"</h2>";
      populate( styleSelect, options_array, fits, true );
      // fills the style select box
      // sets jbasic specific information, and navigator specific events
      
      getDetails( options_array, fits.selectedIndex, styleSelect.selectedIndex, styleDetails );
      
      dispDetails( details, options_array, fits.selectedIndex, styleSelect.selectedIndex, false );
      if( ! styleSkip ) styleSelect.selectedIndex = - 1;
      phaseText.style.backgroundImage = "url(http://www.yourhotcar.com/sbcimages/_library/redBack.jpg)";
      styleDetails.value = stylePhaseText;
      colorSkip = false;
      colorNone = false;
      if( styleSkip ) {
        styleSelect.selectedIndex = 0;
        getDetails( options_array, fits.selectedIndex, styleSelect.selectedIndex, styleDetails );
        setAnimationPhase(phase);
        phase ++ ;
      }
   }
   
   // ---------------------------------------------------- move to Color selection ----------------------------------------------------
  
   if( phase == selcColor ){
        elementArray = new Array;
        checkOutReady = false;
        /*Image Handeling Processes*/
        if(jDisplayFlag){
            imgIndex = options_array[fits.selectedIndex][styleSelect.selectedIndex][0].split("_");
            imgIndex = parseFloat(imgIndex[plcHolder]);
            if(imageList[imgIndex].length > 1 ){
                oneImage = false;
                var Disphtml = '';
                var Listhtml = '';
                imageList[imgIndex].each(function(item, index){
                      Disphtml += '<li class="imgDisp_item"><span><center><img onclick="Enlarge(this,false);" id="slide'+index+'" src="'+item+'" title="Click To Enlarge" alt="Click To Enlarge" /></center></span></li>';
                      Listhtml += '<li class="imgSelc_item" id="thumb'+index+'LI"><img id="thumb'+index+'" src="'+item+'"  /></li>';
                });
                
                imgDisp_cont.set('html', Disphtml);
                imgList_cont.set('html', Listhtml);
                
            }else{
                oneImage = true;
                imgDisp_cont.innerHTML = '<li class="imgDisp_item"><span><center><img onclick="Enlarge(this,false);" id="slide0" src="'+imageList[imgIndex]+'" title="Click To Enlarge" alt="Click To Enlarge" /></center></span></li>';
                imgList_cont.innerHTML = '<li class="imgSelc_item" id="thumb0LI"><img id="thumb0" src="'+imageList[imgIndex]+'"  /></li>'; 
            }
            initCarousel();
            if(!nscp){
                $('imgDisp').addEvent('click',function(){
                        Enlarge($('slide'+JSlide.highlightedIndex), false);
                    });
            }
        }
        /*End: Image Handeling*/
     
      checkOutReady = false;
      clearDropdown( colorSelect );
      addToDropdown( colorSelect, optionText );
      phaseText.innerHTML = "<h2 id='textPhase' style='font-size: "+textSize+"'>"+optionText+"</h2>";
      phaseText.style.backgroundImage = "url(http://www.yourhotcar.com/sbcimages/_library/redBack.jpg)";
      populate( colorSelect, options_array, fits, styleSelect.selectedIndex );
     
      dispDetails( details, options_array, fits.selectedIndex, styleSelect.selectedIndex, colorSelect.selectedIndex - 1 );
      if( colorSkip ) {colorSelect.style.backgroundColor = "#c9d8eb";colorSelect.selectedIndex = 1; if(colorSkip && !colorNone) setAnimationPhase(phase);phase ++ ;}
   }
   // ---------------------------------------------------- move to Final Display ----------------------------------------------------
  multiColorFlag = false;
   if( phase == showFinal ){
      checkOutReady = true;  
      if( multiColor( colorSelect.selectedIndex, colorSelect.options ) == true ){
         phase = showMultiColor;
         checkOutReady = false;
         multiColorFlag = true;
      }
      // CoverCraft Only
      colorSelect.blur();
      dispDetails( details, options_array, fits.selectedIndex, styleSelect.selectedIndex, colorSelect.selectedIndex - 1, true );   
   }
   // ---------------------------------------------------- move to MultiColor selection ----------------------------------------------------
  
   // CoverCraft Only
   if( phase == showMultiColor ){
      selectFlags = new Array( false , false );
      checkOutReady = false;
      addToDropdown( mColor1, "Select the Middle Color" );
      addToDropdown( mColor2, "Select the Side Color" );
   
      //blue mColor1.style.backgroundColor = "#c9d8eb";
      mColor1.style.backgroundColor = "#cf3533";
      mColor2.style.backgroundColor = "#cf3533";

      clearDropdown( mColor1 );
      for( i = 0; i < colorSelect.options.length; i++ ){
         str = colorSelect.options[i].text.split( "$" );
         if( colorSelect.options[i].text.search( optionText ) >= 0 ){addToDropdown( mColor1, "Select the Middle Color" );}
         if( colorSelect.options[i].text.search( /multi-color/i ) < 0 && colorSelect.options[i].text.search( optionText ) < 0 ) addToDropdown( mColor1, str[0] );
      }

      multiColor( colorSelect.selectedIndex, colorSelect.options, true );

      clearDropdown( mColor2 );
      for( i = 0; i < colorSelect.options.length; i++ ){
         str = colorSelect.options[i].text.split( "$" );
         if( colorSelect.options[i].text.search( optionText ) >= 0 ){addToDropdown( mColor2, "Select the Side Color" );}
         if( colorSelect.options[i].text.search( /multi-color/i ) < 0 && colorSelect.options[i].text.search( optionText ) < 0 ) addToDropdown( mColor2, str[0] );
      }
      multiColor( colorSelect.selectedIndex, colorSelect.options, true );
             
      checkOutReady = multiSelectionHandler(selectFlags,phaseText);
      phaseText.style.backgroundImage = "url(http://www.yourhotcar.com/sbcimages/_library/redBack.jpg)";
      
   }
    
   if(phase == 8){//multicolor's finisher
    checkOutReady = true;
    multiColorFlag = true;
   }
   
   if(checkOutReady){
     phase = 4;
     if( colorSelect.selectedIndex > 0 ) {
         priceDisp = options_array[fits.selectedIndex][styleSelect.selectedIndex][colorSelect.selectedIndex-1].split("_");
         priceDisp = priceDisp[price];
         phaseText.innerHTML = "<h2 id='textPhase' style='font-size: "+textSize+"'>Ready for check out <font align='right' style='color:green;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$"+priceDisp+"</font></h2>";
         phaseText.style.backgroundImage = "url(http://www.yourhotcar.com/sbcimages/_library/blueBack.jpg)";
     }
   }else{
     phaseText.style.backgroundImage = "url(http://www.yourhotcar.com/sbcimages/_library/redBack.jpg)"; 
   }

   if(phase!=9) setAnimationPhase(phase);

   if( debug ){
     debugOutput();
   }
}

function debugOutput(){
    jQdebug = true; // temporary
    imageListDebug = true; // temporary
    var reportMade = false;
    var outputWinPercents = new Array;
    webid = $("webid");
    
    try{
       if( $("BugReport").id ){
         reportMade = true; 
       }else alert("Creating debug Output Window");
    }catch(err){
    }

    if( !reportMade ){
      webid.innerHTML += '<textarea id="BugReport" style="position:absolute; left:0%; bottom:0%;height:150px;width:100%;"></textarea>';
      if(jQdebug) webid.innerHTML += '<textarea id="jQdisp" style="position:absolute; right:0%; bottom:0%;height:150px;width:500px;"></textarea>';
      if(imageListDebug) webid.innerHTML += '<textarea id="iLdisp" style="float:right; right:0%; top:0%;height:150px;width:300px;">Images</textarea>';
      webid.style.display = "";
      reportMade = true;
    }

    if(reportMade) $("BugReport").value = bugReport; 
    if(reportMade && imageListDebug) $("iLdisp").value = imageListOutput;
   
}

// [f1] Gets the information thats passed on to the shopping cart
// Paramaters :
// * array = the information array
// * setElement = the element holding the fitment selection made
// * styleElement = the element holding the style selection made
// * colroElement the element holding the colorselection made
function setJQVars( array, bug ){
   if( debug ) bugReport += "Attempting to Push Variables into input forms\n";
   var output = new Array;
   // the final out put of the function
   var setNum = $("fits").selectedIndex;

   // the fitment selection
   var styleNum = $("styleSelect").selectedIndex;
   // the style selection
   var colorNum = $("colorSelect").selectedIndex-1;
   // the color selection
   

   // bug catch if the tool hasnt been started yet and they hit add to cart it will default
   // to the first possible selections
   if ( setNum < 0 ){
      setNum = 0;styleNum = 0;colorNum = 0;
   }

   if ( styleNum < 0 ){
      styleNum = 0;colorNum = 0;
   }

   if ( colorNum < 0 ){
      colorNum = 0;
   }

   var str;
   // temporary string holder to break out specific information via delimiter

   str = array[setNum][0][0].split( "_" );
   // split the first style for fitment information ( it holds all the other information as well as the first color )

   output[fitment] = str[fitment];
   // sets the outputs fitment
   str = array[setNum][styleNum][0].split( "_" );
   // split the first color for information ( it holds all the other information as well as the first color )
   output[stylePlc] = str[stylePlc];
   // sets the outputs style
   output[plcHolder] = "X";
   // sets outputs placeholder information ( used to hold images )

   try{
   str = array[setNum][styleNum][colorNum].split( "_" ) // splits the selected color to get the color information
   }catch(err){
   }
   
   output[colorPlc] = str[colorPlc];
   // sets the outputs color

   // COVER CRAFT ONLY SECTION
   if( output[colorPlc] == "Multi-Color" ){
      
      // avoids an index of 0 for the multicolor drop boxes ( index 0 is "select your color" ) so it defaults to the first color selection
      var mColor1 = $( "mcolorSelectMid" );
      var mColor2 = $( "mcolorSelectSide" );
      var index1 = mColor1.selectedIndex;
      var index2 = mColor2.selectedIndex;
      
      if( mColor1.selectedIndex <= 0 ){
         index1 = 1 ;
      }
      if( mColor2.selectedIndex <= 0 ){
         index2 = 1 ;
      }
      
      // add the extra to colors
      try{
      output[colorPlc] += " Middle: " + mColor1.options[index1].text + " Side: " + mColor2.options[index2].text;
      }catch(err){
      }
   }

   output[price] = str[price];
   // sets the outputs price
   output[pNum] = str[pNum];
   // sets the outputs partnumber
   
   output[price] = parseFloat( output[price] );
   try{
    var pagePrice = parseFloat($('price').innerHTML.replace('$',''));
    if(output[price] < pagePrice) {output[price] = pagePrice;}
   }catch(err){
   }

   if( output[stylePlc] == "none" ) {
      output[stylePlc] = "";
   }
   if( output[colorPlc] == "none" ) {
      output[colorPlc] = "";
   }

   var bugStr = "Variables being passed into the Order Cart:\n" + "Manufacturer Part: " + output[pNum] + "\nFitment: " + output[fitment] + "\nStyle: " + output[stylePlc] + "\nColor: " + output[colorPlc] + "\nPrice: " + output[price] + "\nExtra Info: " + output[plcHolder];
   if( bug ) alert( bugStr );
   
   if(jQdebug){
     jQdisp = $("jQdisp");
     jQdisp.value = bugStr;
   }
   
   try{
        
        var allForms = $(document.body).getElements('Form');
        
        for(i=0;i<allForms.length;i++){            
           if(allForms[i].action.search(/cart/) > -1){
              sCartInputs = allForms[i].getChildren();
              if(sCartInputs.length > 1) {
                sCartInputs[0].value = $('addtocart').getChildren()[0].value ;
                sCartInputs[1].value = "Manufacturer Part: " + output[pNum] ;
                sCartInputs[2].value = output[fitment] + "<br>" + output[stylePlc] + "<br>" + output[colorPlc] ;
                sCartInputs[3].value = output[price] ;
              }else{
                sCartInputs = sCartInputs[0].getChildren();
                sCartInputs[1].value = "Manufacturer Part: " + output[pNum] ;
                sCartInputs[2].value = output[fitment] + "<br>" + output[stylePlc] + "<br>" + output[colorPlc] ;
                sCartInputs[3].value = output[price] ;
              }
           }
        }
        
        
    
   }catch(err){
     if(bug) {
         if(nscp){
             alert("No add to cart form located on this page\nCreating jQuery varible debug box");
             $("webid").innerHTML += '<textarea id="jQdisp" style="position:absolute; right:0%; bottom:0%;height:150px;width:500px;"></textarea>';
             jQdebug=true;
         }
     }
   }

}


// [f2] Get the Details that were data mined from the arrays ( used solely for organizing style details )
// Returns Displayable information
// Paramaters :
// * array = information array to derive display text from
// * setNum = fitment set ( for getting style List )
// * styleNum = style set ( for getting color List ) * OPTIONAL *
// * element = the textarea to fill with the formatted style information
function getDetails( array, setNum, styleNum , element ){
   var str;
   var sDetails;
   var output = new Array;
   // the formated text
   var slashHandler;

   if( debug ) bugReport += "Building Style Detail List\n";

   sDetails = array[setNum][styleNum][0].split( "_" );
   // retrieve the style information fromt he first index in our selected style

   str = sDetails[stylePlc].split( ";" );
   // break out each peice of the style that will be bullet pointed
   str[0] = " " + str[0];
   for( i = 0; i < str.length ; i ++ ){
      output += "*" + str[i] + "\n";
      // add a bullet point and a line break to each one of the style options
   }
    
   element.value = output;
   // fill the textarea with the newly formated style display


   return output;
}

//  ---------------------------------------

// [f2] Get the Details that were data mined from the arrays
// Returns raw string information
// Paramaters :
// * array = information array to derive display text from
// * setNum = fitment set ( for getting style List )
// * style = style set ( for getting color List ) * OPTIONAL *
// * colorNum = color selected ( for getting specific color information ) * OPTIONAL *
function getList( array, setNum, styleNum, colorNum ){
   var str;
   var output = new Array;
   if( ! colorNum ) colorNum = 0;
   // if the colorNum wasnt included 0 will be used to gather the info from the first postion in the array

   var checkStr = styleNum.toString();
   // bug avoidance ( since the compiler sees the number 1 and true as the same thing )

   if( checkStr == "true" ){
      // get a list of the style options
      styleNum = 0;
      // use 0 to get the first index of style information
      arrayL = getLength( array, setNum, true );
      // retreives the number of styles in the fitment set
      if( debug ) bugReport += "Attempting to retrieve Style List\n" ;
      for( i = 0; i < arrayL; i ++ ){
         // itterate threw the array using the fitment set number
         str = array[setNum][i][0].split( "_" );
         // break out information from the first index of the style
         output[i] = str[stylePlc];
         // fill output with the styles taken from the array
         // NOTE stylePlc stands for style placement. it holds the index of our style from the delimited string in the first option in our fitment set
         if( debug ) bugReport += "Retrieve " + output[i] +"\n";
      }
   }
   else if ( checkStr == "false" ){
      // get a list of the fitment options
      styleNum = 0;
      // looks at the first style for fitment information
      arrayL = getLength( array, setNum, false );
      // finds the number of fitments available
      if( debug ) bugReport += "Attempting to retrieve Fitment List\n" ;
      for( i = 0; i < arrayL; i ++ ){
         str = array[i][0][0].split( "_" );
         output[i] = str[fitment];
         // fills the output with the fitment information
         if( debug ) bugReport += "Retrieve " + output[i] +"\n";
      }
   }
   else{
      // gets a list of the colors availabe for the style selected
      arrayL = getLength( array, setNum, styleNum );
      // get the number of colors
      if( debug ) bugReport += "Attempting to retrieve Color List\n" ;
      for( i = 0; i < arrayL; i ++ ){
         str = array[setNum][styleNum][i].split( "_" );
         if( debug ) bugReport += array[setNum][styleNum][i]+"\n" ;
         output[i] = str[colorPlc];
         // fill the output with the color + the price [Black $500.00]
      }
   }
   return output;
   // return the list of options found
}


//  ---------------------------------------

// [f3] Clears out the options in an exsisting dropdown
// Paramaters :
// x = Dropdown element to clear
function clearDropdown( x ){
   if ( debug ) bugReport += "clearing " + x.length + " lines from " + x.name +"\n";

   for( i = x.length; i >= 0; i -- ){
      x.remove( i );
   }
}

//  ---------------------------------------

// [f4] onClick event that will toggle debug mode on / off
// Paramaters :
// element = button to toggle debug mode ( will likly only be present on test pages )
// Note *  debug mode is off by default
function debugTog( element ){
   if ( debug ) {
      debug = false;
      element.innerHTML = "Debug Mode: Off";
   }
   else {
      debug = true;
      element.innerHTML = "Debug Mode: On";
   }
}

//  ---------------------------------------

// [f5] gets the length of an array
// Paramaters :
//* array = the array to measure
//* fitment = which set of the array to measure ( for getting the number of styles for a fitment )
//* style( true / false ) = which style to measure ( for getting the number of colors for a style ) * OPTIONAL *
// * NOTE * use false for style when getting the number of fitments
function getLength( array, fitment, style ){
   var length = 0;
   var checkStr = style.toString();
   // bug avoidance ( since the compiler sees the number 1 and true as the same thing
   if( checkStr == "true" ){
      // Find the number of Styles held in the array
      if( debug ) bugReport += "Detecting Length of Style Array\n";
      while( array[fitment][length] ){
         //if( debug ) bugReport += "Found Style: " + array[fitment][length][0] + "\nLength is at " + length+"\n" ;
         length ++ ;
      }
   }
   else if ( checkStr == "false" ){
      // Find the number of Fitments held in the array
      if( debug ) bugReport += "Detecting Length of Fitment Array\n";
      while( array[length] ){
         //if( debug ) bugReport += "Found Fitment: " + array[length][0][0] + "\nLength is at " + length+"\n" ;
         length ++ ;
      }
   }
   else{
      // find the number of colors held in the array
      if( debug ) bugReport += "Detecting Length of Color Array\n" ;
      while( array[fitment][style][length] ){
         //if( debug ) bugReport += "Found Color: " + array[fitment][style][length]+"\n" ;
         length ++ ;
      }
   }
   if( debug ) bugReport += "items found:" + length +"\n";

   return length;
}

// [f7] sets up array information to populate a Form element
// Paramaters :
// * element = Element to populate with array information
// * array = array from which the data will be derived
// * parent = the parent of the element thats being populated ( holds which fitment set to direct the array at the proper styles )
// * style ( "true" / # ) = if "true" ( remember the quotes ) it will fill the selected element with only style information,
//                        -- if false will fill the first select box with fitments,
//                        -- use the style number instead of true if filling color information
// * details = populate style details into the element * OPTIONAL *
function populate( element, array, parent, style, details ){
   if ( debug ) bugReport += "Attempting to populate " + element.name+"\n" ;

   var setNumber = parent.selectedIndex;
   var checkStr = style.toString();
   // bug avoidance ( since the compiler sees the number 1 and true as the same thing

   if( checkStr == "true" ){
      // add styles to style dropdown
      clearDropdown( element );
      // clear the element of any pre - exsisting information ( in this case a dropdown )
      var str = getList( array, setNumber, true );
      // temporary string for any additions to the display string ( so we dont mess with the info in the array )
      for( i = 0; i < str.length; i ++ ){
         // addition[i] = "Style " + ( i ) + ": " + str[i]; // add the style number to the beginning of the option
         if( debug ) bugReport += "Style number applied to - " + str[i]+"\n" ;
         addToDropdown( element, "Style " + ( i + 1 ) + ": " );
         // add the style number to the beginning of the option and the style options to the element
      }

      // detect if only one style exists
      if( i == 1 ) styleSkip = true;

      // "none" check
      if( str[0].search( /none/i ) >= 0 ) {
         styleNone = true;
         styleSkip = true;

      }

      if ( debug ) bugReport += "-- Population Complete --"+"\n" ;
   }
   else if ( checkStr == "false" ){
      // add fitments to fitment dropdown
      clearDropdown( element );
      // clear the element of any pre - exsisting information ( in this case a dropdown )
      var str = getList( array, setNumber, false );
      // temporary string for any additions to the display string ( so we dont mess with the info in the array )
      for( i = 0; i < str.length; i ++ ){
         // addition[i] = "Style " + ( i ) + ": " + str[i]; // add the style number to the beginning of the option
         if( debug ) bugReport += "Fitment added - "+str[i]+"\n" ;
         addToDropdown( element, str[i] );
         // add the style number to the beginning of the option and the style options to the element
      }
      if ( debug ) bugReport += "-- Population Complete --"+"\n" ;
   }
   else if( style >= 0 ){
      // add colors to color dropdown
      clearDropdown( element );
      // clear the element of any pre - exsisting information ( in this case a dropdown )
      var str = getList( array, setNumber, style );

      addToDropdown( element, optionText );
      // f'ing IE -.-
            
      // temporary string for any additions to the display string ( so we dont mess with the info in the array )
      for( i = 0; i < str.length; i ++ ){
         // addition[i] = "Style " + ( i ) + ": " + str[i]; // add the style number to the beginning of the option
         if( debug ) bugReport += "Color added\n" + str[i]+"\n" ;
         addToDropdown( element, str[i] );
         // add the style number to the beginning of the option and the style options to the element
      }

      // detect if only one style exists
      if( i == 1 ) colorSkip = true;

      // "none" check
      if( str[0].search( /none/i ) >= 0 ) {
         colorNone = true;
         colorSkip = true;
      }

      if ( debug ) bugReport += "-- Population Complete --"+"\n" ;
   }

   if( details ){
      element.text = "";
      // clear textarea
      element.text = getDetails( array, details, setNumber );
      if( debug ) bugReport += "added\n" + element.text+"\n" ;
   }

   element.selectedIndex = 0;

}

//  ---------------------------------------

// [f8] Adds an option to a dropdown menu
// Paramaters :
// * element = dropdown element to add options to
// * info = the option to add to the dropdown
function addToDropdown( element, info ){
   if( debug ) bugReport += "Adding Options to " + element.name+"\n" ;
   var newOpt = document.createElement( 'option' );
   var phaseText = $( "phaseText" );
   newOpt.text = info;
   newOpt.title = info;

   // IE is retarded and dosnt let you put onclick events on options
   
   if( ! nscp ){
      if( element.id == "fits" ) element.onclick = new Function ( "evt", "setPhase( 2 )" );
      if(info.search(/select/i) < 0) newOpt.style.backgroundColor = "#c9d8eb";
   }
   else{
      if( element.id == "fits" ) newOpt.onclick = function() {
         setPhase( 2 )
      }
   }
   try
   {
      element.add( newOpt, null );
      // standards compliant
   }
   catch( ex )
   {
      element.add( newOpt );
      // IE only
   }

}

// [f9] adds text to a text area
// Paramaters :
// * element = textbox to edit
// * text = text to add
// * clear ( true / false ) = weather or not to clear the box
function editTextArea( element, text, clear ){
   if( clear ){
      // clear the text area by replaceing it in its entirty with the given text
      element.value = text;
   }
   else{
      // add the text to whats already in the text area
      element.value += text;
   }
}

// [f10] Fills detail box
// Paramaters :
// * element = textbox to edit
// * array = information arrray to gather info about the details
// * fitNum ( # / false ) = if false the element will be hidden, if its a number it will fill in the fitment
// * styleNum ( # / false ) = if false the style hasnt been selected yet if its a number it will fill in the style
// * colorNum ( # / false ) = if false the color hasnt been selected yet if its a number it will fill in the color
// * Collapse ( OPTIONAL ) = if true it will change the padding of the element to collapse to save page realistate
function dispDetails( parent, array, fitNum, styleNum, colorNum, Collapse ){
   if( debug ) bugReport += "Executing details display handeling\n";
   if(jDisplayFlag) var fitTag = $("FitTagWrap");
   var disp;
   // display string containing what is being fed into the detail boxes
   var str;
   // temporary string to give the proper placement and text into the display string
   var element;
   // the details textarea element
   if( colorNum < 0 ) colorNum ++ ;
   // display bug fix, "Select Your Color" was added to the drop down selections for the color drop, this weeds that out to avoid displaying it

   if(jDisplayFlag){
      var disp = getList( array, 0, false );
      fitTag.innerHTML = "<h3 id='textPhase' style='font-size: 100%'>"+disp[fitNum]+"</h3>";
   }

   if(!jDisplayFlag){
       
       //  ------------- Fitment -------------------
       var checkStr = fitNum.toString();
       // bug avoidance ( since the compiler sees the number 1 and true as the same thing )
    
       if( checkStr != "false" ){
          // fill the details box with fitment information
          element = $('details');
          // set element to the textarea holding our details
    
          // clear the style details box of any pre - exsisting text
          element.value = "";
          // clear the details boxt of any pre - exsisting text
    
          var disp = getList( array, 0, false );
          // gets the entire list of all possible fitments available ( creates a string holding the fitment options )
          // the getList function was also used to fill the dropdowns with our options
          
          editTextArea( element, "Fit: " + disp[fitNum], true );
          
          // clears then edits the detail box's text with the fitment chosen
    
       }
       // if fitNum is entered as false the function will simply clear the text area
       else if( checkStr == "false" ) element.value = "";
    
       //  -------------- Style -------------------- OUTDATED
//       checkStr = styleNum.toString();
//       
//       if( checkStr != "false" && ! styleNone ){
//       
//          if(!jDisplayFlag) element = parent.childNodes[sdBoxDivid].childNodes[dBoxid];
//       
//          element.value = "";
//       
//          getDetails( array, fitNum, styleNum, element );
//       
//          if( ! Collapse && colorNum.toString() == "false" ) {
//          }
//       }
    
       //  -------------- Color --------------------
       checkStr = colorNum.toString();
       // bug avoidance ( since the compiler sees the number 1 and true as the same thing )
       if( checkStr != "false" ){
          // fill the details box with color information
          element = $('details');
    
          // set element to the textarea holding our details
          disp = getList( array, fitNum, styleNum );
          // gets the list of avaialbe colors
          str = disp[colorNum].split( "$" );
          // takes the selected color and splits the color name and price apart ( disp[colorNum] shows up as "Black $500.00" )
          // add the text to the details box and put into the right format.

          if( ! colorNone ) editTextArea( element, "\nColor: " + str[0] + "\n\nEstimated Price: $" + options_array[fitNum][styleNum][colorNum].split('_')[price], false );
          if( colorNone ) editTextArea( element, "\n\nEstimated Price: $" + options_array[fitNum][styleNum][colorNum].split('_')[price], false );
    
       }
   }
   //sets the jquery variables if an add to cart form is detected
   setJQVars( array );
}

//  -------- CoverCraft Custom Function -----

function multiColor( slcted, colorList, infoDisp ){
   if( debug ) bugReport += "Creating multi-color instance\n";
   //sets the variables that hold the multi-color select tag information
   var mColorDD = $( "mcolorSelectMid" );
   var sColorDD = $( "mcolorSelectSide" );
   //instanciate the Div that holdes the detail boxes
   var detailsDiv = $( "detailsWrap" );
   //string that will be cut into the display detail value string
   var str;
   
   if( infoDisp && !jDisplayFlag ){
      //fill the details box with the already selected options
      dispDetails( detailsDiv, options_array, $( "fits" ).selectedIndex, $( "styleSelect" ).selectedIndex, $( "colorSelect" ).selectedIndex - 1 , false );
      //detailsDiv.style.paddingTop = '215px';
      //split the value string of the details box by the two new line characters between estimated price and the color 
      temp = $('details').value.split( /\n\n/ );
      //set the string that will be cut into the new display value
      str = "\nMiddle: " + mColorDD.options[mColorDD.selectedIndex].text + " | Side: " + sColorDD.options[sColorDD.selectedIndex].text + "\n";
      
      temp[0] += str + temp[1];

      if( ! nscp ){ //IE requires custom string handeling since all new lines in IE are followed by a return carage character
         temp = $('details').value.split( "\n" );

         temp[0] += "\n" + temp[1] + str + temp[3];
      }
      //set the value of the details box to show the details with our new line showing multi color info
      $('details').value = temp[0];
   }
   //(ran on first call) clears the dropdowns and makes the multi color section visible when multi-color is first selected
   if( colorList[slcted].text.search( /multi-color/i ) >= 0 && ! infoDisp ){

      clearDropdown( mColorDD );
      clearDropdown( sColorDD );
      return true;
   }
   else return false;

}

//  ---------------------------------------
//returns checkout status when user is selecting multiple colors
function multiSelectionHandler(selectFlags,phaseText){
      jTcart = $("jTcart");
      multiFinish = false;
      if(!selectFlags[0] && !selectFlags[1]){
        phaseText.innerHTML = "<h2 id='textPhase' style='font-size: "+textSize+"'>Select Middle and Side Colors</h2>";
        setAnimationPhase(5);
      }
      if (selectFlags[0] && !selectFlags[1]){
        phaseText.innerHTML = "<h2 id='textPhase' style='font-size: "+textSize+"'>Select Side Color</h2>";
        setAnimationPhase(5);
      }
      if (!selectFlags[0] && selectFlags[1]){
        phaseText.innerHTML = "<h2 id='textPhase' style='font-size: "+textSize+"'>Select Middle Color</h2>"; 
        setAnimationPhase(5);
      }
      if(selectFlags[0] && selectFlags[1]){
        phaseText.style.backgroundImage = "url(http://www.yourhotcar.com/sbcimages/_library/blueBack.jpg)";
        setPhase(8);
        return true;
      }
   return false;
}


// This function detects and handles image URLs placed in the extra info position
// some urls hold underscores which screws up the rest of the scripting.
// this also allows us to place any infomation into our exta field and detect what type of info it is
function imageHandler( array ){
   var fitment = 0, styles = 0, colors = 0;
   // variables used for recursion
   var maxF = array.length, maxS = 0;
   // array lengths of differant parts of the array
   var possibleImageExtensions = new Array( ".jpg", ".jpeg", ".gif", ".png" );
   // search string array to detect all types of images
   var sIndex, eIndex;
   // the start and end character index for the Url
   var imageUrl;
   // the image Url
   var multiImage;



   for( fitment = 0; fitment < maxF; fitment ++ ){
      // begin recursing threw all fitments
      maxS = array[fitment].length;
      // detect the number of styles in the current fitment
      for( styles = 0; styles < maxS; styles ++ ){
         // recurse threw the styles
         multiImage = array[fitment][styles][colors].split("^^");
         for( x = 0; x< multiImage.length;x++){
             sIndex = multiImage[x].search( /http/i );
             // set the index of the beginning of the url
             if( sIndex > - 1 ){
                for( i = 0; i < possibleImageExtensions.length; i ++ ){
                   // recurse threw all possible image extensions
                   if( multiImage[x].search( possibleImageExtensions[i] ) > - 1 ) // detect if any extensions are found
                   eIndex = multiImage[x].search( possibleImageExtensions[i] ) + possibleImageExtensions[i].length;
                   // set the end index of the image Url
                }
                imageUrl = multiImage[x].slice( sIndex, eIndex );
                // extract the imageUrl from our array
                if(x<1) {array[fitment][styles][colors] = array[fitment][styles][colors].replace( imageUrl, imageList.length );}else
                array[fitment][styles][colors] = array[fitment][styles][colors].replace( imageUrl, "" );
                // replace the Url in the array with the current index of the imageList
                if(multiImage.length > 1){
                  if(x<1) {
                      imageList[imageList.length] = new Array; 
                      imageList[imageList.length-1][x] = imageUrl;
                  }else imageList[imageList.length-1][x] = imageUrl;
                }else imageList[imageList.length] = imageUrl;
                // append the imageUrl to our imageList
             }
         }
         array[fitment][styles][colors] = array[fitment][styles][colors].replace( "^^", "" );
      }
   }
   
   if(imageListDebug){
       imageListOutput="Image List:\n";
       for(i = 0; i<imageList.length;i++){
         imageListOutput += "-- Index: "+i+" --\n"+imageList[i]+"\n\n";
       }
   }
   return imageList.length;
}

//  ---------------------------------------

function extraDetailsHandler(clear,fitNum,styleNum,colorNum){
    displayDiv = $('webid');
    displayDiv.style.display = '';
    
    if(clear){
        displayDiv.innerHTML = '';
    }else{
        str = options_array[fitNum][0][0].split('_');
        if(str[eXdetail]){
            displayDiv.innerHTML += exDetailsList[parseFloat(str[eXdetail])];
            displayDiv.style.display = '';
        }
    }
}

//  ---------------------------------------

function exDetail (){
    //recurse threw all fitments
    for(i=0;i<options_array.length;i++){
        //extract information
        str = options_array[i][0][0].split('_');
        if(str[eXdetail]){
            //recurse for every element delmited by an _ after the extra detail field (6 = eXdetail)
            for(x=7;x<str.length;x++){
                //Concatinate all deimited peices to the end of the first replacing the underscores removed by the split
                str[eXdetail] += '_'+str[x];   
            }
            //fill the exDetailsList and replace the details in the array with the index where the details are held
            options_array[i][0][0] = str[0];
            for(x=1;x<6;x++){
                options_array[i][0][0] += '_'+str[x];
            }
            options_array[i][0][0] += '_'+exDetailsList.length;
            str[eXdetail]=str[eXdetail].replace('^^','');
            str[eXdetail]=str[eXdetail].replace('^^','');
            exDetailsList[exDetailsList.length] = str[eXdetail];
    //        alert(options_array[i][0][0]);
    //        alert(exDetailsList[exDetailsList.length-1]);        
        }
    }
}


// this function handles all Tool start up operations
function startUp( array ){
   if( debug ){
    if(jbasicFlag){ bugReport += "Tool Type: J-Basic"+"\n";}else
    if(jDisplayFlag){ bugReport += "Tool Type: J-Display"+"\n";}else
    bugReport += "Tool Type: CoverCraft"+"\n";
   }
   if( debug ) bugReport += "Executing Start up scripts"+"\n";
   if( debug ) bugReport += "Running Excessive Field Clean up Processes"+"\n";  
   if( debug ) {
      bugReport += "This Array Holds:\n" + imageHandler( array ) + " Style Display Images"+"\n" ;
   }
   else
   imageHandler( array );
   // detects if the array holds images and fill the imageList array with the information
   
   exDetail();
   //detects extra details and fills them into an array
   
   return false;
}

//J-Display Carousel creation and renewing
function initCarousel(){
            
         ex6Carousel = new iCarousel("imgDisp_content", {
            idPrevious: "imgDisp_previous",
            idNext: "imgDisp_next",
            item: {
                klass: "imgDisp_item",
                size: 270
            },
            animation: {
                type: "scroll",
                duration: 500,
                amount: 4
                
            }
        });
        JSlide = new JScroller('imgSelc', {
                velocity: 10,
                idNext: 'imgSelc_next',
                idPrevious: 'imgSelc_previous',
            change: function(){
                ex6Carousel.goTo(JSlide.highlightedIndex);
            }
        }); 
        if(!nscp) JSlide.velocity = 25; 
        if(nscp) JSlide.velocity = 15;       
}


//easier slider status checking
var status = {
        'true': 'open',
        'false': 'closed'
};

//animate per phase, this executes all animations based on a phase input
function setAnimationPhase(phase){
    //mootools slider instanctiation
    var toolTransition = new Fx.Transition(Fx.Transitions.Back.easeInOut);
    if(!nscp) toolTransition = new Fx.Transition(Fx.Transitions.Pow.easeInOut);
    var toolSpeed = 500;
    //each element with a horizontal slide in animation is held inside of a div wrapper 
    //so that its vertical space can be slid out of view
    //usage is generally a .chain element property method that triggers the vertical holder to .hide()
    
    //vertical div wraps
    var selectVehicleWrap = new Fx.Slide('selectVehicleWrap', {duration: toolSpeed,transition: toolTransition});
    var reFitWrap = new Fx.Slide('reFitWrap', {duration: toolSpeed,transition: toolTransition});
    var phaseTextWrap = new Fx.Slide('phaseTextWrap', {duration: toolSpeed,transition: toolTransition});
    var FitTagWrap = new Fx.Slide('FitTagWrap', {duration: toolSpeed,transition: toolTransition});
    var fitmentSelectWrap = new Fx.Slide('fitmentSelect', {duration: toolSpeed,transition: toolTransition});
    var colorSelectWrap = new Fx.Slide('colorSelectWrap', {duration: toolSpeed,transition: toolTransition});
    var multiColorSelectWrap = new Fx.Slide('multiColorSelectWrap', {duration: toolSpeed,transition: toolTransition});
    var styleSelectWrap = new Fx.Slide('styleSelectWrap', {duration: toolSpeed,transition: toolTransition});
    var detailsWrap = new Fx.Slide('detailsWrap', {duration: toolSpeed,transition: toolTransition});
    var cartSlider = new Fx.Slide('jTcartWrap', {duration: toolSpeed,transition: toolTransition});
    if(jDisplayFlag) var JScrollWrap = new Fx.Slide('JScrollWrap', {duration: toolSpeed,transition: toolTransition});
    
    //horizontal element sliders
    var selectVehicleSlider = new Fx.Slide('selectVehicle', {mode: 'horizontal',duration: toolSpeed,transition: toolTransition});
    var reFitSlider = new Fx.Slide('reFit', {mode: 'horizontal',duration: toolSpeed,transition: toolTransition});
    var phaseTextSlider = new Fx.Slide('phaseText', {mode: 'horizontal',duration: toolSpeed,transition: toolTransition});
    var fitsSlider = new Fx.Slide('fits', {mode: 'horizontal',duration: toolSpeed,transition: toolTransition});
    var colorSelectSlider = new Fx.Slide('colorSelect', {mode: 'horizontal',duration: toolSpeed,transition: toolTransition});
    var styleSelectionSlider = new Fx.Slide('container_style', {mode: 'horizontal',duration: toolSpeed,transition: toolTransition});
    var detailsSlider = new Fx.Slide('details', {mode: 'horizontal',duration: toolSpeed,transition: toolTransition});   
    
    if(firstClick){
        //run threw all the div wrappers and hide them from view so that 
        //only the intended divs are actually shown when the phase is calculated
        reFitWrap.hide();
        phaseTextWrap.hide();
        FitTagWrap.hide();
        fitmentSelectWrap.hide();
        colorSelectWrap.hide();
        multiColorSelectWrap.hide();
        styleSelectWrap.hide();
        detailsWrap.hide();
        if(jDisplayFlag) JScrollWrap.hide();
        
        reFitSlider.hide();
        phaseTextSlider.hide();
        fitsSlider.hide();
        colorSelectSlider.hide();
        styleSelectionSlider.hide();
        detailsSlider.hide();
        cartSlider.slideOut();
        if(!jDisplayFlag){
           FitTagWrap.hide();
        }
        if(jDisplayFlag){
            $('imgDisp').style.opacity = 0;
        }
        if(jDisplayFlag) if(nscp){ $('imgDisp_content').style.zIndex = '1'; }
        if(jDisplayFlag) if(nscp) $('JScrollWrap').style.visibility = 'visible';
        if(jDisplayFlag) if(!nscp) {$('imgSelc').style.height = '81px';$('imgDispContain').style.visibility = 'hidden';}
        $('styleSelect').style.visibility = 'visible';
        if(!jDisplayFlag) $('styleDetails').style.visibility = 'visible';
        $('jTcart').fade(0);
        
        selectVehicleSlider.slideOut().chain(
            function(){
                selectVehicleWrap.hide();
                $('SelectionTool').style.width = 'auto';
                $('SelectionTool').style.height = 'auto';
                if(!nscp) $('SelectionTool').style.floatStyle = 'none';
            });
        if(nscp) {$('container_style').style.position = 'absolute';}
        if(nscp) {styleSelectionSlider.hide();}     
        firstClick = false;
    }
    
    
    //phase 1 visual chain effects
    if(phase == 1){
        if(jDisplayFlag){
            $('imgDisp').style.opacity = 0;
            $('imgDispContain').style.visibility = 'hidden';
        }
        if(nscp) $('container_style').style.visibility = 'hidden';
        $('styleSelect').style.visibility = 'hidden';
        
        if(!jDisplayFlag) if(nscp) $('styleDetails').style.visibility = 'hidden';
        if(!nscp){
            if(jDisplayFlag) {$('JScrollWrap').style.visibility = 'hidden';}
            //run threw all the div wrappers and hide them from view so that 
            //only the intended divs are actually shown when the phase is calculated
            selectVehicleWrap.hide();
            reFitWrap.hide();
            phaseTextWrap.hide();
            FitTagWrap.hide();
            fitmentSelectWrap.hide();
            colorSelectWrap.hide();
            multiColorSelectWrap.hide();
            styleSelectWrap.hide();
            detailsWrap.hide();
            
            reFitSlider.hide();
            phaseTextSlider.hide();
            fitsSlider.hide();
            colorSelectSlider.hide();
            styleSelectionSlider.hide();
            detailsSlider.hide();
            if(jDisplayFlag) JScrollWrap.hide();
        }
        //Slide out Chains of peices that are being shown for each phase change
        if(status[reFitWrap.open] == 'open') reFitSlider.slideOut().chain(function(){reFitWrap.slideOut();});
        if(status[phaseTextWrap.open] == 'open') phaseTextSlider.slideOut();
        if(status[FitTagWrap.open] == 'open') FitTagWrap.slideOut();
       // if(status[fitmentSelectWrap.open] == 'open') fitsSlider.slideOut().chain(function(){fitmentSelectWrap.slideOut();});
        if(status[colorSelectWrap.open] == 'open') colorSelectSlider.slideOut().chain(function(){colorSelectWrap.slideOut();});
        if(status[multiColorSelectWrap.open] == 'open') multiColorSelectWrap.slideOut();
        if(status[styleSelectWrap.open] == 'open') styleSelectionSlider.slideOut().chain(function(){styleSelectWrap.slideOut();});
        if(status[detailsWrap.open] == 'open') detailsSlider.slideOut().chain(function(){detailsWrap.slideOut();});
        if(status[cartSlider.open] == 'open') {cartSlider.slideOut();}
        //execute wrapper Slides (the element slides are chained for visual appeal)
        if(jDisplayFlag) JScrollWrap.hide();
        if(status[phaseTextWrap.open] == 'open') phaseTextSlider.slideOut().chain(function(){phaseTextWrap.slideIn().chain(
            function(){
                phaseTextSlider.slideIn().chain(
                    function(){
                        fitmentSelectWrap.slideIn().chain(function(){fitsSlider.slideIn();});
                        $('styleSelect').style.visibility = 'hidden';
                        $('imgDispContain').style.visibility = 'hidden';
                    });
            });});
        if(status[phaseTextWrap.open] == 'closed') phaseTextWrap.slideIn().chain(function(){phaseTextSlider.slideIn().chain(function(){fitmentSelectWrap.slideIn().chain(function(){fitsSlider.slideIn();});});});
            $('jTcart').fade(0);   
            if(!jDisplayFlag){
           FitTagWrap.hide();
        }
    }
    //phase 2 visual chain effects

    if(phase == 2){
        if(nscp) $('container_style').style.visibility = 'visible';
//        if(!jDisplayFlag) {$('styleDetails').style.visibility = 'visible';$('styleSelect').style.visibility = 'visible';}
        if(!nscp){
            if(jDisplayFlag) {$('JScrollWrap').style.visibility = 'hidden';}
            //run threw all the div wrappers and hide them from view so that 
            //only the intended divs are actually shown when the phase is calculated
            selectVehicleWrap.hide();
            reFitWrap.hide();
            phaseTextWrap.hide();
            FitTagWrap.hide();
            fitmentSelectWrap.hide();
            colorSelectWrap.hide();
            multiColorSelectWrap.hide();
            styleSelectWrap.hide();
            detailsWrap.hide();
            
            reFitSlider.hide();
            phaseTextSlider.hide();
            fitsSlider.hide();
            colorSelectSlider.hide();
            styleSelectionSlider.hide();
            detailsSlider.hide();
            if(jDisplayFlag) JScrollWrap.hide();
        }
        if(nscp) {
            styleSelectionSlider.hide();
        }      
        //Slide out Chains of peices that are being shown for each phase change
        //if(status[reFitWrap.open] == 'open') reFitSlider.slideOut().chain(function(){reFitWrap.slideOut();});
        if(status[phaseTextWrap.open] == 'open') phaseTextSlider.slideOut().chain(function(){phaseTextWrap.slideOut();});
        //if(status[FitTagWrap.open] == 'open') FitTagSlider.slideOut().chain(function(){FitTagWrap.slideOut();});
        if(status[fitmentSelectWrap.open] == 'open') fitsSlider.slideOut().chain(function(){fitmentSelectWrap.slideOut();});
        if(status[colorSelectWrap.open] == 'open') colorSelectSlider.slideOut().chain(function(){colorSelectWrap.slideOut();});
        if(status[multiColorSelectWrap.open] == 'open') multiColorSelectWrap.slideOut();
        if(status[cartSlider.open] == 'open') cartSlider.slideOut();
        //if(status[styleSelectWrap.open] == 'open') styleSelectionSlider.slideOut().chain(function(){styleSelectWrap.slideOut();});
        //if(status[detailsWrap.open] == 'open') detailsSlider.slideOut().chain(function(){detailsWrap.slideOut();});
        if(jDisplayFlag) JScrollWrap.hide();
        //execute wrapper Slides (the element slides are chained for visual appeal)
        phaseTextWrap.slideIn().chain(function(){phaseTextSlider.slideIn();phaseTextWrap.clearChain();});
        if(!styleNone){
            if(jDisplayFlag) FitTagWrap.slideIn().chain(function(){FitTagWrap.clearChain();detailsWrap.slideIn().chain(function(){detailsSlider.slideIn();styleSelectWrap.slideIn().chain(function(){styleSelectWrap.clearChain();styleSelectionSlider.slideIn();$('styleSelect').style.visibility = 'visible';$('imgDisp').fade(1);$('imgDispContain').style.visibility = 'visible';reFitWrap.slideIn().chain(function(){reFitSlider.slideIn();reFitWrap.clearChain();});});});});
            if(!jDisplayFlag) detailsWrap.slideIn().chain(function(){detailsWrap.clearChain();detailsSlider.slideIn();styleSelectWrap.slideIn().chain(function(){$('styleDetails').style.visibility = 'visible';$('styleSelect').style.visibility = 'visible';styleSelectWrap.clearChain();styleSelectionSlider.slideIn();reFitWrap.slideIn().chain(function(){reFitSlider.slideIn();reFitWrap.clearChain();});});});
        }else{
            if(jDisplayFlag) FitTagWrap.slideIn().chain(function(){FitTagWrap.clearChain();styleSelectWrap.slideIn().chain(function(){styleSelectionSlider.slideIn();$('styleSelect').style.visibility = 'visible';$('imgDisp').fade(1);$('imgDispContain').style.visibility = 'visible';reFitWrap.slideIn().chain(function(){reFitSlider.slideIn();reFitWrap.clearChain();});});});
            if(!jDisplayFlag) detailsWrap.slideIn().chain(function(){detailsSlider.slideIn();reFitWrap.slideIn().chain(function(){reFitSlider.slideIn();reFitWrap.clearChain();});});
        }
    }
    //NOTE, REMEMBER TO MAKE multiColorFlag DEPENDANT ON THE SELECTION OF THE COLORSELECT
    if(phase == 3){
        if(nscp) $('container_style').style.visibility = 'visible';
       // if(!jDisplayFlag) {$('styleDetails').style.visibility = 'visible';$('styleSelect').style.visibility = 'visible';}
        if(!nscp){
            if(jDisplayFlag) {$('JScrollWrap').setStyle('opacity',0);}
            //run threw all the div wrappers and hide them from view so that 
            //only the intended divs are actually shown when the phase is calculated
            selectVehicleWrap.hide();
            fitmentSelectWrap.hide();
            multiColorSelectWrap.hide();
            multiColorFlag = false;
        }
        //Slide out Chains of peices that are being shown for each phase change
        //if(status[reFitWrap.open] == 'open') reFitSlider.slideOut().chain(function(){reFitWrap.slideOut();});
        //if(status[phaseTextSlider.open] == 'open') phaseTextSlider.slideOut();
        //if(status[FitTagWrap.open] == 'open') FitTagSlider.slideOut().chain(function(){FitTagWrap.slideOut();});
        if(status[fitmentSelectWrap.open] == 'open') fitsSlider.slideOut().chain(function(){fitmentSelectWrap.clearChain();fitmentSelectWrap.slideOut();});
        //if(status[colorSelectSlider.open] == 'open') colorSelectSlider.slideOut();
        if(status[multiColorSelectWrap.open] == 'open') multiColorSelectWrap.slideOut();
        //if(status[styleSelectWrap.open] == 'open') styleSelectionSlider.slideOut().chain(function(){styleSelectWrap.slideOut();});
        //if(status[detailsSlider.open] == 'open') detailsSlider.slideOut();
        if(status[cartSlider.open] == 'open') {$('jTcart').fade(0);cartSlider.slideOut();}
        if(nscp) if(jDisplayFlag) if(status[JScrollWrap.open] == 'open') {$('JScrollWrap').fade(0);JScrollWrap.slideOut().chain(function(){if(!oneImage) {JScrollWrap.slideIn();$('JScrollWrap').fade(1);}});}
       
        if(jDisplayFlag && !oneImage) if(status[JScrollWrap.open] == 'closed') JScrollWrap.slideIn();
        if(jDisplayFlag && !nscp && !oneImage) JScrollWrap.slideIn();
        //execute wrapper Slides (the element slides are chained for visual appeal)
        phaseTextWrap.slideIn().chain(function(){phaseTextWrap.clearChain();colorSelectWrap.slideIn().chain(function(){colorSelectWrap.clearChain();detailsSlider.slideIn();phaseTextSlider.slideIn();colorSelectSlider.slideIn();});});
        if(!styleNone){
            if(jDisplayFlag) FitTagWrap.slideIn().chain(function(){FitTagWrap.clearChain();detailsWrap.slideIn().chain(function(){detailsWrap.clearChain();detailsSlider.slideIn();styleSelectWrap.slideIn().chain(function(){if(!nscp) {$('JScrollWrap').fade(1);$('JScrollWrap').style.visibility = 'visible';}styleSelectWrap.clearChain();styleSelectionSlider.slideIn();$('styleSelect').style.visibility = 'visible';$('imgDisp').fade(1);$('imgDispContain').style.visibility = 'visible';reFitWrap.slideIn().chain(function(){reFitSlider.slideIn();reFitWrap.clearChain();});});});});
            if(!jDisplayFlag) detailsWrap.slideIn().chain(function(){detailsWrap.clearChain();detailsSlider.slideIn();styleSelectWrap.slideIn().chain(function(){$('styleDetails').style.visibility = 'visible';$('styleSelect').style.visibility = 'visible';styleSelectWrap.clearChain();styleSelectionSlider.slideIn();reFitWrap.slideIn().chain(function(){reFitSlider.slideIn();reFitWrap.clearChain();});});});
        }else{
            if(jDisplayFlag) FitTagWrap.slideIn().chain(function(){FitTagWrap.clearChain();styleSelectWrap.slideIn().chain(function(){styleSelectionSlider.slideIn();$('styleSelect').style.visibility = 'visible';$('imgDisp').fade(1);$('imgDispContain').style.visibility = 'visible';reFitWrap.slideIn().chain(function(){reFitSlider.slideIn();reFitWrap.clearChain();});});});
            if(!jDisplayFlag) detailsWrap.slideIn().chain(function(){detailsSlider.slideIn();reFitWrap.slideIn().chain(function(){reFitSlider.slideIn();reFitWrap.clearChain();});});
        }
    }
    if(phase == 4){
        if(nscp && !styleNone) $('container_style').style.visibility = 'visible';
        if(nscp && !styleNone) $('styleSelect').style.visibility = 'visible';
        if(!jDisplayFlag && !styleNone) if(nscp) $('styleDetails').style.visibility = 'visible';
        if(!nscp){
            if(jDisplayFlag && !oneImage) $('JScrollWrap').style.visibility = 'visible';
            //run threw all the div wrappers and hide them from view so that 
            //only the intended divs are actually shown when the phase is calculated
            selectVehicleWrap.hide();
            fitmentSelectWrap.hide();
            if(!multiColorFlag) multiColorSelectWrap.hide();
        }
        
        
        if(!multiColorFlag) multiColorSelectWrap.slideOut();
        if(status[phaseTextSlider.open] == 'open') phaseTextSlider.slideOut().chain(function(){phaseTextSlider.clearChain();phaseTextSlider.slideIn();});
        if(status[cartSlider.open] == 'open') {$('jTcart').fade(0);cartSlider.slideOut().chain(function(){cartSlider.clearChain();cartSlider.slideIn();$('jTcart').fade(1);});
        }else {cartSlider.slideIn();cartSlider.clearChain();$('jTcart').fade(1);}
        if(jDisplayFlag) if(colorSkip){
            if(nscp && !oneImage) if(jDisplayFlag) if(status[JScrollWrap.open] == 'open') {$('JScrollWrap').fade(0);JScrollWrap.slideOut().chain(function(){JScrollWrap.slideIn();$('JScrollWrap').fade(1);});}
            if(!nscp && !oneImage) {$('JScrollWrap').fade(1);$('JScrollWrap').style.visibility = 'visible';}
        } 
    }
     if(phase == 5){
        if(nscp && !styleNone) $('container_style').style.visibility = 'visible';
        if(nscp && !styleNone) $('styleSelect').style.visibility = 'visible';
        if(!jDisplayFlag) if(nscp) $('styleDetails').style.visibility = 'visible';
        if(!nscp){
            if(jDisplayFlag && !oneImage) $('JScrollWrap').style.visibility = 'visible';
            //run threw all the div wrappers and hide them from view so that 
            //only the intended divs are actually shown when the phase is calculated
            selectVehicleWrap.hide();
            fitmentSelectWrap.hide();
        }

        if(status[phaseTextSlider.open] == 'open') phaseTextSlider.slideOut().chain(function(){phaseTextSlider.clearChain();phaseTextSlider.slideIn();});
         //Slide out Chains of peices that are being shown for each phase change
        if(status[fitmentSelectWrap.open] == 'open') fitsSlider.slideOut().chain(function(){fitmentSelectWrap.clearChain();fitmentSelectWrap.slideOut();});
        //if(status[styleSelectWrap.open] == 'open') styleSelectionSlider.slideOut().chain(function(){styleSelectWrap.slideOut();});
        if(status[cartSlider.open] == 'open') {$('jTcart').fade(0);cartSlider.slideOut();}
        //execute wrapper Slides (the element slides are chained for visual appeal)
        multiColorSelectWrap.slideIn();
        multiColorFlag = true;
    }
    
    //clear all the chains to stop graphical glitching from excessive chaining
    
}




/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * The Following Builds HTML * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * Dynamically * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * WARNING ! ! * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * CLUTTER INCOMING ! ! * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */



function writeTool( toolType ){

   /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
   /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
   /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Cover Craft * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
   /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
   /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


   if( toolType.search( /jdisplay/i ) == -1 ){
        document.write('<div id="SelectionTool">');
        document.write('        <div id="selectVehicleWrap">');
        document.write('        <button id="selectVehicle" onclick="setPhase(1);">'+fitPhaseText+'</button>');
        document.write('        </div>');
        document.write('        <div id="jTcartWrap">');
        document.write('         <form id="jTcartForm" method="post" action="/cart/" style="padding: 0; margin: 0;">');
        document.write('              <input type="hidden" name="prodid" value="" />');
        document.write('              <input type="hidden" name="new_name" value="" />');
        document.write('              <input type="hidden" name="new_descrip" value="" />');
        document.write('              <input type="hidden" name="new_price" value="" />');
        document.write('              <input id="jTcart" type="submit" value="Add to Cart"/>');
        document.write('           </form>');
        document.write('       </div>');
        document.write('        <div id="reFitWrap">');
        document.write('        <button id="reFit" onclick="setPhase(1);">Reset</button>');
        document.write('        </div>');
        document.write('        <div id="phaseTextWrap">');
        document.write('        <div  id="phaseText"></div>');
        document.write('        </div>');
        document.write('        <div id="FitTagWrap">');
        document.write('        <div id="FitTag"></div>');
        document.write('        </div>');
        document.write('        <div  id="fitmentSelect">');
        document.write('          <select class="blueUp" name="fits" id="fits" size="9"><option>Fitment Filler</option></select>');
        document.write('        </div>');
        document.write('        <div id="colorSelectWrap">');
        document.write('        <select class="blueBack" id="colorSelect"><option>Select Your Color</option></select>');
        document.write('        </div>');
        document.write('        <div id="multiColorSelectWrap" >');
        document.write('            <select class="blueBack" id="mcolorSelectMid"><option>Select Middle Color</option></select>');
        document.write('            <span style="padding-left:8px"></span>');
        document.write('            <select class="blueBack" id="mcolorSelectSide"><option>Select Side Color</option></select>');
        document.write('        </div>');
        document.write('        <div id="styleSelectWrap">');
        document.write('            <div id="container_style">');
        document.write('                <div id="disp">');
        document.write('                    <select class="blueUp" id="styleSelect" size="9"><option>Style 1:</option></select>');
        document.write('                    <textarea class="blueBack" id="styleDetails"></textarea>');
        document.write('                </div>');
        document.write('            </div>');
        document.write('        </div> ');
        document.write('        <div id="detailsWrap">');
        document.write('            Details:<br>');
        document.write('            <textarea class="blueBack" id="details"></textarea>');
        document.write('        </div> ');
        document.write('    </div>');
   }

  
   /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
   /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
   /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * JDisplay * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  */
   /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
   /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

   if( toolType.search( /jdisplay/i ) >= 0 ){
        document.write('<div id="SelectionTool">');
        document.write('        <div id="selectVehicleWrap">');
        document.write('        <button id="selectVehicle" onclick="setPhase(1);">'+fitPhaseText+'</button>');
        document.write('        </div>');
        document.write('        <div id="jTcartWrap">');
        document.write('         <form id="jTcartForm" method="post" action="/cart/" style="padding: 0; margin: 0;">');
        document.write('              <input type="hidden" name="prodid" value="" />');
        document.write('              <input type="hidden" name="new_name" value="" />');
        document.write('              <input type="hidden" name="new_descrip" value="" />');
        document.write('              <input type="hidden" name="new_price" value="" />');
        document.write('              <input id="jTcart" type="submit" value="Add to Cart"/>');
        document.write('           </form>');
        document.write('       </div>');
        document.write('        <div id="reFitWrap">');
        document.write('        <button id="reFit" onclick="setPhase(1);">Reset</button>');
        document.write('        </div>');
        document.write('        <div id="phaseTextWrap">');
        document.write('        <div  id="phaseText"></div>');
        document.write('        </div>');
        document.write('        <div id="FitTagWrap">');
        document.write('        <div id="FitTag"></div>');
        document.write('        </div>');
        document.write('        <div  id="fitmentSelect">');
        document.write('          <select class="blueUp" name="fits" id="fits" size="9"><option>Fitment Filler</option></select>');
        document.write('        </div>');
        document.write('        <div id="colorSelectWrap">');
        document.write('        <select class="blueBack" id="colorSelect"><option>Select Your Color</option></select>');
        document.write('        </div>');
        document.write('        <div id="multiColorSelectWrap" >');
        document.write('            <select class="blueBack" id="mcolorSelectMid"><option>Select Middle Color</option></select>');
        document.write('            <span style="padding-left:8px"></span>');
        document.write('            <select class="blueBack" id="mcolorSelectSide"><option>Select Side Color</option></select>');
        document.write('        </div>');
        document.write('        <div id="styleSelectWrap">');
        document.write('            <div id="container_style">');
        document.write('                <select class="blueUp" id="styleSelect" size="9" style="z-index:2;background-image:url("http://www.yourhotcar.com/sbcimages/_library/boxback.jpg"); position:absolute;height:150px; width: 75px;"><option>Style 1:</option></select>');
        document.write('                <div id="content_container">');
        document.write('                    <div  id="imgDisp">');
        document.write('                        <div  id="imgDispContain">');
        document.write('                            <ul id="imgDisp_content" >');
        document.write('                                <li class="imgDisp_item"><img src="http://www.yourhotcar.com/sbcimages/_library/blueBack.jpg" alt="slide 1" /></li>');
        document.write('                            </ul>');
        document.write('                        </div>');
        document.write('                    </div>');
        document.write('                </div>');
        document.write('            </div>');
        document.write('        </div> ');
        document.write('        <div id="JScrollWrap" style="margin-bottom:10px;">');
        document.write('            <div id="imgSelc_frame">');
        document.write('                <img id="imgSelc_previous" src="http://www.yourhotcar.com/sbcimages/_library/arrowLeft_Off.jpg"  />');
        document.write('                <img id="imgSelc_next" src="http://www.yourhotcar.com/sbcimages/_library/arrowRight_Off.jpg"  />');
        document.write('            </div>');
        document.write('            <div  id="imgSelc" >');
        document.write('                <ul id="imgSelc_content" >');
        document.write('                    <li class="imgSelc_item" id="thumb0LI"><img id="thumb0" src="http://www.yourhotcar.com/sbcimages/_library/blueBack.jpg" alt="thumbnail 1" /></li>');
        document.write('                </ul> ');
        document.write('            </div>');
        document.write('        </div>');
        document.write('            <div id="detailsWrap" >');
        document.write('                Details:<br>');
        document.write('                <textarea class="blueBack" id="details"></textarea>');
        document.write('            </div> ');
        document.write('    </div>');        
        document.write('        <div id="screen" class="screen" title="Click to Hide" alt="Click to Hide">');
        document.write('        <center>');
        document.write('        <div class="screenContent">');
        document.write('            <img id="screenSrc" class="screenSrc" src="http://www.yourhotcar.com/sbcimages/_library/boxback.jpg" />');
        document.write('        </div>');
        document.write('        </center>');
        document.write('        <img class="screenBack" src="http://www.yourhotcar.com/sbcimages/_library/blueBack.jpg" />');
        document.write('        </div>');
        
        window.addEvent('domready',function(){
            $('screen').addEvent('click', function(){Enlarge(this, true);});
        });
        
        jDisplayFlag = true;
   }

}