var Template = 
{
    RequestSent:false,
    DShapeID:"",
    DShapeName:"",
    Metal:"",
    StyleID:"",
    Color:"",
    ShapeImage:"",
    DIVHTML:"",
    ClartyColor:"",
    CheckStyle:false,
    CountItemColumn:0,
    CategoryID:"",
    GetDiamondID:function()
    {
        Template.DShapeID="";Template.DShapeName="";
        $.each($("input[name*='DShapeName']:checked"),function(i,chk){Template.DShapeID = $(chk).val();Template.DShapeName=$(chk).attr("DSM");});
        if(Template.DShapeID==""){$.each($("input[id*='DShapeID']:checked"),function(i,chk){Template.DShapeID = $(chk).val();Template.DShapeName=$(chk).attr("DSM");});}
    },
    
    GetStyleMetal:function()
    {       
        Template.Metal="";Template.StyleID="";
        $.each($("input[name='StyleMetal']:checked"),function(i,chk){Template.Metal = $(chk).attr("Metal");Template.StyleID = $(chk).attr("ST");});
        if(Template.Metal=="" && Template.StyleID==""){$.each($("input[name*='StyleMetal']:checked"),function(i,chk){Template.Metal = $(chk).attr("Metal"); Template.StyleID = $(chk).attr("ST");});}
    },
    
    GetColor:function()
    {
        Template.Color="";
        $.each($("input[name*='DColorName']:checked"),function(i,chk){Template.Color = $(chk).val();});
        if(Template.Color==""){$.each($("input[id*='_DColor_']:checked"),function(i,chk){Template.Color = $(chk).val();});}
    },
    
    Search:function()
    {
       // alert("StyleID " + Template.StyleID);
        if(Template.StyleID==""){Template.StyleID=0;Template.ShapeImage="";Template.DIVHTML="";Template.ClartyColor="";Template.CountItemColumn=0;Template.CheckStyle=true;}
        if(Template.DShapeID=="")Template.DShapeID=0;
       // alert("CatID:"+CatID+"\nType:"+Type+"\nDShapeID:"+Template.DShapeID+"\nStyleID:"+Template.StyleID+"\nMetal:"+Template.Metal+"\nColor:"+Template.Color+"\nTemplate.CountItemColumn:"+Template.CountItemColumn);
        Templates_Template17.GetStyleType(parseInt(CatID),Type,parseInt(Template.DShapeID),parseInt(Template.StyleID),Template.Metal,Template.Color,parseInt(Template.CountItemColumn),Template.Callback_StyleType);
    },
    
    Callback_StyleType:function(res)
    {
        
    
    //  alert("data " + res.value);
        Template.ShowMessage(res.value);
        var data = eval("("+res.value+")");
        //Template.ShowMessage(data.TotalRecord);
        //alert(data.Color);
        if(Template.CheckStyle==true)
        {
            Template.ShapeImage=data.ShapeImage.split(",");
            Template.DIVHTML=data.DIVHTML.split(",");
            Template.ClartyColor=data.ClartyColor.split(",");
        }
//        else
//        {
//          Template.ClartyColor=data.Color + ",";
//        }
        Template.CountItemColumn = parseInt(data.CountItemColumn);
        
        
        Template.CheckStyle=false;
        if(data.CheckShape==true && parseInt(data.ShapesTotalRecord)>0 && data.ShapeRows.length>0)
        {
            Template.SetShapeRows(parseInt(data.ShapesTotalRecord),data.ShapeRows);
        }
        else if(data.CheckShape==true)
        {
            PopMessageBox.title = "Search Result";
            PopMessageBox.message = "No shape record(s) found";
            PopMessageBox.ShowMessage();
            return;
        }
        
       
        if(parseInt(data.StyleTotalRecord)>0 && data.StyleRows && parseInt(data.StyleRows.length)>0)
        {
            Template.SetStyleRows(data.StyleTotalRecord,data.StyleRows);
        }
       
      
        Template.SetItem(data.RowsCombination);
        
         
        Template.DShapeID="";Template.DShapeName="";Template.Metal="";Template.StyleID="";Template.Color="";
        
    }
    ,SetShapeRows:function(_count,rows)
    {
        $("div[id*='_divDiamondShape'] div.shpoutr").html("");
        
        $("div[id*='_divDiamondShape'] div.shpoutr").css({"width":(parseInt(rows.length)*120)});
        $.each(rows,function(i,row)
        {   
            $("div[id*='_divDiamondShape'] div.shpoutr").append
            (   
                $("<div></div>").addClass("diacat")
                .append
                (
                    $("<div></div>").addClass("dimg").append
                    (
                       $("<img />").attr({"src":row.ShapeImage,"alt":row.ShapeName})
                    )
                )
                .append
                (
                    $("<div></div>").addClass("dtc boxsubtxt").html(row.ShapeName)
                )
                .append
                (
                     $("<div></div>").addClass("check").append
                     (
                        $("<input type=\"radio\" />").attr({"name":"DShapeName","id":"_DShapeID_"+row.ShapeName+"_"+row.ShapeID,"dsm":row.ShapeName}).val(row.ShapeID)
                     )
                )
            );
        });
        $("input[name*='DShapeName']").change(function()
        {
            Template.GetColor();
            Template.GetDiamondID();
            Template.Search();
        });
    }
    
    ,SetStyleRows:function(_count,rows)
    {
        $("div[id*='divSettingStyle'] div.pendout").html("");
       // $("div[id*='divSettingStyle'] div.pendout").css({"width":(parseInt(rows.length)*115)});
        

  if(rows.length == 1)
       {
          $("div[id*='divSettingStyle'] div.pendout").css({'width':'973px','padding-left':'400px'});
       }
       else if(rows.length == 2)
       {
         $("div[id*='divSettingStyle'] div.pendout").css({'width':'973px','padding-left':'350px'});
       }
       else if(rows.length == 3)
       {
         $("div[id*='divSettingStyle'] div.pendout").css({'width':'973px','padding-left':'300px'});
       }
       else if(rows.length == 4)
       {
         $("div[id*='divSettingStyle'] div.pendout").css({'width':'973px','padding-left':'265px'});
       }
       else if(rows.length == 5)
       {
         $("div[id*='divSettingStyle'] div.pendout").css({'width':'973px','padding-left':'200px'});
       }
       else if(rows.length == 6)
       {
         $("div[id*='divSettingStyle'] div.pendout").css({'width':'973px','padding-left':'150px'});
       }
       else if(rows.length == 7)
       {
         $("div[id*='divSettingStyle'] div.pendout").css({'width':'973px','padding-left':'100px'});
       }
       else
       {
         $("div[id*='divSettingStyle'] div.pendout").css({'width':'973px','padding-left':'10px'});
       }



        $.each(rows,function(i,row)
        {   
            if(i==rows.length-1)
            {
               $("div[id*='divSettingStyle'] div.pendout").append($("<div id=\"dss_"+(i+1)+"\"></div>").addClass(((i+1)==_count)?"pendantsettingcatwithotbordert":"pendantsettingcat"));
            }
            else
            {
              $("div[id*='divSettingStyle'] div.pendout").append($("<div id=\"dss_"+(i+1)+"\"></div>").addClass(((i+1)==_count)?"pendantsettingcatwithotbordert":"pendantsettingcat"));
            }
            $("div[id*='divSettingStyle'] div.pendout div[id='dss_"+(i+1)+"']").append("<div class=\"oneline green_14_arial\"><strong>"+row.StyleName+"</strong></div>");
            $("div[id*='divSettingStyle'] div.pendout div[id='dss_"+(i+1)+"']").append("<div id=\"StyleImage"+row.StyleID+"\" class=\"StyleImage\"><img src=\""+row.Image+"\" alt=\""+row.StyleName+"\" style=\"width:80px;height:90px;\" /></div>");
            if(row.StyleMetal1 && row.StyleMetal1!="")
                $("div[id*='divSettingStyle'] div.pendout div[id='dss_"+(i+1)+"']").append("<div class=\"smg fourfour_12_arial\"><input id=\"Style"+(i+1)+"Metal1\" name=\"StyleMetal\" type=\"radio\" value=\""+row.StyleMetal1+"_"+row.StyleID+"\" st=\""+row.StyleID+"\" metal=\""+row.StyleMetal1+"\" />"+row.StyleMetal1+"</div>");
            if(row.StyleMetal2 && row.StyleMetal2!="")
                $("div[id*='divSettingStyle'] div.pendout div[id='dss_"+(i+1)+"']").append("<div class=\"smg fourfour_12_arial\"><input id=\"Style"+(i+1)+"Metal2\" name=\"StyleMetal\" type=\"radio\" value=\""+row.StyleMetal2+"_"+row.StyleID+"\" st=\""+row.StyleID+"\" metal=\""+row.StyleMetal2+"\" />"+row.StyleMetal2+"</div>");
            if(row.StyleMetal3 && row.StyleMetal3!="")
                $("div[id*='divSettingStyle'] div.pendout div[id='dss_"+(i+1)+"']").append("<div class=\"smg fourfour_12_arial\"><input id=\"Style"+(i+1)+"Metal3\" name=\"StyleMetal\" type=\"radio\" value=\""+row.StyleMetal3+"_"+row.StyleID+"\" st=\""+row.StyleID+"\" metal=\""+row.StyleMetal3+"\" />"+row.StyleMetal3+"</div>");
            if(row.StyleMetal4 && row.StyleMetal4!="")
                $("div[id*='divSettingStyle'] div.pendout div[id='dss_"+(i+1)+"']").append("<div class=\"smg fourfour_12_arial\"><input id=\"Style"+(i+1)+"Metal4\" name=\"StyleMetal\" type=\"radio\" value=\""+row.StyleMetal4+"_"+row.StyleID+"\" st=\""+row.StyleID+"\" metal=\""+row.StyleMetal4+"\" />"+row.StyleMetal4+"</div>");
            if(row.StyleMetal5 && row.StyleMetal5!="")
                $("div[id*='divSettingStyle'] div.pendout div[id='dss_"+(i+1)+"']").append("<div class=\"smg fourfour_12_arial\"><input id=\"Style"+(i+1)+"Metal5\" name=\"StyleMetal\" type=\"radio\" value=\""+row.StyleMetal5+"_"+row.StyleID+"\" st=\""+row.StyleID+"\" metal=\""+row.StyleMetal5+"\" />"+row.StyleMetal5+"</div>");
            if(row.StyleMetal6 && row.StyleMetal6!="")
                $("div[id*='divSettingStyle'] div.pendout div[id='dss_"+(i+1)+"']").append("<div class=\"smg fourfour_12_arial\"><input id=\"Style"+(i+1)+"Metal6\" name=\"StyleMetal\" type=\"radio\" value=\""+row.StyleMetal6+"_"+row.StyleID+"\" st=\""+row.StyleID+"\" metal=\""+row.StyleMetal6+"\" />"+row.StyleMetal6+"</div>");
            
            
        });
        $("input[name*='StyleMetal']").change(function()
        {
            Template.GetDiamondID();
            Template.GetStyleMetal();
            Template.GetColor();
            Template.Search();
        });
    }
    
    ,SetItem:function(rows)
    {   
        
        if(rows == "")
        {
          
             $("div[id*='_divItems'] div.divItems").html("");
                PopMessageBox.title = "Search Result";
                PopMessageBox.message = "No Records found";
                PopMessageBox.ShowMessage();
                return;
        }
        else
        {
            $("div[id*='_divItems'] div.divItems").html("");
            $("div[id*='_divItems'] div.divItems").append
            (
                $("<div></div>").addClass("caetout").append
                (
                    $("<div></div>").addClass("catbt").append
                    (
                        $("<img />").addClass("compare_big").attr({"src":StrImagePath+"images/button/compare_big.gif"})
                    )
                ).css({"width":(parseInt(187)+(parseInt(Template.ClartyColor.length)*187))+"px"})
            );
        }
//        $("div[id*='_divItems'] div.divItems").html("");
//        $("div[id*='_divItems'] div.divItems").append
//        (
//            $("<div></div>").addClass("caetout").append
//            (
//                $("<div></div>").addClass("catbt").append
//                (
//                    $("<img />").addClass("compare_big").attr({"src":StrImagePath+"images/button/compare_big.gif"})
//                )
//            ).css({"width":(parseInt(187)+(parseInt(Template.ClartyColor.length)*187))+"px"})
//        );
//        
        //Template.ClartyColor Template.ShapeImage
       // alert("Template.ClartyColor " + Template.ClartyColor);
        
          
        /* 
        $.each(Template.ClartyColor,function(i,arrcolor){
            $("div[id*='_divItems'] div.divItems div.caetout").append
            (
                $("<div></div>").addClass("caet toll2").append
                (
                    $("<img />").attr({"src":StrImageProductPath+ "/"+Template.ShapeImage[i]}).css({"width":"56px","height":"60px"})
                )
                .append("<br /><strong>"+arrcolor+"</strong>")
            );
        });
        */       
       
       
       
       
        $("div[id*='_divItems'] div.divItems").append($("<div></div>").addClass("chosediamondbox"));
        $.each(rows,function(i,row)
        {
            
           if(i==0){    
                    $.each(Template.ClartyColor,function(i,arrcolor){
                    //alert(arrcolor);
                    $("div[id*='_divItems'] div.divItems div.caetout").append
                    (
                        $("<div></div>").addClass("caet toll2").append
                        (
                            $("<img />").attr({"src":StrImageProductPath+ "/"+row.CaratWeightImage})
                            //$("<img />").attr({"src":StrImageProductPath+ "/"+row.CaratWeightImage}).css({"width":"56px","height":"60px"})
                        )
                   .append("<br /><strong>"+arrcolor+"</strong>")
            );
        });}            
            
            
            
            //            $("div[id*='_divItems'] div.divItems div.chosediamondbox").append($("<div></div>").addClass("row").attr({"id":(i+1)}).css({"width":(parseInt(187)+(parseInt(Template.ClartyColor.length)*187))+"px"}));
            $("div[id*='_divItems'] div.divItems div.chosediamondbox").append($("<div></div>").addClass("row").attr({"id":(i+1)}).css({"width":(parseInt(200)+(parseInt(Template.ClartyColor.length)*200))+"px"}));
            $("div[id*='_divItems'] div.divItems div.chosediamondbox div[id='"+(i+1)+"']").append
            (
                $("<div></div>").addClass("caet").append
                (
                    $("<div></div>").addClass("left").append
                    (
                        //$("<div></div>").append($("<img />").attr({"src":StrImageProductPath+"/PeridotBlackDiaPendant_120661.jpg"}).css({"width":"90px","height":"30px"}))
			            // $("<div></div>").append($("<img />").attr({"src":StrImageProductPath+ "/"+Template.ShapeImage[i]}))
			            //$("<div></div>").append($("<img />").attr({"src":StrImageProductPath+ ""+Template.CaratWeightImage[i]}))
                        $("<img />").attr({"src":StrImageProductPath+ "/"+row.CaratWeightImage})
                    )
                    .append($("<div  style='' ></div>").addClass("arfivefive12").html(Template.DShapeName))
                )
                .append
                (
                    $("<div></div>").addClass("right").append
                    (
                        $("<div style='width:100px;text-align:left;'></div>").addClass("arper12dgrey").html(row.CaratDimension)
                    )
                    .append($("<div style='text-align:left;' ></div>").addClass("arfivefive12").html(row.CaratWeight))                    
                )
            );
            
           
           
            // general code for price 1
                var strprice1='';
                 if(row.Price1 != row.Price11 ) 
                 {
                     strprice1 ="<div style='cursor:pointer;' class='text arper12dgrey Template17SpecialOffer' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID1 + "', this,'Template17')\"  onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID1 + "," +Template.CategoryID +")' >Price : "+row.Price1+"</div>"
                     strprice1 =strprice1+"<div style='cursor:pointer;' class='arper12dgrey Template17SpecialOfferAlignCenter'  onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID1 + "', this,'Template17')\"  onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID1 + "," +Template.CategoryID +")'  >Discounted Price : "+row.Price11+"</div>"
                 }
                 else
                 {
                    strprice1 ="<div style='cursor:pointer;' class='text arper12dgrey'  onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID1 + "', this,'Template17')\"  onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID1 + "," +Template.CategoryID +")'  >Price : "+row.Price1+"</div>"
                 }
            //           
            
           if(row.Stock1)
            {
                $("div[id*='_divItems'] div.divItems div.chosediamondbox div[id='"+(i+1)+"']").append
                (
                    $("<div></div>").addClass("wcaett").append
                    (       
                        //$("<div style='cursor:pointer;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID1 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID1 + "," +Template.CategoryID +")' ></div>").addClass("text arper12dgrey").html("Price : $"+row.Price1)    
                        //$("<div style='cursor:pointer;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID1 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID1 + "," +Template.CategoryID +")' ></div>").addClass("text arper12dgrey").html(+strprice1)    
                    ).html(strprice1) 
                    .append
                    (                       
                        $("<div style='padding: 10px;padding-top: 0px; cursor: pointer; color: rgb(0, 153, 0); font-size: 1.1em; font-weight: bold; visibility: visible;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID1 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID1 + "," +Template.CategoryID +")' ></div>").html(row.Stock1)          
                    )   
                   .append($("<div></div>").addClass("check toll2").html("<input type=\"checkbox\" value=\""+row.ItemID1+"!1*" + Template.CategoryID + "\" name=\"chkCompare\"   onclick=\"g.checkboxclick(this)\"  /> <b>COMPARE</b>"))
                   //  .append($("<div></div>").addClass("check toll2").html("<input type=\"checkbox\" value=\""+row.ItemID1+"!2*" + Template.CategoryID + "\" name=\"chkCompare1\"/> <b>COMPARE</b>"))
                    
                ) ;
            }
            else if(row.Price1)
            {
               //alert("Price1 " + row.Price1);
                $("div[id*='_divItems'] div.divItems div.chosediamondbox div[id='"+(i+1)+"']").append
                (
                    $("<div></div>").addClass("wcaett").append
                    (                       
                     //   $("<div style='cursor:pointer;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID1 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID1 + "," +Template.CategoryID +")' ></div>").addClass("text arper12dgrey").html("$"+row.Price1)                       
                    ).html(strprice1) 
                   .append($("<div></div>").addClass("check toll2").html("<input type=\"checkbox\" value=\""+row.ItemID1+"!1*" + Template.CategoryID + "\" name=\"chkCompare\"   onclick=\"g.checkboxclick(this)\"  /> <b>COMPARE</b>"))
                   //  .append($("<div></div>").addClass("check toll2").html("<input type=\"checkbox\" value=\""+row.ItemID1+"!2*" + Template.CategoryID + "\" name=\"chkCompare1\"/> <b>COMPARE</b>"))
                ) ;
            }

            
             // general code for price 2
              var strprice2='';
              strprice2='';
               if(row.Price2 != row.Price22 ) 
               {
                     strprice2 ="<div style='cursor:pointer;' class='text arper12dgrey Template17SpecialOffer' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID2 + "', this,'Template17')\"  onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID2 + "," +Template.CategoryID +")' >Price : "+row.Price2+"</div>"
                     strprice2 =strprice2+"<div style='cursor:pointer;' class='arper12dgrey Template17SpecialOfferAlignCenter'  onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID2 + "', this,'Template17')\"  onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID2 + "," +Template.CategoryID +")'  >Discounted Price : "+row.Price22+"</div>"
               }
               else 
                {
                    strprice2 ="<div style='cursor:pointer;' class='text arper12dgrey'  onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID2 + "', this,'Template17')\"  onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID2 + "," +Template.CategoryID +")'  >Price : "+row.Price2+"</div>"
                }
            //  
            
            if(row.Stock2)
            {
                $("div[id*='_divItems'] div.divItems div.chosediamondbox div[id='"+(i+1)+"']").append
                (
                    $("<div></div>").addClass("wcaett").append
                    (
                       // $("<div style='cursor:pointer;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID2 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID2 + "," +Template.CategoryID +")' ></div>").addClass("text arper12dgrey").html("$"+row.Price2)
                     ).html(strprice2)
                  
                   .append($("<div style='padding: 10px;padding-top: 0px; cursor: pointer;color: #090;font-size: 1.1em;font-weight: bold;visibility: visible;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID2 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID2 + "," +Template.CategoryID +")' ></div>").html(row.Stock2))                       
                   .append($("<div></div>").addClass("check toll2").html("<input type=\"checkbox\" value=\""+row.ItemID2+"!1*" + Template.CategoryID +"\" name=\"chkCompare\"     onclick=\"g.checkboxclick(this)\"   /> <b>COMPARE</b>"))
               ); 
            }
            else if(row.Price2)
            {
                $("div[id*='_divItems'] div.divItems div.chosediamondbox div[id='"+(i+1)+"']").append
                (
                    $("<div></div>").addClass("wcaett").append
                    (
                       //// $("<div style='cursor:pointer;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID2 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID2 + "," +Template.CategoryID +")' ></div>").addClass("text arper12dgrey").html("$"+row.Price2)
                       //$("<div style='cursor:pointer;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID2 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\"></div>").addClass("text arper12dgrey").html("$"+row.Price2)
                   ).html(strprice2)
                   .append($("<div></div>").addClass("check toll2").html("<input type=\"checkbox\" value=\""+row.ItemID2+"!1*" + Template.CategoryID +"\" name=\"chkCompare\"     onclick=\"g.checkboxclick(this)\"   /> <b>COMPARE</b>"))
               ); 
            }
            
            
             // general code for price 3
              var strprice3='';
              strprice3='';
               if(row.Price3 != row.Price33 ) 
               {
                     strprice3 ="<div style='cursor:pointer;' class='text arper12dgrey Template17SpecialOffer' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID3 + "', this,'Template17')\"  onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID3 + "," +Template.CategoryID +")' >Price : "+row.Price3+"</div>"
                     strprice3 =strprice3+"<div style='cursor:pointer;' class='arper12dgrey Template17SpecialOfferAlignCenter'  onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID3 + "', this,'Template17')\"  onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID3 + "," +Template.CategoryID +")'  >Discounted Price : "+row.Price33+"</div>"
               }
               else 
                {
                    strprice3 ="<div style='cursor:pointer;' class='text arper12dgrey'  onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID3 + "', this,'Template17')\"  onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID3 + "," +Template.CategoryID +")'  >Price : "+row.Price3+"</div>"
                }
            //  
            
            if(row.Stock3)
            {
                 
                $("div[id*='_divItems'] div.divItems div.chosediamondbox div[id='"+(i+1)+"']").append
                (
                    $("<div></div>").addClass("wcaett").append
                    (
                        
                       //// $("<div style='cursor:pointer;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID3 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\"  onclick='ClickTemp(" + row.ItemID2 + "," +Template.CategoryID +")'  ></div>").addClass("text arper12dgrey").html("$"+row.Price3)
                        //$("<div style='cursor:pointer;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID3 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\"></div>").addClass("text arper12dgrey").html("$"+row.Price3)
                    ).html(strprice3)
                    .append($("<div style='padding: 10px;padding-top: 0px; cursor: pointer;color: #090;font-size: 1.1em;font-weight: bold;visibility: visible;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID3 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\"  onclick='ClickTemp(" + row.ItemID3 + "," +Template.CategoryID +")'  ></div>").html("$"+row.Stock3))
                    .append($("<div></div>").addClass("check toll2").html("<input type=\"checkbox\" value=\""+row.ItemID3+"!1*" + Template.CategoryID +"\" name=\"chkCompare\"      onclick=\"g.checkboxclick(this)\"   /> <b>COMPARE</b>"))
                ) 
            }
            else if(row.Price3)
            {
                 
                $("div[id*='_divItems'] div.divItems div.chosediamondbox div[id='"+(i+1)+"']").append
                (
                    $("<div></div>").addClass("wcaett").append
                    (
                        
                        ////$("<div style='cursor:pointer;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID3 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\"  onclick='ClickTemp(" + row.ItemID2 + "," +Template.CategoryID +")'  ></div>").addClass("text arper12dgrey").html("$"+row.Price3)
                        //$("<div style='cursor:pointer;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID3 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\"></div>").addClass("text arper12dgrey").html("$"+row.Price3)
                    ).html(strprice3)
                    .append($("<div></div>").addClass("check toll2").html("<input type=\"checkbox\" value=\""+row.ItemID3+"!1*" + Template.CategoryID +"\" name=\"chkCompare\"      onclick=\"g.checkboxclick(this)\"   /> <b>COMPARE</b>"))
                ) 
            }
            
            
             // general code for price 4
              var strprice4='';
              strprice4='';
               if(row.Price4 != row.Price44 ) 
               {
                     strprice4 ="<div style='cursor:pointer;' class='text arper12dgrey Template17SpecialOffer' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID4 + "', this,'Template17')\"  onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID4 + "," +Template.CategoryID +")' >Price : "+row.Price4+"</div>"
                     strprice4 =strprice4+"<div style='cursor:pointer;' class='arper12dgrey Template17SpecialOfferAlignCenter'  onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID4 + "', this,'Template17')\"  onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID4 + "," +Template.CategoryID +")'  >Discounted Price : "+row.Price44+"</div>"
               }
               else 
                {
                    strprice4 ="<div style='cursor:pointer;' class='text arper12dgrey'  onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID4 + "', this,'Template17')\"  onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID4 + "," +Template.CategoryID +")'  >Price : "+row.Price4+"</div>"
                }
            //            
            
            if(row.Stock4)
            {
              
                $("div[id*='_divItems'] div.divItems div.chosediamondbox div[id='"+(i+1)+"']").append
                (
                    $("<div></div>").addClass("wcaett").append
                    (
                       // $("<div style='cursor:pointer;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID4 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\"></div>").addClass("text arper12dgrey").html("$"+row.Price4)
                    ).html(strprice4)
                    .append($("<div style='padding: 10px; cursor: pointer;color: #090;font-size: 1.1em;font-weight: bold;visibility: visible;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID4 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\"></div>").html("$"+row.Stock4))
                    .append($("<div></div>").addClass("check toll2").html("<input type=\"checkbox\" value=\""+row.ItemID4+"!1*" + Template.CategoryID +"\" name=\"chkCompare\"    onclick=\"g.checkboxclick(this)\"   /> <b>COMPARE</b>"))
                ) 
            }
            else if(row.Price4)
            {
              
                $("div[id*='_divItems'] div.divItems div.chosediamondbox div[id='"+(i+1)+"']").append
                (
                    $("<div></div>").addClass("wcaett").append
                    (
                     //   $("<div style='cursor:pointer;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID4 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\"></div>").addClass("text arper12dgrey").html("$"+row.Price4)
                    ).html(strprice4)
                    .append($("<div></div>").addClass("check toll2").html("<input type=\"checkbox\" value=\""+row.ItemID4+"!1*" + Template.CategoryID +"\" name=\"chkCompare\"    onclick=\"g.checkboxclick(this)\"   /> <b>COMPARE</b>"))
                ) 
            }
            
            
             // general code for price 5
              var strprice5='';
              strprice5='';
               if(row.Price5 != row.Price55 ) 
               {
                     strprice5 ="<div style='cursor:pointer;' class='text arper12dgrey Template17SpecialOffer' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID5 + "', this,'Template17')\"  onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID5 + "," +Template.CategoryID +")' >Price : "+row.Price5+"</div>"
                     strprice5 =strprice5+"<div style='cursor:pointer;' class='arper12dgrey Template17SpecialOfferAlignCenter'  onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID5 + "', this,'Template17')\"  onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID5 + "," +Template.CategoryID +")'  >Discounted Price : "+row.Price55+"</div>"
               }
               else 
                {
                    strprice5 ="<div style='cursor:pointer;' class='text arper12dgrey'  onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID5 + "', this,'Template17')\"  onmouseout=\"TemplateMouseOver.ShowMosueOut();\" onclick='ClickTemp(" + row.ItemID5 + "," +Template.CategoryID +")'  >Price : "+row.Price5+"</div>"
                }
            //             
            if(row.Stock5)
            {
                $("div[id*='_divItems'] div.divItems div.chosediamondbox div[id='"+(i+1)+"']").append
                (
                    $("<div></div>").addClass("wcaett").append
                    (
                        //$("<div style='cursor:pointer;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID5 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\"></div>").addClass("text arper12dgrey").html("$"+row.Price5)
                    ).html(strprice5)
                    .append($("<div style='padding: 10px; cursor: pointer;color: #090;font-size: 1.1em;font-weight: bold;visibility: visible;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID5 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\"></div>").html("$"+row.Stock5))
                    .append($("<div></div>").addClass("check toll2").html("<input type=\"checkbox\" value=\""+row.ItemID5+"!1*" + Template.CategoryID +"\" name=\"chkCompare\"    onclick=\"g.checkboxclick(this)\"   /> <b>COMPARE</b>"))
                ) 
            }
            else if(row.Price5)
            {
                
                $("div[id*='_divItems'] div.divItems div.chosediamondbox div[id='"+(i+1)+"']").append
                (
                    $("<div></div>").addClass("wcaett").append
                    (
                        //$("<div style='cursor:pointer;' onmouseover=\"TemplateMouseOver.ShowMosueOver('" + row.ItemID5 + "', this,'Template17')\" onmouseout=\"TemplateMouseOver.ShowMosueOut();\"></div>").addClass("text arper12dgrey").html("$"+row.Price5)
                    ).html(strprice5)
                    .append($("<div></div>").addClass("check toll2").html("<input type=\"checkbox\" value=\""+row.ItemID5+"!1*" + Template.CategoryID +"\" name=\"chkCompare\"    onclick=\"g.checkboxclick(this)\"   /> <b>COMPARE</b>"))
                ) 
            }



        });
        
        $("img.compare_big").click(function()
        {   
            g.CompareBig();
        });
    }
    ,ShowMessage:function(str)
    {
        //alert(str);
    }
}
$(document).ready(function () 
{
    Template.CategoryID = document.getElementById('ctl00_ContentPlaceHolder1_hdnCatgoryID').value ;
    //alert("CountItemColumn " + CountItemColumn);
    Template.ShapeImage=ShapeImage.split(",");Template.DIVHTML=DIVHTML.split(",");Template.ClartyColor=ClartyColor.split(",");Template.CountItemColumn=CountItemColumn;
    $("input[name*='DColorName']").change(function()
    {
        Template.GetColor();
        Template.Search();
    });
    $("input[name*='DShapeName']").change(function()
    {
        Template.GetColor();
        Template.GetDiamondID();
        Template.Search();
    });
    $("input[name*='StyleMetal']").change(function()
    {
        Template.GetDiamondID();
        Template.GetStyleMetal();
        Template.GetColor();
        Template.Search();
    });
    
});

function ClickTemp(ItemID,CategoryID)
{   
    var featured = "1";
    Templates_Template17.SaveTrackInfo(ItemID,featured,CategoryID,returnfunction);                         
}
function returnfunction(res)
{  
    window.location = res.value;
}