if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
 var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
}

if  (ieversion < 7) {
} else {
$(document).ready(function() {

    //Assign select.select_new object into a variable array so program will pick up additional select_new fields
    select_new_index = ['select_new', 'select_new2'] ;
    
  
   


    for (i = 0; i < select_new_index.length; ++ i) {
       manipulate_dropdown_images(select_new_index[i]);
    }


   //Disables the crystal colors dropdown if no crystal is selected
   if ( $("select[name=Product_Attributes[4]:value]").attr('value') == "") {
      $('select.select_new2').attr('disabled', 'disabled'); 
   }




  // Sets the If rhinestone type is selected, enable crystal colors dropdown. Otherwise, reset and disable
  $("select[name=Product_Attributes[4]:value]").change(function() {
       if ($('option:selected', $(this)).attr('value') != "")  {
          //alert($('option:selected', $(this)).text());
           $('select.select_new2').removeAttr('disabled');

          //Swap Images based on selection. If standard crystal is selected, use product_2. Swarovski use product_99
          if ( $('option:selected', $(this)).attr('value') == "Swarovski" ) {
            $('select.select_new2').attr('id', 'product_99'); 
          } else {
            $('select.select_new2').attr('id', 'product_2'); 
          }
          reset_crystal_colors_dropdown();

       } else {
           //resets crystal colors dropdown
           reset_crystal_colors_dropdown();

           //Disables crystal colors dropdown
           $('select.select_new2').attr('disabled', 'disabled'); 
       }


   });

});


function manipulate_dropdown_images(select_new_index) {

  var select_new_txt = "select."+ select_new_index + "";
  var select_new_var = $('select.' + select_new_index + '');

  select_new_var.mousedown(
    function(e){block_select(e,this);}  
  ).focus(
    function(e){block_select(e,this);}  
  ).click(
    function(e){block_select(e,this);}
  ).dblclick(
    function(e){block_select(e,this);}
  );
  select_new_var.mousedown(function(event){
    var sel = $(this);
    sel.find('option').each(function(e){
      if(this.value && !this.selected){$(this).remove();}
    });
    //display our DIV
    var div = $("div.dropdown[sel="+sel.attr('id')+"]");
    var pos = sel.offset();
    div.css({"border":0, "top":20,"left":0,"position":"absolute","z-index":1001});
    div.show();
    block_select(event,this);
  });
  //convert every select field in the DOM with the class "select_new" into the new select format
  select_new_var.each(function(){
    var str = "";
    var select = this.id;
    //$(this).wrap("<div style='position: relative;text-align:left;'></div>");
    //convert all the "option" tags into selectable DIVs
    $(this).find("option").each(function(){
      var image = $(this).attr('img');
      var link = $(this).attr('link');
      var val = $(this).attr('value');
      var label = $(this).text();
      //avoid selected the default select option used for labeling
      if(val){
        if(this.selected){cla='selected';}else{cla='unselected';}
        //append our div formating to the str variable which will be output to the browser after the iteration
        str += "\n<div class='selectitem "+cla+"' value='"+val+"'><img src='"+image+"'><div class='label'>"+label+"</div></div>\n";;
        if(!this.selected){$(this).remove();}
      }
    });
    $(this).after("\n<div class='dropdown' sel='"+select+"'>"+str+"<div style='clear:both;'></div></div>\n");
  });
  //event to trigger when a select item is chosen
  $("div.selectitem").mousedown(function(){
    //get product label, value, and select field id into variables
    var label = $(this).find('.label').html();
    var val = $(this).attr('value');
    var sel = $(this).parent().attr('sel');
    $(""+ select_new_txt + "[id="+sel+"]").append('<option value='+val+' selected>'+label+'</option>');
    //need both event triggers below to reinitiate dynamic form validation
    $(""+ select_new_txt + "[id="+sel+"]").focus();
    $(""+ select_new_txt + "[id="+sel+"]").blur();
    //style selected and unselected DIVs
    $("div.dropdown[sel="+sel+"] > div.selectitem").removeClass("selected");
    $(this).addClass("selected");
    //hide the div containing select options
    //$("div.dropdown[sel="+sel+"]").fadeOut();
    $("div.dropdown[sel="+sel+"]").hide();




    var sPath = window.location.pathname;
    var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);


    //Only allow this behavior when tshirt style is changed (id=product_1). All other image drop down will not affect tshirt color
    if (sel ==  "product_1") {
       // Detect which function  is on onchange.js
       //Parse the onchange to determine function
       var change_func = $("select[name=Product_Attributes[1]:value]").attr("onchange").toString();
       if (typeof change_func != 'undefined') {
          change_func = change_func.substring(change_func.indexOf("{")+ 1,change_func.indexOf("}") ).trim();
       }

       if (change_func.search("checkOptions") != -1) {
           checkOptions('product');
       } else if (change_func.search("checkHoodyOptions") != -1) {
           checkHoodyOptions('product');
       } else if (change_func.search("checkKidOptions")  != -1) {
           checkKidOptions('product'); 
       } else if (change_func.search("checkSweatpantOptions") != -1 ) {
          checkSweatpantOptions('product') ;
       } else {
           //checkOptions('product');
       }
    }


   
  }).hover(function(){
    $(this).addClass("hover");  
  },function(){
    $(this).removeClass("hover");
  });

  $("div.dropdown").mouseleave(function(){$(this).hide();});



}



function reset_crystal_colors_dropdown() {
           //resets crystal colors dropdown
           $('select.select_new2').each(function(){
               var str = "";
               var select = this.id;
               //$(this).wrap("<div style='position: relative;text-align:left;'></div>");
               //convert all the "option" tags into selectable DIVs
               $(this).find("option").each(function(){
               var image = $(this).attr('img');
               var link = $(this).attr('link');
               var val = $(this).attr('value');
               var label = $(this).text();
               //avoid selected the default select option used for labeling
               if(label){
                  if(val==""){cla='selected';}else{cla='unselected';}
                  //append our div formating to the str variable which will be output to the browser after the iteration
                  str += "\n<div class='selectitem "+cla+"' value='"+val+"'><img src='"+image+"'><div class='label'>"+label+"</div></div>\n";
                  if(val!=""){$(this).remove();}
                   }
            });
           });
}

function block_select(ev,el){
  ev.preventDefault();
  el.focus();
  el.blur();
}

}