// zoomFlag is an indicator of the zoom operation to be performed. 1=zoomIn -1=zoomOut 0=Reset Zoom. This variable is used to adjust the zoom level indicator.
var zoomFlag = 1;

var ZOOM_IN_ON_CLASS = 'btn_in_on';
var ZOOM_IN_OFF_CLASS = 'btn_in_off';
var ZOOM_OUT_ON_CLASS = 'btn_out_on';
var ZOOM_OUT_OFF_CLASS = 'btn_out_off';
var ZOOM_RESET_ON_CLASS = 'btn_reset_on';
var ZOOM_RESET_OFF_CLASS = 'btn_reset_off';

//this method will register large product images
function init_large_images(numOfProductImages, largeImages) {
    var imageIndex = 1;
    if(numOfProductImages > 1) {
        for(imageData in largeImages) {
            if(largeImages[imageData]) {
                registerImage("product_image_"+imageData, largeImages[imageData], imageIndex++);
            }
        }
    }
}


//this method will register all the zoomable images
function init_zoom_images(zoomImageAttributes, zoomEnabled, productImageAreaWidth,productImageAreaHeight) {
    //This code is used to handle the case where this function is invoked with 3 arguments: zoomImageAttributes, zoomEnabled, productImageArea.
    if(typeof(productImageAreaHeight) == 'undefined') {
         var productImageAreaHeight = productImageAreaWidth;
    }

    if(document.getElementById('zoomViewerDiv') == null)
    {
        if(zoomEnabled == "true") {
            var originalLoaded = 0;
            var selectedLoaded = false;

            var attrHolder;
            for(i in zoomImageAttributes) {
                if("MAIN" == zoomImageAttributes[i].variant && i != 0){
                    var attrHolder = zoomImageAttributes[0];
                    zoomImageAttributes[0] = zoomImageAttributes[i];
                    zoomImageAttributes[i] = attrHolder;
                }
            }

            for(i in zoomImageAttributes) {
                var zoomImage = zoomImageAttributes[i];
                if(zoomImage.numScale>0) {
                    var scaleLevel = new Array(zoomImage.numScale);
                    for(j in zoomImage.scaleLevels) {
                        scaleLevel[j] = new MediaServicesZoomScale(zoomImage.scaleLevels[j].scaleWidth, zoomImage.scaleLevels[j].scaleHeight, zoomImage.scaleLevels[j].tileSize);
                    }
                    if( originalLoaded == 0 )
                    {                                                   
                        DynAPI.addZoomViewer("http://"+zoomImage.URL, productImageAreaWidth, productImageAreaHeight, zoomImage.width, zoomImage.height, zoomImage.version, zoomImage.rmType, scaleLevel);   
                        originalLoaded = 1;
                    }
                    if("MAIN" == zoomImage.variant){
                        selectedLoaded = true;
                    }          
                    zoomRegisterImage('product_image_'+zoomImage.variant, "http://"+zoomImage.URL, zoomImage.height, zoomImage.width, zoomImage.version, zoomImage.rmType, scaleLevel);            
                }
            }
            if(selectedLoaded){    
                if(document.getElementById('productImage'))
                    document.getElementById('productImage').style.display = "none";
            }else{
                document.getElementById('zoomViewHolder').style.display = "none";
            }
            //make the zoom controls visible
            if(document.getElementById("zoomControls")) {
                document.getElementById("zoomControls").style.display = "block";
                document.getElementById("zoomControls").style.top = (productImageAreaHeight-25)+"px"; 
            }
        }
    }                    
}

//zoomInCount is the number of Levels to zoom in from current level
function browserZoomIn(zoomInCount) {
    zoomFlag = 1;
    if(zoomInCount == undefined)
        DynAPI.view.zoomIn();    
    else    
        DynAPI.view.zoomInByLevel(zoomInCount);
}
//zoomOutCount is the number of Levels to zoom out from current level
function browserZoomOut(zoomOutCount) {
    zoomFlag = -1;
    if(zoomOutCount == undefined)
        DynAPI.view.zoomOut();
    else
        DynAPI.view.zoomOutByLevel(zoomOutCount);
}
function browserZoomReset() { 
    if(zoomEnabled == "true")
    {
        zoomFlag = 0;
        DynAPI.view.reset();
        if(window.slider != undefined )
        {
            if(slider.getValue() != sliderInitPos)
            { 
                slider.setValue(sliderInitPos);
            }
        }
        document.getElementById('zoomInControl').className = ZOOM_IN_ON_CLASS;
        document.getElementById('zoomOutControl').className = ZOOM_OUT_OFF_CLASS;
        if(document.getElementById('zoomResetControl') != null)
            document.getElementById('zoomResetControl').className = ZOOM_RESET_OFF_CLASS;
        zoomFlag = 1;
    }
}
var registeredImages = new Object();
function registerImage( id, imageURL, imageIndex ) {
    imageObj = new Image();
    imageObj.src = imageURL;
    registeredImages[id] = new Object();
    registeredImages[id].image = imageObj;
    registeredImages[id].index = imageIndex;
}
var zoomRegisteredImages = new Object();
var zoomPreloadCount = 0;
var zoomAllPreloaded = 0;
var zoomNumberToPreload = 0;
function zoomRegisterImage( id, image, height, width, version, type, scaleLevels ) {
    zoomRegisteredImages[id] = new Object();
    zoomRegisteredImages[id].image = image;
    zoomRegisteredImages[id].height = height;
    zoomRegisteredImages[id].width = width;
    zoomRegisteredImages[id].version = version;
    zoomRegisteredImages[id].type = type;
    zoomRegisteredImages[id].scaleLevels = scaleLevels;
    if ( zoomPreloadCount < zoomNumberToPreload ) 
    {
        var zoomImagePreloader = new Image();
        zoomImagePreloader.src = image;
        zoomPreloadCount++;
    }
}
function setZoomButtons(reset)
{
    var zoomInElement = document.getElementById('zoomInControl');
    var zoomOutElement = document.getElementById('zoomOutControl');
    var zoomResetElement = document.getElementById('zoomResetControl');
    if( zoomInElement != null && zoomOutElement != null ) 
    {
        if(window.sliderZoom != undefined && sliderZoom == 1)
        {
            sliderZoom = 0;
            return;
        }        
        var zoomLevel = DynAPI.view.getZoomLevel();
        if (zoomLevel == -1 || reset) {
            zoomInElement.className = ZOOM_IN_ON_CLASS;
            zoomOutElement.className = ZOOM_OUT_OFF_CLASS;
            if(zoomResetElement != null)
                zoomResetElement.className = ZOOM_RESET_OFF_CLASS;
            if(window.topLayerId != undefined)
            {
                var curv = document.getElementById("DynObject"+ topLayerId );
                if(curv != undefined)
                    curv.style.cursor = 'pointer';
            }

            if(window.slider != undefined && !isNaN(slider.getValue()))
            {
                zoomFlag = 1;
                sliderDragged = 0;
                prevSliderPos = bottomConstraint;
                slider.setValue(sliderInitPos);
                sliderDragged = 1;
            }        
        }
        else if (zoomLevel == 1) {
            zoomInElement.className = ZOOM_IN_OFF_CLASS;
            zoomOutElement.className = ZOOM_OUT_ON_CLASS;
            if(zoomResetElement != null)
               zoomResetElement.className = ZOOM_RESET_ON_CLASS;
            if(window.slider != undefined && !isNaN(slider.getValue()))
            {
                zoomFlag = 1;
                sliderDragged = 0;
                prevSliderPos = topConstraint;
                slider.setValue(topConstraint);
                sliderDragged = 1;
            }
        }
        else
        {
            zoomOutElement.className = ZOOM_OUT_ON_CLASS;
            zoomInElement.className = ZOOM_IN_ON_CLASS;
            if(zoomResetElement != null)
                zoomResetElement.className = ZOOM_RESET_ON_CLASS;
            if(window.topLayerId != undefined && window.dragEndCursor!= undefined)
            {
                var curv = document.getElementById("DynObject"+ topLayerId );
                if(curv != undefined)
                    curv.style.cursor = dragEndCursor;
            }
            if(window.slider != undefined && !isNaN(slider.getValue()))
            {
                sliderDragged = 0;
                if(zoomFlag == 1)
                {
                        prevSliderPos = slider.getValue() - keyIncrement;
                        slider.setValue(prevSliderPos);
                }
                else if(zoomFlag == -1)
                {
                        prevSliderPos = slider.getValue() + keyIncrement;
                        slider.setValue(prevSliderPos);
                        zoomFlag = 1;
                }
                sliderDragged = 1;
            }
        }
    }      
}

var selectedImageID = "product_image_MAIN";
//this method handles the mouseover effect for the thumbnail images
function displayImage( id ) {
                                                                                                                             
    if ( id == selectedImageID ) return;
    selectedImageID = id;
    for( elementID in zoomRegisteredImages )
    {
        if ( !zoomAllPreloaded )
        {
            var zoomImagePreloader = new Image();
            zoomImagePreloader.src = zoomRegisteredImages[elementID].image;
        }
    }
    zoomAllPreloaded = 1;
    if(zoomRegisteredImages[id] == undefined)
    {
        if(document.getElementById('zoomViewerDiv') != null)
        {
            browserZoomReset();
            document.getElementById('zoomViewHolder').style.display = "none";
        }
        document.getElementById('productImage').style.display = "";
        document.getElementById('productImage').src = registeredImages[id].image.src;
        return;
    }
    else
    {
        document.getElementById('productImage').style.display = "none";
        document.getElementById('zoomViewHolder').style.display = "inline";
        DynAPI.view.setZoomImage(zoomRegisteredImages[id].image,zoomRegisteredImages[id].width,zoomRegisteredImages[id].height,zoomRegisteredImages[id].version,zoomRegisteredImages[id].type, zoomRegisteredImages[id].scaleLevels);
        document.getElementById('zoomInControl').className = ZOOM_IN_ON_CLASS;
        document.getElementById('zoomOutControl').className = ZOOM_OUT_OFF_CLASS;
        document.getElementById('zoomResetControl').className = ZOOM_RESET_OFF_CLASS;
        return;
    }
                                                                                                                             
}