$(document).ready(function(){

  shelldir = themedir + "/images/shell/";
  shellfiletype = ".png";
  leddir = themedir + "/images/led/";
  ledfiletype = (ltie7)? ".gif" : ".png";
  sticksdir = themedir + "/images/sticks/";
  sticksfiletype = (ltie7)? ".gif" : ".png";

  $("#products li").each(function(){

    //change filetype for images for IE6 and lower
    if(ltie7) {
      $("#products").find("img.led, img.sticks").each(function(){
        srcdata = $(this).attr("src");
        srcdata = srcdata.replace(/.png/, ".gif");
      });
    }

    $(this).find("select[name='options[shell_color]']").change(function(){
      //update shell image
      newshell = $(this).find("option:selected").data("shell");
      newshellimg = shelldir + newshell.split(" ").join("").toLowerCase() + shellfiletype;
      $(this).parents("li").find("img.shell").attr("src", newshellimg);
      //update led image
      if($(this).find("option:selected").length) {
        newled = $(this).find("option:selected").data("led");
      } else {
        newled = $(this).find("option:first").data("led");
      }
      exclusiveled = (newled.match(/\*/))? true : false;
      newled = newled.split("*").join("");
      newledimg = leddir + newled.split(" ").join("").toLowerCase() + ledfiletype;
      $(this).parents("li").find("img.led").attr("src", newledimg);
      //update leds
      $(this).parents("li").find("select[name='options[led_color]'] div").each(function(){
        $(this).replaceWith($(this).find("option"));
      });
      $(this).parents("li").find("select[name='options[led_color]'] option").each(function(){
        newlabel = $(this).data("led");
        if($(this).data("led")==newled) {
          $(this).attr("selected", true);
        }else {
          $(this).removeAttr("selected");
          if($(this).data("price")) {
            newlabel += " +$" + $(this).data("price");
          }
          if(exclusiveled) {
            $(this).wrap("<div></div>");
            $(this).parent().hide();
          }
        }
        $(this).html(newlabel);
      });
      //update sticks
      $(this).parents("li").find("select[name='options[thumbsticks]'] div").each(function(){
        $(this).replaceWith($(this).find("option"));
      });
      $(this).find("option")
      //if the default shell color is gray
      if($(this).find("option:selected").data("sticks")=="Gray") {
        $(this).parents("li").find("select[name='options[thumbsticks]']").attr('selectedIndex', '-1').find("option").each(function(){
          newlabel = $(this).data("sticks");
          switch(newlabel) {
            case "Gray":
              $(this).attr("selected", true);
              break;
            default:
              if($(this).data("price")) {
                newlabel += " +$" + $(this).data("price");
              }
              break;
          }
          $(this).html(newlabel);
        });
      //if the default shell color is black
      } else {
        $(this).parents("li").find("select[name='options[thumbsticks]']").attr('selectedIndex', '-1').find("option").each(function(){
          newlabel = $(this).data("sticks");
          switch(newlabel) {
            case "Gray":
              $(this).wrap("<div></div>");
              $(this).parent().hide();
              break;
            case "Black":
              $(this).attr("selected", true);
              break;
            default:
              if($(this).data("price")) {
                newlabel += " +$" + $(this).data("price");
              }
              break;
          }
          $(this).html(newlabel);
        });
      }
      $(this).parents("li").find("select[name='options[thumbsticks]']").trigger("change");
    })
    //shell data
    .find("option").each(function(){
      val = $(this).val();
      parts = val.split("_");
      sticks = (parts[0].match(/\*/))? "Gray" : "Black";
      $(this)
        .data("shell", parts[0].split("-").join(" ").split("*").join(" "))
        .data("led", parts[1].split("-").join(" "))
        .data("price", parts[2].split("-").join("."))
        .data("sticks", sticks);
    });

    //led color
    $(this).find("select[name='options[led_color]'] option").each(function(){
      val = $(this).val();
      parts = val.split("_");
      $(this)
        .data("led", parts[0].split("-").join(" "))
        .data("price", parts[2].split("-").join("."))
        .parent().change(function(){
          //update led image
          newled = $(this).find("option:selected").data("led");
          newledimg = leddir + newled.split(" ").join("").toLowerCase() + ledfiletype;
          $(this).parents("li").find("img.led").attr("src", newledimg);
        });
    });

    //thumbsticks
    $(this).find("select[name='options[thumbsticks]'] option").each(function(){
      val = $(this).val();
      parts = val.split("_");
      $(this)
        .data("sticks", parts[0].split("-").join(" "))
        .data("price", parts[2].split("-").join("."));
    });
    $(this).find("select[name='options[thumbsticks]']").change(function(){
      //update thumbsticks image
      //if the first item is selected use the "default" transparent image
      if($(this).children("option:first:selected").length) {
        newsticks = "default";
      } else {
        newsticks = $(this).find("option:selected").data("sticks");
      }
      //alert(newsticks);
      newsticksimg = sticksdir + newsticks.split(" ").join("").toLowerCase() + sticksfiletype;
      $(this).parents("li").find("img.sticks").attr("src", newsticksimg);
    });
  });

  //initialize
  $(this).find("select[name='options[shell_color]']").trigger("change");
  $(this).find("select[name='options[thumbsticks]']").trigger("change");

});