var curLensImage='';
var zoomSize=3;
var lensSize=200;
var curIconDiv=false;
var newImageWidth=0;
var newImageHeight=0;

var additionalMarginX=0;
var additionalMarginY=0;

var lensRange=new Array();

function setLens(){
    $('.icon').mousemove(iconOver);
    $('#lens').mousemove(lensMove);
    $('#lens').click(function(){
        $('#lens').hide();
        curIconDiv.children('img').click();
    });

    function iconOver(e){
        curIconDiv=$(this);
        curLensImage=$(this).children('img');

        newImageWidth=curLensImage.width()*zoomSize;
        newImageHeight=curLensImage.height()*zoomSize;

        additionalMarginX=(lensSize-newImageWidth)/2;
        additionalMarginY=(lensSize-newImageHeight)/2;

        var startX=e.pageX-lensSize/2;
        var startY=e.pageY-lensSize/2;

        lensRange=new Array($(this).offset().left, $(this).offset().top, $(this).offset().left+$(this).width()+10, $(this).offset().top+$(this).height()+10);

        $('#lens').html('<img src="'+curLensImage.attr('src')+'" width="'+newImageWidth+'" height="'+newImageHeight+'" style="margin: '+additionalMarginX+'px 0 0 '+additionalMarginY+'px" />').css('left', startX+'px').css('top', startY+'px').css('background-image', curIconDiv.css('background-image')).css('background-color', curIconDiv.css('background-color')).show();
    }

    function lensMove(e){
        if(e.pageX<lensRange[0] || e.pageY<lensRange[1] || e.pageX>lensRange[2] || e.pageY>lensRange[3]){
            $('#lens').hide();
        }
        else{
            var ml=((newImageWidth/curIconDiv.width())*(e.pageX-curIconDiv.offset().left))*(-1)+additionalMarginX+newImageWidth/2;
            var mt=((newImageHeight/curIconDiv.height())*(e.pageY-curIconDiv.offset().top))*(-1)+additionalMarginY+newImageHeight/2;
            //$('#test').html(newImageHeight+'*'+curIconDiv.height()+'*'+e.pageY+'*'+curIconDiv.offset().top+'*'+additionalMarginY);
           //$('#test').html(mt);
            $('#lens').children('img').css('margin-left', ml+'px').css('margin-top', mt+'px');

            ml=e.pageX-$('#lens').width()/2;
            mt=e.pageY-$('#lens').height()/2;

            $('#lens').css('left', ml+'px').css('top', mt+'px');
        }
    }
}

function removeLens(){
    $('.icon').unbind('mousemove');
}
