// JScript File

var curZoomIndex = 0;
var initialZoomIndex = 0;
var zoomProperty = "width";
var originalImgHeight = 364;
var originalImgWidth = 260;
var maxZoomIndex = 11;
var isDragStart = false;
var arrayZoomLevels = new Array();
var _xPos;
var _yPos;

/*arrayZoomLevels = [25, 50, 60, 75, 90, 100, 110, 125, 150, 175, 200, 225, 250, 275, 300];
//arrayZoomLevels = [25, 30, 40, 50, 60, 70, 80];*/

arrayZoomLevels = [10, 15 ,20 ,25, 30, 40, 50, 60, 70, 80, 100];

function setDefaultImageProperties(_width, _height)
{
    var imgObject;
    var _maxAvailWidth;
    var _maxAvailHeight;
    var objImageHolder;
    var zoomIndex = 0;
    var offsetValue = 20;
    
    objImageHolder = document.getElementById(divImageHolderId);
    
    _maxAvailWidth = parseInt(objImageHolder.style.width) - offsetValue;
    _maxAvailHeight = parseInt(objImageHolder.style.height) - offsetValue;
    originalImgHeight = _height;
    originalImgWidth = _width;
   
    for(var loopIndex = 0; loopIndex < arrayZoomLevels.length; loopIndex++)
    {
        var zoomValue = arrayZoomLevels[loopIndex];
        var newWidth = (parseInt(originalImgWidth) * zoomValue) / 100;
        var newHeight = (parseInt(originalImgHeight) * zoomValue) / 100;
        
        if((newWidth <= _maxAvailWidth) && (newHeight <= _maxAvailHeight))
        {
            zoomIndex = loopIndex;
        }
        else
        {
            break;
        }
    }
    
    if(originalImgHeight > originalImgWidth)
    {
        zoomProperty = "height";
    }
    else
    {
        zoomProperty = "width";
    }
    
    //maxZoomIndex = zoomIndex
    
    curZoomIndex = zoomIndex;
    initialZoomIndex = zoomIndex;
    setZoomValue(arrayZoomLevels[curZoomIndex],1);
    InitializeDrag();
    //document.getElementById(txtZoomPersentageId).value = arrayZoomLevels[curZoomIndex] + "%";
}

function zoomIn()
{
    if(curZoomIndex < maxZoomIndex -1)
    {
        curZoomIndex += 1;
        setZoomValue(arrayZoomLevels[curZoomIndex],1);
    }
}

function zoomOut()
{
    if(curZoomIndex > 0)
    {
        curZoomIndex -= 1;
        setZoomValue(arrayZoomLevels[curZoomIndex],-1);
    }
}


function setZoomValue(zoomValue, zoomDirection)
{
    var imgObject = document.getElementById(imageId);
    var divImageHolder = document.getElementById(divImageId);
    var newWidth = (parseInt(originalImgWidth) * zoomValue) / 100;
    var newHeight = (parseInt(originalImgHeight) * zoomValue) / 100;
    var intHeight;
    var intWidth;
    
    var ContainerHeight = parseInt(document.getElementById(divImageHolderId).style.height);
    var ContainerWidth  = parseInt(document.getElementById(divImageHolderId).style.width);
     
    intWidth = (parseInt(imgObject.style.width));
    intHeight = (parseInt(imgObject.style.height));

    document.getElementById(txtZoomPersentageId).value = arrayZoomLevels[curZoomIndex] + "%";
   
     imgObject.style.width = newWidth + "px";
     imgObject.style.height = newHeight + "px";
    
    intWidth = newWidth - intWidth;
    intHeight = newHeight - intHeight;
    
    IncreaseSize(imgObject, newWidth, newHeight, intWidth, intHeight);
    
    if(!isNaN(parseInt(divImageHolder.style.top)))
        divImageHolder.style.top = (parseInt(divImageHolder.style.top) - (intHeight/2)) + "px";
    
    if(!isNaN(parseInt(divImageHolder.style.left)))
    divImageHolder.style.left = (parseInt(divImageHolder.style.left) - (intWidth/2)) + "px";  
}

function setImagePoistion()
{
   var divHeight = 0;
   var divWidth = 0;
   var imgHeight = 0;
   var imgWidth = 0;
      
    document.getElementById(divImageId).style.height = originalImgHeight + "px";
    document.getElementById(divImageId).style.width = originalImgWidth + "px";
    
    document.getElementById(imageId).style.height = originalImgHeight + "px";
    document.getElementById(imageId).style.width = originalImgWidth + "px";
    divHeight = parseInt(document.getElementById(divImageHolderId).style.height);
    divWidth = parseInt(document.getElementById(divImageHolderId).style.width);
    imgHeight = parseInt(document.getElementById(divImageId).style.height);
    imgWidth = parseInt(document.getElementById(divImageId).style.width);

    document.getElementById(divImageId).style.top = (divHeight - imgHeight)/2 + "px";
    document.getElementById(divImageId).style.left = (divWidth - imgWidth)/2 + "px";
}

function IncreaseSize(imgObject, incWidth, incHeight)
{
    
}


var imageOffsetLeft;
var imageOffTop;

function setDragStart(option, e)
{
    isDragStart = option;
    
    if(option == true)
    {
       
        if(document.all)
        {
            imageOffsetLeft = event.x;
            imageOffTop = event.y;
        }
        else
        {
             if(e != null){e.preventDefault();}
            imageOffsetLeft = e.clientX;
            imageOffTop = e.clientY;
        }
        //status = 'x=' + document.getElementById(divImageId).offsetLeft + ';y=' + document.getElementById(divImageId).offsetTop;
        imageOffsetLeft = parseInt(document.getElementById(divImageId).offsetLeft) - imageOffsetLeft;
        imageOffTop = parseInt(document.getElementById(divImageId).offsetTop) - imageOffTop;
  //status = 'x=' + imageOffsetLeft + ';y=' + imageOffTop;
        
    }
}

function dragImage(e)
{
    if(isDragStart == true)
    {
        if(document.all)
        {
            _xPos = event.x;
            _yPos = event.y;
        }
        else
        {
            _xPos = e.clientX;
            _yPos = e.clientY;
        }
   
   // _xPos -= parseInt(document.getElementById(divImageHolderId).offsetLeft);
    //_yPos -= parseInt(document.getElementById(divImageHolderId).offsetTop); 
    
    _xPos += imageOffsetLeft;
    _yPos += imageOffTop;
    
        status = _xPos;
        document.getElementById(divImageId).style.top = _yPos + "px";
        document.getElementById(divImageId).style.left = _xPos + "px";
    }
}

document.body.onmouseup = function(e){setDragStart(false,e);}

function InitializeDrag()
{
    //document.getElementById(divImageId).onmousedown = function(e){if(e != null){e.preventDefault();}setDragStart(true,e); }
    //document.getElementById(imageId).onmousedown = function(e){if(e != null){e.preventDefault();} setDragStart(true,e); }
}

document.body.onmousemove = function(e){

if(document.getElementById("divBigImage") != null)
{
    dragImage(e);
}
}