//------------------------------------------------------------------------------
//Define Functions
//Step 1 Choose Color
function ColorSelected() {
   $("#imgSwc > img").css({ "border": "3px solid white" });
   $("img[alt=" + $(this).text() + "]").css({ "border": "3px solid #afccce" });
}

//Step 2 Choose Rug Size
function RugSizeSelected() {
   $("#RugSize").val($("#RugSizeMap option:selected").val());
   $("#st2").text($("#RugSizeMap option:selected").text());
   updatePrice();
}

//Step 3 Choose Border Color
//   Border Collection
function BorderCollectionSelected() {
   $("#colorImg").fadeOut(500, function() {
      $("#colorImg img").die();
      $("#colorImg img").remove();
      $("#BorderColorway option:first").attr("selected", "-7");
      $("#st3").text("");
      $("#leftPart").css({ "background-image": "" })
      $("#bottomPart").css({ "background-image": "" })
      $("#BorderColorway > option").each(function() {
         if ($("#BorderCollection option:selected").val() == $(this).attr("parentkititemid")) {
            $(this).removeAttr("disabled");
            $("#colorImg").append($("<img width=\"30px\" height=\"30px\" style=\"margin:3px; border: 3px solid #ffffff\"  src=" + "images/binding/swatch/" + $(this).attr("parentobjectid") + ".jpg alt=" + $(this).text().replace(' ', '_') + " value=" + $(this).val() + " parent=" + $(this).attr("parentobjectid") + "  />"));
         }
         else {
            $(this).attr("disabled", "disabled");
         }
      });
      updatePrice();
      $(".step4").show();
      //var FirstEnabledSelected = false;
      $("#BorderCornerOption > option").each(function() {
         if ($("#BorderCollection option:selected").val() == $(this).attr("parentkititemid")) {
            $(this).removeAttr("selected");
            $(this).removeAttr("disabled");
            //if (!FirstEnabledSelected)
            //{
               //$(this).attr("selected", "selected");
               //FirstEnabledSelected = true;
            //}
         }
         else {
            if ($(this).text() != "Select") {
               $(this).attr("disabled", "disabled");
               $(this).removeAttr("selected");
            }
         }
         $("#BorderCornerOption").change();
         $("#lap").css({ "border": "3px solid transparent" });
         $("#mit").css({ "border": "3px solid transparent" });
      });
      if ($("#BorderCornerOption option:enabled").length > 1) {
         if ($("#BorderCornerOption option:enabled").length == 2) {
            if ($("#BorderCornerOption option:enabled")[1].text == "Lapped") {
               $("#mitered").hide();
               $("#lapped").show();
               CornerTypeSelected("Lapped");
            } else {
               $("#lapped").hide();
               $("#mitered").show();
               CornerTypeSelected("Mitered");
            }
         } else {
            $("#mitered").show();
            $("#lapped").show();
         }
      }
      else {
         $("#mitered").hide();
         $("#lapped").hide();
      }
      $("#colorImg").fadeIn(1000);
      $("#labelColl").text("");
      $("#labelCorn").text("");
      $("#colorImg img").css({ "cursor": "pointer" });
      $("#colorImg img").live('click', function() { BorderColorSelected(this); });
   });  
}

//   Border Color
function BorderColorSelected(_Element) {
   $("#colorImg img").css({ "border": "3px solid #ffffff" });
   $(_Element).css({ "border": "3px solid #b0cfd1" });
   $("#BorderColorway").val($(_Element).attr("value")).attr("selected", "selected");
   $("#leftPart").css({ "background-image": "url('/images/binding/medium/vertical/" + $(_Element).attr("parent") + ".jpg')" });
   $("#bottomPart").css({ "background-image": "url('/images/binding/medium/horizontal/" + $(_Element).attr("parent") + ".jpg')" });
   $("#bottomPart").css({ "z-index": "5" });
   $("#st3").text($(_Element).attr("alt").replace("_", " "));
   updatePrice();
}

// Step 4 Choose Corner Style
function CornerTypeSelected(CornerType) {
   $("#st4").text(CornerType);
   if (CornerType == "Lapped") {
      $("#lap").css({ "border": "3px solid #afccce" });
      $("#mit").css({ "border": "3px solid transparent" });
      $("#bottomPart").css({ "z-index": "5" });
   }
   else if (CornerType == "Mitered") {
      $("#mit").css({ "border": "3px solid #afccce" });
      $("#lap").css({ "border": "3px solid transparent" });
      $("#bottomPart").css({ "z-index": "15" });
   }
   else {
      alert("Unknown CornerType '" + CornerType + "'");
   }
   $("#BorderCornerOption  > option").removeAttr("selected");
   $.each($("#BorderCornerOption option:enabled"), function(intIndex, objValue) {
      if (objValue.text.substring(0, 6) == CornerType.substring(0, 6)) {
         $("#BorderCornerOption").val(objValue.value).attr("selected", "selected");
      }
   });
   $("#BorderCornerOption").change();
   updatePrice();
}

$(document).ready(function() {
   //------------------------------------------------------------------------------
   //Initialization
   $("input:submit").hide();

   //Step 1 Choose Color
   if ($("#imagesTable img").length <= 2) {
      $("#imagesTable img:first").click();
      updateUrl($("#imagesTable img:first").attr("alt").replace(" ", "_"));
      //$("#Color").prepend("<option value=\"Select\">Select</option>");NOT NEEDED, AN OPTION <option value="-,-">Color</option>
      //$("#Color option:gt(0)").attr("selected", "selected");
      //$("#Color").change();
      //$("#imagesTable img").css({ "border": "3px solid #afccce" });
   }
   else {
      $(".zoomit").hide();
   }

   //Step 2 Choose Rug Size
   $("#RugSize").prepend("<option value=\"Select\">Select</option>");
   $("#RugSize option:first").attr("selected", "selected");
   $("#RugSize").change();
   $("#RugSizeMap option").remove();
   $.each($("#RugSize option"), function(intIndex, objValue) {
      if (objValue.text.indexOf(',') >= 0) {
         if (objValue.text != "Swatch") {
            $("#RugSizeMap").append("<option value='" + objValue.value + "'>" + objValue.text.substring(0, objValue.text.indexOf(',')) + "</option>");
         }
      }
      else {
         if (objValue.text != "Swatch") {
            $("#RugSizeMap").append("<option value='" + objValue.value + "'>" + objValue.text + "</option>");
         }
      }
   });
   $("#RugSizeMap").val($("#RugSize option :selected").val());
   if ($("#RugSizeMap option:enabled").length == 2) {
      $("#RugSizeMap option").removeAttr("selected");
      $("#RugSizeMap option:enabled:eq(1)").attr("selected", "selected");
      //$("#RugSizeMap").change();
      RugSizeSelected();
   }

   // Hide Steps 3 & 4 if not needed
   if ($("#BorderCollection option").length <= 0) {
      $(".step3").hide();
      $(".step4").hide();
   }
   else {
      //Step 3 Choose Border Color
      //   Border Collection
      $("#BorderCollection").prepend("<option value=\"Select\" >Select</option>");
      $("#BorderCollection option:first").attr("selected", "selected");

      //   Border Color
      $("#BorderColorway").prepend("<option value=\"Select\">Select</option>");
      $("#BorderColorway option:first").attr("selected", "selected");
      $("#BorderColorway > option").each(function() {
         if ($("#BorderCollection option:selected").val() == $(this).attr("parentkititemid")) {
            $("#colorImg").append($("<img width=\"30px\" height=\"30px\" style=\"margin:3px; border: 1px solid #ffffff\"  src=" + "images/binding/Swatch/" + $(this).attr("parentobjectid") + ".jpg alt=" + $(this).text().replace(' ', '_') + " value=" + $(this).val() + " parent=" + $(this).attr("parentobjectid") + " />"));
         }
         else {
            $(this).attr("disabled", "disabled");
         }
      });
      $("#colorImg img").css({ "cursor": "pointer" });
   }

   // Step 4 Choose Corner Style
   $("#mitered").hide();
   $("#lapped").hide();
   $("#BorderCornerOption").prepend('<option value="Select">Select</option>');
   $("#BorderCornerOption option:first").attr("selected", "selected");

   updatePrice();

   //------------------------------------------------------------------------------------------------------------------
   $("#imageSwatch").clone().appendTo("#imgSwc");
   $("#imageSwatch").remove();
   $("#rightPart > img").click(function() { $(".zoomit:visible").trigger("click"); });
   //$("#bindingContainer").append("<img id=\"rugScale\" style=\"display:none; position:absolute; margin-top:200px;\" src=\"skins/skin_1/images/productDetails/scale.png\" />");
   //$("#scale").hover(
   //   function() {
   //      $("#rugScale").fadeIn("slow");
   //   },
   //   function() {
   //      $("#rugScale").fadeOut("slow");
   //   }
   //);
   $("#accordion2").accordion({ autoHeight: false });

   //------------------------------------------------------------------------------
   //Register Events
   //Step 1 Choose Color
   $("#Color").change(function() { ColorSelected(); });

   //Step 2 Choose Rug Size
   $("#RugSizeMap").change(function() { RugSizeSelected(); });

   //Step 3 Choose Border Color
   //   Border Collection
   $("#BorderCollection").change(function() { BorderCollectionSelected(); });

   //   Border Color

   // Step 4 Choose Corner Style
   $("#mitered").click(function() { CornerTypeSelected("Mitered"); });
   $("#lapped").click(function() { CornerTypeSelected("Lapped"); });

   if ($("#BorderCollection option:enabled").length == 2) {
      $("#BorderCollection option").removeAttr("selected");
      $("#BorderCollection option:enabled:eq(1)").attr("selected", "selected");
      //$("#BorderCollection").change();
      BorderCollectionSelected();
   }
});
//$().load(function() { $(".zoomit").hide(); });

function checkImg() {
   var imgs = $("#rightPart > img[src$='_.jpg']");
   if (imgs.length > 0) {
      $("#leftPart").css({ "background-image": "url('')" })
      $("#bottomPart").css({ "background-image": "url('')" })
   }
}
function updatePrice() {
   var prID = $("#ProductID").val();
   $("#upd").ajaxSubmit(function() {
      $.ajax({
         contentType: "application/json; charset=utf-8",
         data: "{'productId' : " + prID + "}",
         dataType: "json",
         type: "POST",
         url: "ajaxOperations.asmx/getKitPrice",
         beforeSend: function() { $('.AddToCartButton').attr("disabled", "disabled"); },
         success: function(response) { $("#priceString").text(response.d); },
         complete: function() { $('.AddToCartButton').removeAttr("disabled"); }
      });
   });
}
function updatePriceAndWait() {
   var prID = $("#ProductID").val();
   $("#upd").ajaxSubmit(function() {
      $.ajax({
         async: false,
         contentType: "application/json; charset=utf-8",
         data: "{'productId' : " + prID + "}",
         dataType: "json",
         type: "POST",
         url: "ajaxOperations.asmx/getKitPrice",
         error: function() { return false; },
         success: function(response) {
            $("#priceString").text(response.d); return true;
         },
         complete: function() { return true; }
      });
   });
}
function checkKitOptions() {
   var errors = "";
   if ($("#RugSize option:selected").text() == "Select") {
      errors += "Rug Size is not selected\r\n";
   }
   if ($("#Color option:selected").text() == "Color") {
      errors += "Colorway is not selected\r\n";
   }
   if ($("#BorderCollection option:selected").text() == "Select") {
      errors += "Border Collection is not selected\r\n";
   }
   else {
      if ($("#BorderColorway option:selected").text() == "Select") {
         errors += "Border Color is not selected\r\n";
      }
      if ($("#BorderCornerOption option:selected").text() == "Select") {
         errors += "Border Corner Type is not selected\r\n";
      }
   }
   if (errors != "") {
      alert(errors);
      return false;
   }
   return true;
}
function checkKitOptions2() {
   var errors = "";
   if ($("#RugSize option:selected").text() == "Select") {
      errors += "Rug Size is not selected\r\n";
   }
   if ($("#Color option:selected").text() == "Color") {
      errors += "Colorway is not selected\r\n";
   }
   if ($("#BorderCollection option:selected").text() == "Select") {
      errors += "Border Collection is not selected\r\n";
   }
   else {
      if ($("#BorderColorway option:selected").text() == "Select") {
         errors += "Border Color is not selected\r\n";
      }
      if ($("#BorderCornerOption option:selected").text() == "Select") {
         errors += "Border Corner Type is not selected\r\n";
      }
   }
   if (errors != "") {
      alert(errors);
      return false;
   }
   return true;
}
function updateUrl(id) {
   $("#imagesTable img").css({ "border": "3px solid #ffffff" });
   $("#" + id).css({ "border": "3px solid #b0cfd1" });
   //var productId2 = $("#ProductID").val();
   var color2 = $("#" + id).attr("alt");
   $(".zoomit").hide();
   $("a[title=" + color2 + "]").show();
   $("#st1").text(color2);
}