SetDefaultMenu('Prod');
    
      var ViewPortImageScaleFactor = 0;
      var ViewPortImageZoomRatio = 0;    
      var DefaultImageSize = 0;
      var ViewPortTopX,ViewPortTopY = 0;
      var ViewPortBottomX,ViewPortBottomY = 0;
      var PreviousImageScaleFactor = 0;

      var SelectedColorNumber = "";
      var SelectedColorName = "";
      var InstallView = true;
      var InstallSceneName = "0";
      var InstallMethod = "";
      var IsBroadloom = false;
      
      var MaxScaleFactor;
      var MinScaleFactor;
      
      var ImageServerUrl = "";
      var SwatchBoxBaseUrl = "";
      
      var SellingStyleNumber = '';
      var currentScaleFactor = 0.7;  // there are probably better methods to set this
      var startingScale = 0;
      
      function initialize(maxScale, zoomRatio, defaultImageSize, colorNumber, colorName, installMethod, styleNumber, minScale, 
        isBroadloom, imageServerUrl, swatchBoxBaseUrl)
      {
        ViewPortImageScaleFactor = maxScale;
        ViewPortImageZoomRatio = zoomRatio;
        DefaultImageSize = defaultImageSize;
        PreviousImageScaleFactor = maxScale;
        SelectedColorNumber = colorNumber;
        SelectedColorName = colorName;
        InstallMethod = installMethod;
        SellingStyleNumber = styleNumber;
        IsBroadloom = (isBroadloom == "True");
        if (IsBroadloom)
        { InstallMethod = "monolithic"; }
        
        MaxScaleFactor = maxScale;
        MinScaleFactor = minScale;
        
        ImageServerUrl = imageServerUrl;
        SwatchBoxBaseUrl = swatchBoxBaseUrl;
        
        startingScale = MaxScaleFactor;
       
        $('#sendEmail').jqm({ modal: false, trigger: $('a.sendEmailLink'), ajax: '/EmailToFriend/New' });
      }

      function hideEmailPopup(result)
      {      
        if (result.get_data().match(/Thank you/))
            setTimeout("$('#sendEmail').jqmHide();", 2500);
      }

      function ChangeColorwayPage(pageNumber)
      {
          $("#ColorWayTileHolder").html("<img src=\"/Content/loading.gif\" width=\"415\" height=\"294\" alt=\"Loading...\" />");
          url = '/ColorWay/ChangeColorWayPage/' + SellingStyleNumber + '/' + pageNumber + '/' + $("#selected_color_number").attr("value");
          
          $.get(url, null, function(data, status) {
              $("#colorway1").html(data);
          });
      }
      
      function DisplayLoadingImage()
      {
          var image = $("#productDetailViewPortImg").css( {display:"none"} );
          var loadingCss={"margin-top":(598/2)-8,"margin-left":(523/2)-8};
          $("<img class=\"loading\" src=\"/Content/loading.gif\" />").css(loadingCss).insertAfter(image);
      }
      
      function ChangeSelectedColor(colorNumber, colorName)
      {
          DisplayLoadingImage();
          SelectedColorNumber = colorNumber;
          SelectedColorName = colorName;
                    
          UpdateSpecData();
      }
      
      function ChangeResetLink(colorNumber, colorName)
      {
          $("#resetImageLINK").attr('href', "javascript:ChangeSelectedColor('"+colorNumber+"', '"+colorName+"')\;" );
      }
      
      function UpdateSelectedInstallScene(SelectedInstallScene)
      {
        for(i=0;i<8;i++)
        {
             $("#installScene" + i).attr("class", "installSceneTile");      
        }
        $("#" + SelectedInstallScene).attr("class", "installSceneSELECTED");
      }
      
      function ChangeViewType(isInstallView, newInstallSceneName, newInstallMethod)
      {
          DisplayLoadingImage();
          //set values on icky global variables.
          InstallView = isInstallView;
          
          if ((newInstallSceneName == '' || newInstallSceneName == undefined ) && InstallSceneName.length < 1 )
          {
            InstallSceneName = "0";
          }
          else if( newInstallSceneName != '' && newInstallSceneName != undefined )  
          {
            InstallSceneName = newInstallSceneName;
           }

           if (newInstallMethod != "" && newInstallMethod != undefined) {
               InstallMethod = newInstallMethod;
               
           }
      
          if (InstallView)
          {
              $("#installSceneSpan a").addClass("viewTypeSELECTED");
              $("#swatchViewSpan a").removeClass("viewTypeSELECTED");
          }
          else
          {
              $("#installSceneSpan a").removeClass("viewTypeSELECTED");
              $("#swatchViewSpan a").addClass("viewTypeSELECTED");
          }
          UpdateViewPort();
      }
      
      function UpdateSpecData()
      {
          // Update the data on the forms before updating the image
          
          // Deselect the selected color way, and select the new one
          $("#ColorWayTileHolder").find("div.colorWaysTileSELECTED").attr("class", "colorWaysTile");
          $("#colorWaysTile_" + SelectedColorNumber).attr("class", "colorWaysTileSELECTED");

          //deselect and select the the selected colornumbertext
          //$("#colorWaysNumbersText_" + SelectedColorNumber).find("div.colorWaysNumberSELECTED").attr("class", "colorWaysNumber");
          //$("#ColorWayTileHolder").find("div.colorWaysNumberSELECTED").attr("class", "colorWaysNumber");
          //$("#colorWaysNumbersText_" + SelectedColorNumber).attr("class", "colorWaysNumberSELECTED");
                    
          $("#selected_color_number").attr("value", SelectedColorNumber);
          
          var previous = $('#previous_ColorWayLink').attr('href');
          var next = $('#next_ColorWayLink').attr('href');
          
          var regExp = /[\d\w]{5}\/\d+\/[\d\w]{5}/;
          
          if (previous != null)
          {
              if (previous.match(regExp))
                previous = previous.substr(0, previous.length - 6);
                
                $('#previous_ColorWayLink').attr('href', previous + "/" + SelectedColorNumber);
          }
          
          if (next != null)
          {
              if (next.match(regExp))
                next = next.substr(0, next.length - 6);  

              $('#next_ColorWayLink').attr('href', next + "/" + SelectedColorNumber);
          }
          
          // Change the data in the 'Specification' tab
          $("#colorNumber").html('#' + SelectedColorNumber);
          $("#colorName").html(SelectedColorName);
          $("#backingLink").attr('href', "/Information/Backing/" + SellingStyleNumber + "/" + SelectedColorNumber);
          $("#warrantyLink").attr('href', "/Information/Warranty/" + SellingStyleNumber + "/" + SelectedColorNumber);
          
          // Sample Order data
          var sampleOrderJs = "<a href=\"javascript: void(0);\" onclick=\"javascript: UpdateSampleOrder('/SampleOrderItem/Create/" + 
                                SellingStyleNumber + "/" + SelectedColorNumber + 
                                "', '#addToSampleOrderText'); return false;\">Order Sample</a>";
          $("#addToSampleOrderText").html(sampleOrderJs);

          UpdateViewPort();
      }

      function UpdateDownloadHiResLink() 
      {
          var imgUrl = $("#productDetailViewPortImg").attr("src");
          if (imgUrl.match(/\.jpg/)) 
          {
              // Install scene
              imgUrl = imgUrl.replace(/\.jpg/, "FULL.jpg");
              imgUrl = imgUrl.replace(SwatchBoxBaseUrl, "");
          }
          else 
          {
              // Swatch
              imgUrl = imgUrl.split('?')[0];
              imgUrl = imgUrl.replace(ImageServerUrl, "");
          }

          //imgUrl goes last so we don't have to escape the '?' and '&',
          //which otherwise throw off the MVC routing
          
          var outputFileName = SellingStyleNumber + "_" + SelectedColorNumber;
          var highResDownload = "<a href=\"/ImageDownload/Show/" + outputFileName + "/" + imgUrl + "\">download hi-res</a>";
          $("#downloadHighRes").html(highResDownload);
      }
      
      function UpdateViewPort()
      {
            
            var width = 528;
            var height = 593;
        
            // Update the actual image.
            var imageURL = '';
            var ajaxZoomerUrl = '';

            ajaxZoomerUrl = '/ImageSrc/ZoomerChangeImage/' +
                    SellingStyleNumber + '/' +
                    SelectedColorNumber + '/' +
                    InstallView.toString();
           
            if(InstallView) {
            
                ajaxZoomerUrl += '/' +
                    InstallSceneName + '/' +
                    InstallMethod + '/' + 
                    IsBroadloom;
            }


            $.get(ajaxZoomerUrl, imageURL, function(imageURL, status) {
                DisplayLoadingImage();
                RemoveImageTool();

                // Update image src
                $("#productDetailViewPortImg").attr('src', imageURL);
                ResetViewPortCoords(width, height, PreviousImageScaleFactor);

                ResetZoomerProperties( imageURL );

                var img = new Image();
                img.src = imageURL;

                var topX = img.width - width;
                var bottomX = img.width;
                var topY = img.height - height;
                var bottomY = img.height;

                $("#productDetailViewPortImg").imagetool({
                    viewportWidth: width,
                    viewportHeight: height,
                    topX: topX,
                    topY: topY,
                    bottomX: bottomX,
                    bottomY: bottomY,
                    callback: function(topX, topY) { ViewPortTopX = topX; ViewPortTopY = topY; },
                    loading: "/Content/loading.gif"
                });
                
                //var styleTag = "width: " + (img.width+3) + "px; height: " + (img.height+3) + "px; left: -" + (topX+3) + "px; top: -" + (topY+3) + "px; cursor: move; position: relative;";
                //$("#productDetailViewPortImg").attr("style", styleTag);
                $("#productDetailViewPortImg").show();
                UpdateDownloadHiResLink();
            });
      }
      
function RemoveImageTool()
{    
    $('#productDetailViewPortImg').remove();
    $('#viewport').remove();
    $('#productDetailLRGimage').html('<img src="" id="productDetailViewPortImg">');
}

function ResetViewPortCoords(width, height, scale)
{
    TrackViewPortCoords(0, 0);
    ViewPortBottomX = width;
    ViewPortBottomY = height;
    PreviousImageScaleFactor = scale;
    ViewPortImageScaleFactor = scale;
}

function TrackViewPortCoords(newTopX, newTopY)
{
    ViewPortTopX=newTopX;
    ViewPortTopY=newTopY;
}
      
      
    
    //this function asssumes that the viewportscalefactor (ViewPortImageScaleFactor, PreviousPortImageScaleFactorpage)
    // varialbes have been set by the caller    
    function SetViewPortCoords()
    {
       var currentImageSize = DefaultImageSize / ViewPortImageScaleFactor;
       var oldImageSize = DefaultImageSize / PreviousImageScaleFactor;
       var tempTopX, tempTopY = 0;
       
       tempTopX=(ViewPortTopX/oldImageSize)*currentImageSize;
       tempTopY=(ViewPortTopY/oldImageSize)*currentImageSize;
       
       ViewPortTopX=tempTopX;
       ViewPortTopY=tempTopY;
       
       ViewPortBottomX=ViewPortTopX+528;
       ViewPortBottomY=ViewPortTopY+593;

    }
    
    function ResetZoomerProperties( newZoomerImageUrl )
    {
        //extract the starting zoom factor from the url
        //since the server has calculated out the best scale
        //factor for this particular image.
        
        if ( newZoomerImageUrl.search(/scl=\d+/) > 0)
        {
        //there's regex to do this all at one time, but i can't find in the time alotted
            var startingScaleStr = newZoomerImageUrl.match(/scl=[\d\.]+/);
            
            if( startingScale == undefined )
            {
              //make something up
             
              return false;
            }
            else
            {
               startingScale = startingScaleStr[0].split("=")[1]; //oh, this is ugly....
               if (startingScale == undefined)
                startingScale = MaxScaleFactor;
               var toRound = new Number( startingScale );
               startingScale = toRound.toFixed( 1 );
               ViewPortImageScaleFactor = startingScale;
               PreviousImageScaleFactor = startingScale;
              
            }
        }
        else
        {
            //make something up
            return false;
        }
        
    }
    
    function ZoomViewPortImage(ZoomDirection) 
    {
            var newBottomX, newBottomY, newTopX, newTopY = 0;
            var currentImageUrl = $("#productDetailViewPortImg").attr('src');
            var zoomFactor = ViewPortImageScaleFactor;
            
            if (currentImageUrl == undefined)
                return;
                       
            
            PreviousImageScaleFactor = ViewPortImageScaleFactor;
            
            if (ZoomDirection == "in")
            {
                zoomFactor = ViewPortImageScaleFactor * currentScaleFactor;
                var toRoundIn = new Number( zoomFactor );
                zoomFactor = toRoundIn.toFixed( 1 );
            }
            else
            {
                zoomFactor = ViewPortImageScaleFactor / currentScaleFactor;  
                var toRoundIn = new Number( zoomFactor );
                zoomFactor = toRoundIn.toFixed( 1 );           
            }
           
            var zoomNumber = new Number( zoomFactor );
                
            var startingScaleNumber = new Number( startingScale );
            if (zoomNumber > MaxScaleFactor && ZoomDirection == "out") 
            {
                zoomFactor = startingScale;                            
            }
            else if(zoomNumber < MinScaleFactor)
            {
                zoomFactor = MinScaleFactor;
            }
            
            ViewPortImageScaleFactor = zoomFactor;

            if(PreviousImageScaleFactor == zoomFactor)
            { 
                return;
            }
            
          
            //apply new zoom factor            
            if (currentImageUrl.search(/scl=\d+/) >0)
            {   
                SetViewPortCoords();                            
                currentImageUrl = currentImageUrl.replace(/scl=[\d\.]+/,'scl=' + zoomFactor);
                
                $("#productDetailViewPortImg").hide();
                RemoveImageTool();
                           
              $("#productDetailViewPortImg").attr('src', currentImageUrl);              
                
                    $("#productDetailViewPortImg").imagetool({                   
                    viewportWidth: 528
                    ,viewportHeight: 593
                    ,topX: ViewPortTopX
                    ,topY: ViewPortTopY
                    ,bottomX: ViewPortBottomX
                    ,bottomY: ViewPortBottomY
                    ,callback: function (topX, topY) {ViewPortTopX=topX;ViewPortTopY=topY;}   
                    ,loading: "/Content/loading.gif"
                    });                     
                    
              $("#productDetailViewPortImg").show();           
            }
      
    }
    
    function MM_jumpMenuGo(objId,targ,restore){ //v9.0
      var selObj = null;  with (document) { 
      if (getElementById) selObj = getElementById(objId);
      if (selObj) eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
      if (restore) selObj.selectedIndex=0; }
    }
    
    function updateLink(result)
    {
        var results = result.split("|");
        $('#ProjectProfilesLink').attr('href', $('#ProjectProfilesLink').attr('href') + "/" + results[0]);
        $('#ProjectProfile').html(results[1]);
    }