function ZoomProduct()
{
	var imgThumb = $('prodImg').getCoordinates();
	
	var fullImage = document.getElementById('fullImage');
	var prodImg = document.getElementById('prodImg');
	
    var ratioX = fullImage.offsetWidth / prodImg.offsetWidth;
    var ratioY = fullImage.offsetHeight / prodImg.offsetHeight;

   var zoomDiv = $('zoomImageDiv');
    $('dragBox').setStyles({
        width  : zoomDiv.offsetWidth/ratioX,
        height : zoomDiv.offsetHeight/ratioY
    });

    //mouse over
    $('tint').addEvent('mouseover', function(e) {
        
        // Set tint color
        $('tint').setStyles({
            'visibility': 'visible',
            'opacity'   : '0.5'
        });

        // Set position dragBox
        var top = e.page.y - ( $('dragBox').offsetHeight/2 );
        var left = e.page.x - ( $('dragBox').offsetWidth/2 );
        
        //check top border
        if(top < imgThumb.top)
        { 
            top = imgThumb.top;
        }
        else 
        {
			//check bottom border
			if( top + $('dragBox').offsetHeight > imgThumb.top + imgThumb.height )
			{
				top = imgThumb.top + imgThumb.height - $('dragBox').offsetHeight - 3;
			}        
        }
        
        //check left border
        if(left < imgThumb.left )
        {
            left = imgThumb.left;
        }
        else 
        {
			//check right border
			if( left + $('dragBox').offsetWidth > imgThumb.left + imgThumb.width )
			{
				left = imgThumb.left + imgThumb.width - $('dragBox').offsetWidth - 3;
			}        
        }

        $('dragBox').setStyles({
            'visibility': 'visible',
            'left' : left - imgThumb.left,
            'top'  : top - imgThumb.top
        });            
        
       $('dragImage').setStyles({
            'left' : -left + imgThumb.left,
            'top'  : -top + imgThumb.top
        });
        
       $('fullImage').setStyles({
            'left' : (-left + imgThumb.left)* ratioX ,
            'top'  : (-top + imgThumb.top) * ratioY 
        });
        
        $('product_zoom_Div').setStyles({
            'visibility': 'visible'
        });
        hideDropdownList();
        
    });
    
    //mouse out
    $('dragBox').addEvent('mouseout', function(e) {
        
        $('tint').setStyles({
            'opacity'   : '0',
            'visibility': 'visible'
        });
        
        $('dragBox').setStyles({
            'visibility': 'hidden'
        });
        
        $('product_zoom_Div').setStyles({
            'visibility': 'hidden'

        });
       showPropertiesDiv();
        
      
    });
    $('tint').addEvent('mouseout', function(e) {
        
        $('tint').setStyles({
            'opacity'   : '0',
            'visibility': 'visible'
        });
        
        $('dragBox').setStyles({
            'visibility': 'hidden'
        });
        
        $('product_zoom_Div').setStyles({
            'visibility': 'hidden'

        });
		showPropertiesDiv();
    });


    //mouse move
    $('dragBox').addEvent('mousemove', function(e) {
          
        // Set position dragBox
        var top = e.page.y - ( $('dragBox').offsetHeight/2 );
        var left = e.page.x - ( $('dragBox').offsetWidth/2 );
        
        //check top border
        if(top < imgThumb.top)
        { 
            top = imgThumb.top + 3;
        }
        
        //check left border
        if(left < imgThumb.left )
        {
            left = imgThumb.left + 3 ;
        }
        
        //check bottom border
        if( top + $('dragBox').offsetHeight > imgThumb.top + imgThumb.height )
        {
            top = imgThumb.top + imgThumb.height - $('dragBox').offsetHeight - 3 ;
        }
        
        //check right border
        if( left + $('dragBox').offsetWidth > imgThumb.left + imgThumb.width )
        {
            left = imgThumb.left + imgThumb.width - $('dragBox').offsetWidth - 3 ;
        }      
        
        $('tint').setStyles({
            'visibility': 'visible',
            'opacity'   : '0.5'
        });
        
        $('dragBox').setStyles({
            'left'      : left - imgThumb.left,
            'top'       : top - imgThumb.top,
            'visibility': 'visible',
            'cursor'    : 'move'
        });            
        
        $('dragImage').setStyles({
            'left' : -left + imgThumb.left,
            'top'  : -top + imgThumb.top    
        
        });
        
         $('fullImage').setStyles({
            'left' : (-left + imgThumb.left)* ratioX ,
            'top'  : (-top + imgThumb.top) * ratioY 
        });
        
        $('product_zoom_Div').setStyles({
            'visibility': 'visible'

        });
        hideDropdownList();

    });
}
function hideDropdownList()
{	
	for (f = 0; f < document.forms.length; f++)
	{
		var elements = document.forms[f].elements;
		// looping through all elements on certain form

		for (e = 0; e < elements.length; e++)
		{
			if (elements[e].type == "select-one")
			{
				elements[e].style.display = 'none';
			}
		}
	}
}
function showDropdownList()
{
	for (f = 0; f < document.forms.length; f++)
	{
		var elements = document.forms[f].elements;
		// looping through all elements on certain form

		for (e = 0; e < elements.length; e++)
		{
			if (elements[e].type == "select-one")
			{
				elements[e].style.display = 'block';
			}
		}
	}
}
function showPropertiesDiv()
{
	$('divSizeButton').style.display = 'block';
	$('divColorButton').style.display = 'block';
	$('divQuantityButton').style.display = 'block';
	
	//show other dropdown
	for (f = 0; f < document.forms.length; f++)
	{
		var elements = document.forms[f].elements;
		for (e = 0; e < elements.length; e++)
		{
			if (elements[e].type == "select-one"
				&& (elements[e].id != "colorOptions" && elements[e].id != "sizeOptions" && elements[e].id != "quantityOptions") )
			{
				elements[e].style.display = 'block';
			}
		}
	}

}
function setDragLayerPos()
{
	var imgPos = $('prodImg').getCoordinates();
	var left = imgPos.left;
	/*if ( Browser.Engine.gecko) {
		left +=8;
	}*/
	

	$('dragLayer').setStyles({
		'position':'absolute',
		'top': imgPos.top,
		'left': left  
	});
}