// JScript File

var ViewSize;
function MergeTinyImage(obj,isslant,SettingImageID,DiamondImage,NoProngImage)
{
    var CurrDiamondImage=document.getElementById(DiamondImage);
   
  
  
    //swap image for no prong image
   
    MM_swapImage(SettingImageID,'',NoProngImage);
 
   SettingImage=document.getElementById(SettingImageID);
     
    //Choose Diamond to Display, and corresponding width and height
    
   var RealSettingWidth=SettingImage.getAttribute("RealWidth");
   var RealSettingHeight=SettingImage.getAttribute("RealHeight");
    
   
    
   var DiamondSrc = isslant?obj.getAttribute('DiamondSlantSrc'):obj.getAttribute('DiamondStraightSrc');
   var BaseDiamondWidth =  isslant?obj.getAttribute('DiamondSlantWidth'):obj.getAttribute('DiamondStraightWidth'); // switch to tiny...
   var BaseDiamondHeight =  isslant?obj.getAttribute('DiamondSlantHeight'):obj.getAttribute('DiamondStraightHeight'); // switch to tiny...
    
   var StartingSettingW=RealSettingWidth;
   var StartingSettingH=RealSettingHeight;
   
   //getting setting center x,y
    var SettingCenterX=obj.getAttribute('settingX');
    var SettingCenterY=obj.getAttribute('settingY');
   
   
   var SmallSWidthSize=obj.getAttribute('settingstandardwidth'); 
   var SmallSHeightSize=(parseFloat(StartingSettingH)*parseFloat(SmallSWidthSize))/parseFloat(StartingSettingW)
        
 
  //get new SettingCenterXY
   SettingCenterX=(parseFloat(SmallSWidthSize)*SettingCenterX)/StartingSettingW;
   SettingCenterY=(parseFloat(SmallSHeightSize)*SettingCenterY)/StartingSettingH;
         
   //apply new sizes
   SettingImage.style.width=SmallSWidthSize+"px";
   SettingImage.style.height=SmallSHeightSize+"px";
        
    
    CurrDiamondImage.src=DiamondSrc;
     
    var DiamondX=BaseDiamondWidth/2;
    var DiamondY=BaseDiamondHeight/2;
    
   
    CurrDiamondImage.style.position="absolute";
    CurrDiamondImage.style.width=BaseDiamondWidth+"px";
    CurrDiamondImage.style.height=BaseDiamondHeight+"px";
    CurrDiamondImage.style.left=(SettingCenterX-DiamondX).toString()+"px";
    CurrDiamondImage.style.top=(SettingCenterY-DiamondY).toString()+"px";
    
    
    CurrDiamondImage.style.visibility="visible";
    
   
            
}

 function trim(str)
{
   return str.replace(/^\s*|\s*$/g,"");
}

function MergeTinyImageOnProductPage(obj,size)//TODO:set width and height on original image same as on no prong,take 6 prong into account
 {
  

//only change size based on zoom, not based on change diamond. so have global variable that holds from time user
 //clicks zoom to next time user clicks zoom
  if(size!=null)
        ViewSize=size;
       /*
      <xsl:value-of select="Shape"/>,
                <xsl:value-of select="StraightSrc"/>,<xsl:value-of select="StraightWidth"/>,<xsl:value-of select="StraightHeight"/>,
               <xsl:value-of select="SlantSrc"/>,<xsl:value-of select="SlantWidth"/>,<xsl:value-of select="SlantHeight"/>,
                <xsl:value-of select="$pSettingPicX"/>,<xsl:value-of select="$pSettingPicY"/>, <xsl:value-of select="aspdnsf:AppConfig('settingstandardwidth_step5')"/>,
                <xsl:value-of select="DiamondWidthLevelDiff"/>,<xsl:value-of select="SettingZoomWidth"/>,<xsl:value-of select="SettingZoomHeight"/>
             </xsl:attribute>
          
        */
   var SettingImageID="StandardSettingImage";
   var SettingImage=document.getElementById(SettingImageID);
   var NoProngImage=SettingImage.getAttribute('NoProngImage');
  
     var DiamondProperties=obj.value.split(",");
 
     if(trim(DiamondProperties[0])=="0")
     {   var RealSettingWidth=DiamondProperties[1];
         var RealSettingHeight=DiamondProperties[2];
         var SettingZoomWidth=DiamondProperties[3];
         var SettingStandardWidth=DiamondProperties[4];
         ResizePlainImage(RealSettingWidth,RealSettingHeight,SettingZoomWidth,SettingStandardWidth);
         return false;
     }
   
    MM_swapImage(SettingImageID,'',NoProngImage);
    
    var DShape=DiamondProperties[0];
    var DiamondStraightSrc=DiamondProperties[1];
    var DiamondStraightWidth=DiamondProperties[2];
    var DiamondStraightHeight=DiamondProperties[3];
    var DiamondSlantSrc=DiamondProperties[4];
    var DiamondSlantWidth=DiamondProperties[5];
    var DiamondSlantHeight=DiamondProperties[6];
    var SettingX=DiamondProperties[7];
    var SettingY=DiamondProperties[8];
    var SettingStandardWidth=DiamondProperties[9];
    var DiamondWidthLevelDiff=DiamondProperties[10];
    var SettingZoomWidth=DiamondProperties[11];
    var SettingZoomHeight=DiamondProperties[12];
    var isslant=DiamondProperties[13];
    var RealSettingWidth=DiamondProperties[14];
    var RealSettingHeight=DiamondProperties[15];
 
    
   
   
    var SettingImage=document.getElementById("StandardSettingImage");//can't call it  settingimage or mergeimage will be called on load
    var DiamondImage=document.getElementById("diamondimage");
    
  
       
    var StartingSettingW=SettingZoomWidth;
    var StartingSettingH=(SettingZoomWidth*RealSettingHeight)/RealSettingWidth;

    var SettingCenterX=SettingX;
    var SettingCenterY=SettingY;
    
    
  //not recognizing boolean value on this variable
 
    var DiamondSrc = isslant.toLowerCase().indexOf("true")>-1?DiamondSlantSrc:DiamondStraightSrc;
      
    var BaseDiamondWidth =  isslant?DiamondSlantWidth:DiamondStraightWidth; // switch to tiny...
    var BaseDiamondHeight =  isslant?DiamondSlantHeight:DiamondStraightHeight; // switch to tiny...
  
 
  
  
    if(ViewSize=="large")
   {
    //reset setting
    
    
       SettingImage.style.width=StartingSettingW;
       SettingImage.style.height=StartingSettingH;
            
       SettingCenterX=(SettingCenterX*StartingSettingW)/RealSettingWidth;
       SettingCenterY=(SettingCenterY*StartingSettingH)/RealSettingHeight;
            
       BaseDiamondWidth=(BaseDiamondWidth*StartingSettingW)/RealSettingWidth;
       BaseDiamondHeight=(BaseDiamondHeight*StartingSettingH)/RealSettingHeight;
        
   }
     else
    {
 
       
       
        var SmallSWidthSize=SettingStandardWidth; 
               var SmallSHeightSize=(parseFloat(RealSettingHeight)*parseFloat(SmallSWidthSize))/parseFloat(RealSettingWidth);
        
               //resize diamond
                
               var SmallDWidthSize=(SmallSWidthSize*parseFloat(BaseDiamondWidth))/parseFloat(RealSettingWidth);
               var SmallDHeightSize=(SmallSHeightSize*parseFloat(BaseDiamondHeight))/parseFloat(RealSettingHeight);

               //get new SettingCenterXY
               SettingCenterX=(parseFloat(SmallSWidthSize)*SettingCenterX)/RealSettingWidth;
               SettingCenterY=(parseFloat(SmallSHeightSize)*SettingCenterY)/RealSettingHeight;
         
              //apply new sizes
               SettingImage.style.width=SmallSWidthSize+"px";
               SettingImage.style.height=SmallSHeightSize+"px";
           
               BaseDiamondWidth=SmallDWidthSize;
               BaseDiamondHeight=SmallDHeightSize;   
    
   }
     
       
         
    var ModifiedWidth=BaseDiamondWidth;
    var ModifiedHeight=BaseDiamondHeight;
        
        
    //  document.getElementById("test").value+=SettingCenterX+","+SettingCenterY+"\n";
    var DiamondX=(ModifiedWidth/2);
    var DiamondY=(ModifiedHeight/2);
        
   
     
   DiamondImage.src=DiamondSrc;
   DiamondImage.style.position="absolute";
   DiamondImage.style.width=ModifiedWidth+"px";
   DiamondImage.style.height=ModifiedHeight+"px";
   
   DiamondImage.style.left=(SettingCenterX-DiamondX).toString()+"px";
   DiamondImage.style.top=(SettingCenterY-DiamondY).toString()+"px";


   DiamondImage.style.visibility="visible";


   SettingImage.style.visibility="visible";
            
        
           
 }

function MergeTinyImageOnProductPage_type1(obj,size)//TODO:set width and height on original image same as on no prong,take 6 prong into account
 {
 
 
//only change size based on zoom, not based on change diamond. so have global variable that holds from time user
 //clicks zoom to next time user clicks zoom
  if(size!=null)
        ViewSize=size;
       /*
      <xsl:value-of select="Shape"/>,
                <xsl:value-of select="StraightSrc"/>,<xsl:value-of select="StraightWidth"/>,<xsl:value-of select="StraightHeight"/>,
               <xsl:value-of select="SlantSrc"/>,<xsl:value-of select="SlantWidth"/>,<xsl:value-of select="SlantHeight"/>,
                <xsl:value-of select="$pSettingPicX"/>,<xsl:value-of select="$pSettingPicY"/>, <xsl:value-of select="aspdnsf:AppConfig('settingstandardwidth_step5')"/>,
                <xsl:value-of select="DiamondWidthLevelDiff"/>,<xsl:value-of select="SettingZoomWidth"/>,<xsl:value-of select="SettingZoomHeight"/>
             </xsl:attribute>
          
        */
   var SettingImageID="StandardSettingImage";
   var SettingImage=document.getElementById(SettingImageID);
   var NoProngImage=SettingImage.getAttribute('NoProngImage');
  
    
    MM_swapImage(SettingImageID,'',NoProngImage);
  
  
  
    var DiamondProperties=obj.value.split(",");
    
     if(DiamondProperties[0]=="0")
     {   var SettingZoomWidth=DiamondProperties[1];
         var SettingZoomHeight=DiamondProperties[2];
         var SettingStandardWidth=DiamondProperties[3];
         ResizePlainImage(SettingStandardWidth,SettingZoomWidth,SettingZoomHeight);
         return false;
     }
   
    var DShape=DiamondProperties[0];
    var DiamondStraightSrc=DiamondProperties[1];
    var DiamondStraightWidth=DiamondProperties[2];
    var DiamondStraightHeight=DiamondProperties[3];
    var DiamondSlantSrc=DiamondProperties[4];
    var DiamondSlantWidth=DiamondProperties[5];
    var DiamondSlantHeight=DiamondProperties[6];
    var SettingX=DiamondProperties[7];
    var SettingY=DiamondProperties[8];
    var SettingStandardWidth=DiamondProperties[9];
    var DiamondWidthLevelDiff=DiamondProperties[10];
    var SettingZoomWidth=DiamondProperties[11];
    var SettingZoomHeight=DiamondProperties[12];
    var isslant=DiamondProperties[13];
    var RealSettingWidth=DiamondProperties[14];
    var RealSettingHeight=DiamondProperties[15];
    var DesiredDiamondWidth=DiamondProperties[16];
 
    
    
    var SettingImage=document.getElementById("StandardSettingImage");//can't call it  settingimage or mergeimage will be called on load
    var DiamondImage=document.getElementById("diamondimage");
    
  
       
    var StartingSettingW=SettingZoomWidth;
    var StartingSettingH=(SettingZoomWidth*RealSettingHeight)/RealSettingWidth;

    var SettingCenterX=SettingX;
    var SettingCenterY=SettingY;
    
    var DiamondSrc = isslant?DiamondSlantSrc:DiamondStraightSrc;
    var BaseDiamondWidth =  isslant?DiamondSlantWidth:DiamondStraightWidth; // switch to tiny...
    var BaseDiamondHeight =  isslant?DiamondSlantHeight:DiamondStraightHeight; // switch to tiny...
  
 
    var DesiredDiamondHeight=(BaseDiamondHeight * DesiredDiamondWidth)/BaseDiamondWidth;
    BaseDiamondWidth=DesiredDiamondWidth;
    BaseDiamondHeight=DesiredDiamondHeight;
    
    if(ViewSize=="large")
   {
    //reset setting
    
     SettingImage.style.width=StartingSettingW;
     SettingImage.style.height=StartingSettingH;
        
   }
     else
    {
 
       var SmallSWidthSize=SettingStandardWidth; //(on design it was 244x220)

   
       var SmallSHeightSize=(parseFloat(StartingSettingH)*parseFloat(SmallSWidthSize))/parseFloat(StartingSettingW)

       //resize diamond
       var SmallDWidthSize=(SmallSWidthSize*parseFloat(BaseDiamondWidth))/parseFloat(StartingSettingW)
       var SmallDHeightSize=(BaseDiamondHeight*parseFloat(SmallDWidthSize))/parseFloat(BaseDiamondWidth)

        //get new SettingCenterXY
       SettingCenterX=(parseFloat(SmallSWidthSize)*SettingCenterX)/StartingSettingW;
       SettingCenterY=(parseFloat(SmallSHeightSize)*SettingCenterY)/StartingSettingH;
 
     //apply new sizes
       SettingImage.style.width=SmallSWidthSize+"px";
       
       SettingImage.style.height=SmallSHeightSize+"px";
   
       BaseDiamondWidth=SmallDWidthSize;
       BaseDiamondHeight=SmallDHeightSize;  
      
    
   }
     
  
    
       
   
       ModifiedWidth=BaseDiamondWidth;
       ModifiedHeight=BaseDiamondHeight; 
        
    //  document.getElementById("test").value+=SettingCenterX+","+SettingCenterY+"\n";
    var DiamondX=(ModifiedWidth/2);
    var DiamondY=(ModifiedHeight/2);
        
    
     
   DiamondImage.src=DiamondSrc;
   DiamondImage.style.position="absolute";
   DiamondImage.style.width=ModifiedWidth+"px";
   DiamondImage.style.height=ModifiedHeight+"px";
   
   DiamondImage.style.left=(SettingCenterX-DiamondX).toString()+"px";
   DiamondImage.style.top=(SettingCenterY-DiamondY).toString()+"px";


   DiamondImage.style.visibility="visible";


   SettingImage.style.visibility="visible";
               
        
           
 }
         
        
 function ResizePlainImage(RealSettingWidth,RealSettingHeight,SettingZoomWidth,SettingStandardWidth)
{
    SettingImage=document.getElementById("StandardSettingImage");
    
    if(ViewSize=="large")
    {
     //reset setting
     
   
     var StartingSettingW=SettingZoomWidth;
      var StartingSettingH=(SettingZoomWidth*RealSettingHeight)/RealSettingWidth;
     SettingImage.style.width=StartingSettingW+"px";
     SettingImage.style.height=StartingSettingH+"px";
        
    }
    else
    {
       var SmallSWidthSize=SettingStandardWidth; //(on design it was 244x220)

   
       var SmallSHeightSize=(parseFloat(SmallSWidthSize)*parseFloat(RealSettingHeight))/parseFloat(RealSettingWidth)

     
 
     //apply new sizes
       SettingImage.style.width=SmallSWidthSize+"px";
       
       SettingImage.style.height=SmallSHeightSize+"px";
   
    }
}

 
function MergeImage(size,debug)
 {//right now this is a one-to-one ratio of setting and diamonds. once start working with 3 stones will have to change this logic
       
       debug=false;
    if((document.getElementById("settingimage")!=null && document.getElementById("diamondimage")!=null)
        ||(document.getElementById("_ctl0_settingimage")!=null && document.getElementById("_ctl0_diamondimage")!=null))
    {
        var SObjectName="settingimage";
        var DObjectName="diamondimage";
       /* if(document.getElementById("_ctl0_settingimage")!=null && document.getElementById("_ctl0_diamondimage")!=null)
        {
            SObjectName="_ctl0_settingimage";
            DObjectName="_ctl0_diamondimage";
        }*/

       
        
        //shopping cart might have more than one image on the same page
        for(i=0;i<document.getElementsByName(SObjectName).length;i++)
        {
        var tempcount=0;
           var SettingImage=document.getElementsByName(SObjectName)[i];
           var DiamondImage=document.getElementsByName(DObjectName)[i];
       
       
        //width and height of actual setting
            var RealSettingWidth=DiamondImage.getAttribute('SettingRealWidth');
            var RealSettingHeight=DiamondImage.getAttribute('SettingRealHeight');
          //  alert(tempcount++);
            var  BaseDiamondWidth=DiamondImage.getAttribute('largewidth');
            var  BaseDiamondHeight=DiamondImage.getAttribute('largeheight');
         //   alert(tempcount++);
            var PixelPerMM=DiamondImage.getAttribute('PixelPerMMRatio');
           //  alert(tempcount++);
            var CaratSize=DiamondImage.getAttribute('CaratSize');
          //   alert(tempcount++);
            var DiamondShape=DiamondImage.getAttribute('Shape');
          //   alert(tempcount++);


            var MMSize = GetRealMM(CaratSize,DiamondShape);
    //  alert(MMSize);
     
            var ProportionateDiamondWidth=PixelPerMM*MMSize;
      
            var ProportionateDiamondHeight=(BaseDiamondHeight*ProportionateDiamondWidth)/BaseDiamondWidth;
           
            BaseDiamondWidth=ProportionateDiamondWidth;
            BaseDiamondHeight=ProportionateDiamondHeight;
    
            var  LargeSettingWidth=DiamondImage.getAttribute('SettingZoomWidth');//SettingImage.width //400;
             
            var SettingCenterX=DiamondImage.getAttribute('settingX');
            var SettingCenterY=DiamondImage.getAttribute('settingY');
       
        //  alert(RealSettingWidth+","+RealSettingHeight);
          //width and height of actual diamond
         
           // alert(BaseDiamondWidth+","+BaseDiamondHeight);
        //  alert(RealSettingWidth+","+RealSettingHeight);
         // alert(SettingCenterX+","+SettingCenterY);
       
      
           //zoom size is still smaller than actual setting picture (I hope so!!)
           var StartingSettingW=LargeSettingWidth;
           var StartingSettingH=(LargeSettingWidth*RealSettingHeight)/RealSettingWidth;
          
           if(size=="large")
           {
            //reset setting
            
            SettingImage.style.width=StartingSettingW;
            SettingImage.style.height=StartingSettingH;
            
            SettingCenterX=(SettingCenterX*StartingSettingW)/RealSettingWidth;
            SettingCenterY=(SettingCenterY*StartingSettingH)/RealSettingHeight;
            
            BaseDiamondWidth=(BaseDiamondWidth*StartingSettingW)/RealSettingWidth;
            BaseDiamondHeight=(BaseDiamondHeight*StartingSettingH)/RealSettingHeight;
            
         //   alert(StartingSettingW+","+StartingSettingH);
         // alert(SettingCenterX+","+SettingCenterY);
                
           }
          else
          {
         
               var SmallSWidthSize=DiamondImage.getAttribute('settingstandardwidth'); 
               var SmallSHeightSize=(parseFloat(RealSettingHeight)*parseFloat(SmallSWidthSize))/parseFloat(RealSettingWidth);
        
               //resize diamond
                
               var SmallDWidthSize=(SmallSWidthSize*parseFloat(BaseDiamondWidth))/parseFloat(RealSettingWidth);
               var SmallDHeightSize=(SmallSHeightSize*parseFloat(BaseDiamondHeight))/parseFloat(RealSettingHeight);

               //get new SettingCenterXY
               SettingCenterX=(parseFloat(SmallSWidthSize)*SettingCenterX)/RealSettingWidth;
               SettingCenterY=(parseFloat(SmallSHeightSize)*SettingCenterY)/RealSettingHeight;
         
              //apply new sizes
               SettingImage.style.width=SmallSWidthSize+"px";
               SettingImage.style.height=SmallSHeightSize+"px";
           
             BaseDiamondWidth=SmallDWidthSize;
               BaseDiamondHeight=SmallDHeightSize;   
             
             //the way it should work is that it should start at a certain point (different for each standard width)
             //and then be scaled down for carat size. No need to scale the diamond based on setting size. Same for zoom.
//             if(SmallSWidthSize==150)
//             {
//                 NewWidth=65;
//                 BaseDiamondHeight=(BaseDiamondHeight*NewWidth)/BaseDiamondWidth;
//                 BaseDiamondWidth=NewWidth;
//             }
              //    alert(SmallSWidthSize+","+SmallSHeightSize);
              //    alert(BaseDiamondWidth+","+BaseDiamondHeight);          
            
           }
         //  alert(SmallSWidthSize+","+SmallSHeightSize);
     //alert(SettingCenterX);alert(SettingCenterY);
         
          if(debug)
           { DiamondImage.src="skins/skin_1/images/blackdot.gif";
           BaseDiamondWidth=1;
           BaseDiamondHeight=1;
           }
           
            var ModifiedWidth=BaseDiamondWidth;
            var ModifiedHeight=BaseDiamondHeight;
            
        
           /*
            var Level=DiamondImage.getAttribute('Level');
   
     
           if(Level!=1)
           {
               var DiamondWidthLevelDiff = DiamondImage.getAttribute('DiamondWidthLevelDiff');
            
               //Level=Level>7?7:Level;//#'s will go too low otherwise, really just 7 levels unless they start the picture bigger or make 
                //smaller increments
                
                //take off by percents so in case the stones vary greatly in size (Which they do, case in point: oval straight and oval slant, round vs. heart...)
           
               var TakeOffPercent=((DiamondWidthLevelDiff*(Level-1))*BaseDiamondWidth)/100;
              
               ModifiedWidth=BaseDiamondWidth-TakeOffPercent;
              
               if(ModifiedWidth<15)
                   ModifiedWidth=15;
              
                ModifiedHeight=(BaseDiamondHeight*ModifiedWidth)/BaseDiamondWidth;
               
              // SettingCenterX=parseFloat(SettingCenterX)+parseFloat(BaseDiamondWidth-ModifiedWidth)/2;
              //SettingCenterY=parseFloat(SettingCenterY)+parseFloat(BaseDiamondHeight-ModifiedHeight)/2;
            }    
            //  alert(SmallSWidthSize+","+SmallSHeightSize);
             //     alert(ModifiedWidth+","+ModifiedHeight);  
        //  document.getElementById("test").value+=SettingCenterX+","+SettingCenterY+"\n";
             
            */
             
             var DiamondX=(ModifiedWidth/2);
             var DiamondY=(ModifiedHeight/2);
            
        
         
          
             DiamondImage.style.position="absolute";
             DiamondImage.style.width=ModifiedWidth+"px";
             DiamondImage.style.height=ModifiedHeight+"px";
               
             DiamondImage.style.left=(SettingCenterX-DiamondX).toString()+"px";
             DiamondImage.style.top=(SettingCenterY-DiamondY).toString()+"px";
            
         
             DiamondImage.style.visibility="visible";
           
    //    DiamondImage.style.left="0px";
   // DiamondImage.style.top="0px";
   
             SettingImage.style.visibility="visible";
               
              
           
         }
         
        
     }
     
    
      else if(document.getElementById("SampleImage")!=null)//calling from here because "onload" is in skin, and puts it down
     //on showproduct page. i don't know how to differentiate the 2 productpages, so just let it call the fucntion and redirect it
     {
        ReSizeSampleImage(size);
     }
    
     
    
 }


 
 function ReSizeSampleImage(viewsize)
  {
      var SampleImage= document.getElementById("SampleImage");
      var DiamondWidthLevelDiff = SampleImage.getAttribute('DiamondWidthLevelDiff');
      if(document.getElementById("SampleImage").getAttribute('CurrDisplay')=="large")//toggle onclick action
      viewsize="small";


      if(viewsize=="large")
      {

          BaseDiamondWidth=SampleImage.getAttribute('sampleimagewidth');
          BaseDiamondHeight=SampleImage.getAttribute('sampleimageheight');
          document.getElementById("SampleImage").setAttribute("CurrDisplay","large");
      }
      else 
      {
          var smallwidth=SampleImage.getAttribute('sampleimagewidth')-SampleImage.getAttribute('StandardWidthDiff');
          var smallheight=(SampleImage.getAttribute('sampleimageheight')*smallwidth)/SampleImage.getAttribute('sampleimagewidth');
          BaseDiamondWidth=smallwidth;
          BaseDiamondHeight=smallheight;


      document.getElementById("SampleImage").setAttribute("CurrDisplay","small");
      }


      var Level=SampleImage.getAttribute('level');

      var ModifiedWidth=BaseDiamondWidth;
      var ModifiedHeight=BaseDiamondHeight;

      if(Level!=1)
      {
     // Level=Level>7?7:Level;//#'s will go to low otherwise, really just 7 levels unless they start the picture bigger or make
      //smaller increments

      ModifiedWidth=BaseDiamondWidth-(Level*DiamondWidthLevelDiff);
        if(ModifiedWidth<15)
             ModifiedWidth=15;
      ModifiedHeight=(ModifiedWidth/BaseDiamondWidth)*BaseDiamondHeight;
      }
      SampleImage.width=ModifiedWidth;
      SampleImage.height=ModifiedHeight;
      SampleImage.style.visibility="visible";
  }


 
//L1 DW:113 111 107 30
//L2    103 101