var ojson = null;
  
  
  Event.observe(window, "load", load_first); 
  

  // ----------------------------------------------------------------------------
  /*
   * Fetch product information from Server via AJAX
   * 
   */
  function load_first(e) {
    if ((fstyle) && (fstyle != "")) { 
      fetch_product(fstyle, null);
    }
  }
  // ----------------------------------------------------------------------------
  /*
   * Fetch product information from Server via AJAX
   * 
   */
  function fetch_product(tstyle, ttype) {
    Element.setStyle("loading", {visibility:"visible"});
    if (tstyle != "") {
      Element.setStyle("product_color", {visibility:"hidden"});
      var rurl = "/index.php/store/product/style/" + tstyle;
      var oajax = new Ajax.Request(rurl, { 
                                   method: "post",
                                   onSuccess: function(obj) {
                                                var prod_name = "";
                                                var prod_desc = "";
                                                var avail_colors = "";
                                                var col_name   = "";
                                                var col_dm = "";
																						    var bgimage = "/images/noimage.gif";
																						    //Element.setStyle("product_image", {backgroundImage:"url('"+bgimage+"')"});
                                                $("product_image").src = bgimage;
																						    if (ojson = obj.responseText.evalJSON(true)) {
                                                  if (ojson.product_name != "") {
                                                    prod_name = ojson.product_name;
                                                    prod_desc = ojson.description;
                                                    avail_colors = ojson.available_colors;
																						        //if (ojson.images.length > 0) {
																						        //  bgimage = ojson.images[0].url;
                                                    //  bgx = ojson.images[0].imagex;
                                                    //  bgy = ojson.images[0].imagey;
																						        //}
																						        if (ojson.colors.length > 0) {
																						          col_name = ojson.colors[0].col;
																						          col_dm = ojson.colors[0].dm;
																						          if (col_name == "*") { col_name = ""; }
																						          if (col_dm == "*") { col_dm = ""; }
																						          //bgimage = ojson.colors[0].image.url;
                                                      //bgx = ojson.colors[0].image.imagex;
                                                      //bgy = ojson.colors[0].image.imagey;
																						        }
                                                  } else {
                                                    prod_name = "<b>" + tstyle + "</b> NOT FOUND!";
                                                  }
                                                  if ((!bgimage)||(bgimage == "")) { bgimage = "/images/noimage.gif"; bgx = 275; bgy=200; }
																						      $("product_name").innerHTML = prod_name;
																						      $("product_desc").innerHTML = prod_desc;
																						      $("product_colors").innerHTML = avail_colors;
																						      //$("product_image").src = bgimage;
                                                  //$("product_image").width = bgx;
                                                  //$("product_image").height = bgy;
																						      $("color_name").innerHTML = col_name+" ("+col_dm+")";
																						      swap_image(col_name, col_dm);
                                                  if (ttype == "S") {
                                                    $("crumbs").innerHTML = "<b>SEARCH RESULT</b> style: <u>"+tstyle+"</u>";
                                                  } else {
                                                    $("crumbs").innerHTML = js_crumbs;
                                                  }
																						    }
                                                Element.setStyle("loading", {visibility:"hidden"});
																						  },
                                   onFailure: function(tstyle) {
                                                alert(tstyle + " not found!");
                                              }
                                   }
                                 );
    }
  }

// ----------------------------------------------------------------------------
  /*
   * Show product color / size
   *
   */
   function show_colorsize() {
     
     var view_state = Element.getStyle("product_color", "visibility");
     if (view_state == "visible") {
       Element.setStyle("product_color", {visibility: "hidden"});
       //Element.setStyle("colorsize", { backgroundColor: "#FFFFFF" });
     } else {
	     Element.setStyle("product_color",
	                      {
	                      visibility: "visible",
	                      width: 400,
	                      height:275,
	                      clear: "both",
                        overflow: "auto",
	                      backgroundColor: "#FFFFFF",
	                      border: "solid 1px #FFCC00",
                        borderRight: "solid 3px #FFCC33",
                        borderBottom: "solid 3px #FFCC33"
	                     });
      //Element.setStyle("colorsize", { backgroundColor: "#FFCC33" });
	  }
  }
  
// ----------------------------------------------------------------------------
  /*
   * launch larger image in new window
   *
   */
  function zoom_image() {
    var imgsrc = $("product_image").src;
    if (imgsrc != "") {
      //if ((imgsrc.substr(0,3) == "url") && (imgsrc.indexOf("noimage.gif") < 0)) {
      //  imgsrc = imgsrc.substring(4,imgsrc.length-1);
        window.open(imgsrc,"_site","");
      //}
    }
  }  
// ----------------------------------------------------------------------------
  /*
   * display color specific colors
   *
   */
   function dis_color(tcol, tdm) {
      
     var dim = ""; 
     var tcol_html = "";
     //var sizes = new Array("&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;");
     //var ats = new Array("&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;","&nbsp;");
     var sizes = new Array("","","","","","","","","","","","","","","","","","","","");
     var ats = new Array("","","","","","","","","","","","","","","","","","","","");
     if ((tcol != "") && (tcol != "*") && (tdm != "") && (tdm != "*")) {
       var ocolor = get_json_color(tcol, tdm);
       if (ocolor) {
         if (ocolor.v1 == "Y") { sizes[0] = ojson.style.s1; ats[0] = ocolor.ats.size1; }
         if (ocolor.v2 == "Y") { sizes[1] = ojson.style.s2; ats[1] = ocolor.ats.size2; }
         if (ocolor.v3 == "Y") { sizes[2] = ojson.style.s3; ats[2] = ocolor.ats.size3; }
         if (ocolor.v4 == "Y") { sizes[3] = ojson.style.s4; ats[3] = ocolor.ats.size4; }
         if (ocolor.v5 == "Y") { sizes[4] = ojson.style.s5; ats[4] = ocolor.ats.size5; }
         if (ocolor.v6 == "Y") { sizes[5] = ojson.style.s6; ats[5] = ocolor.ats.size6; }
         if (ocolor.v7 == "Y") { sizes[6] = ojson.style.s7; ats[6] = ocolor.ats.size7; }
         if (ocolor.v8 == "Y") { sizes[7] = ojson.style.s8; ats[7] = ocolor.ats.size8; }
         if (ocolor.v9 == "Y") { sizes[8] = ojson.style.s9; ats[8] = ocolor.ats.size9; }
         if (ocolor.v10 == "Y") { sizes[9] = ojson.style.s10;  ats[9] = ocolor.ats.size10; }
         if (ocolor.v11 == "Y") { sizes[10] = ojson.style.s11; ats[10] = ocolor.ats.size11; }
         if (ocolor.v12 == "Y") { sizes[11] = ojson.style.s12; ats[11] = ocolor.ats.size12; }
         if (ocolor.v13 == "Y") { sizes[12] = ojson.style.s13; ats[12] = ocolor.ats.size13; }
         if (ocolor.v14 == "Y") { sizes[13] = ojson.style.s14; ats[13] = ocolor.ats.size14; }
         if (ocolor.v15 == "Y") { sizes[14] = ojson.style.s15; ats[14] = ocolor.ats.size15; }
         if (ocolor.v16 == "Y") { sizes[15] = ojson.style.s16; ats[15] = ocolor.ats.size16; }
         if (ocolor.v17 == "Y") { sizes[16] = ojson.style.s17; ats[16] = ocolor.ats.size17; }
         if (ocolor.v18 == "Y") { sizes[17] = ojson.style.s18; ats[17] = ocolor.ats.size18; }
         if (ocolor.v19 == "Y") { sizes[18] = ojson.style.s19; ats[18] = ocolor.ats.size19; }
         if (ocolor.v20 == "Y") { sizes[19] = ojson.style.s20; ats[19] = ocolor.ats.size20; }
         if (ocolor.dm != "NA") { dim = "("+ocolor.dm+")"; }
         tcol_html += "<tr>" +
                      "<td colspan='21' class='smallText'>viewing available sizes for <b>"+ tcol + " " + ocolor.coldesc + " " + dim +"</b></td>" + 
                      "</tr>";
         
         // SIZES
         var cnum = 0;
         tcol_html += "<tr valign='top' align='left' class='smallText'><td width='23px'><b>SIZE</b></td>";
         for (var idx=0; idx<20; idx++) {
           if (sizes[idx] == "") { continue; }
           cnum++;
           tcol_html += "<td width='23px' align='center' style='border:solid 1px #C0C0C0'>"+sizes[idx]+"</td>";
         }
         if (cnum < 20) {
           for (var idx=cnum; idx<20; idx++) {
             tcol_html += "<td width='23px'>&nbsp;</td>";
           }
         }
         tcol_html += "</tr>";
         
         // ATS
         cnum = 0;
         tcol_html += "<tr valign='top' align='left' class='smallText'><td><b>QTY</b></td>";
         for (var idx=0; idx<20; idx++) {
           if (sizes[idx] == "") { continue; }
           cnum++;
           tcol_html += "<td width='23px' align='center' style='border:solid 1px #C0C0C0'>"+ats[idx]+"</td>";
         }
         if (cnum < 20) {
           for (var idx=cnum; idx<20; idx++) {
             tcol_html += "<td width='23px'>&nbsp;</td>";
           }
         }
         tcol_html += "</tr>";

         tcol_html = "<table width='460' cellpadding='1' cellspacing='0' border='0'>" +
                     tcol_html +
                     "</table>";
       }
     }
     $("product_sizes").innerHTML = tcol_html;
   }

// ----------------------------------------------------------------------------
  /*
   * Get specific color entry
   *
   */
   function get_json_color(tcol, tdm) {
     
     rtn = null;
     if (ojson) {
       if (ojson.colors.length > 0) {
         for (var idx=0; idx<ojson.colors.length; idx++) {
           if ((ojson.colors[idx].col == tcol) && (ojson.colors[idx].dm == tdm)) {
             rtn = ojson.colors[idx];
             break;
           }
         }
       }
     }
     return rtn;
   }

// ----------------------------------------------------------------------------
  /*
   * swap image
   * 
   */  
  function swap_image(tcol, tdm) {
    
    bgimage = "/images/noimage.gif";
    if ((tcol != "") && (tcol != "*") && (tdm != "") && (tdm != "*")) {
      if (ojson) {
        if (ojson.colors.length > 0) {
          for (var idx=0; idx < ojson.colors.length; idx++) {
            if (ojson.colors[idx].col == tcol) {
              bgimage = ojson.colors[idx].image.url;
              bgx = ojson.colors[idx].image.imagex;
              bgy = ojson.colors[idx].image.imagey;
            }
          }
          if (bgimage == "") { bgimage = "/images/noimage.gif"; } 
        }
        /*
        if (ojson.images.length > 0) {
          for (var idx=0; idx < ojson.images.length; idx++) {
            if (ojson.images[idx].col == tcol) {
              bgimage = ojson.images[idx].url;
              bgx = ojson.images[idx].imagex;
              bgy = ojson.images[idx].imagey;
            }
          }
          if (bgimage == "") { bgimage = "/images/noimage.gif"; } 
        }
        */
      } else {
        tcol = "";
      }
      $("color_name").innerHTML = tcol+" ("+tdm+")";
      dis_color(tcol, tdm);
    }
    //$("product_image").setStyle({backgroundImage:"url('"+bgimage+"')"});
    $("product_image").src = bgimage;
    $("product_image").width = bgx;
    $("product_image").height = bgy;
  }
  
// ----------------------------------------------------------------------------
  
  /*
   * display search form
   *
   */
  function toggle_search(tact) {
    
    if ($("product_name")) {
      Element.setStyle("search_form", {visibility: tact});
      $("prod_search")["stylenum"].focus();
    } else {
      alert("Unable to search product in non-product listing page");
    }
    
  }

// ----------------------------------------------------------------------------
  
  function search_product() {
    
    var frm = $("prod_search");
    var ostyle = frm["stylenum"];
    var tstyle = $(ostyle).getValue();
    if (tstyle!= "") {
      fetch_product(tstyle, "S");
    }
    $(ostyle).clear();
    ostyle.focus();
    return false;
  }
  
// ----------------------------------------------------------------------------