var dir = 'content_graphics/portfolio/';
var zoomed = false;
var zooming = false;
var steps = 20;
var stepcounter = steps;

function zoom(obj, id){
   
    if(!zooming){
   
        zooming = true;
        var endpos = getPos($('pMainImage'));
        
        $('pMainImage').style.visibility = "hidden";
        $('pMainImage').src = '';
        
        if(document.images){
            document.images.pMainImage.src = dir + $('pfId').value + '/' + id;
            document.images.zoomimage.src = dir + $('pfId').value + '/' + id;
        }
        
       
        // style variables these get modified by dozoom()
        var startpos = getPos(obj);
        var Xstep = Math.round(Math.abs(endpos[0] - startpos[0]) / steps);
        var Ystep = Math.round(Math.abs(endpos[1] - startpos[1]) / steps);
        var opacity = 0;
        var width = getWidth(obj);
        var height = getHeight(obj);
        var widthinc = Math.round((getWidth($('pMainImage')) - getWidth(obj)) / steps);
        var heightinc = Math.round((getHeight($('pMainImage')) - getHeight(obj)) / steps);
        
        $('zoomimage').style.left = startpos[0] + "px";
        $('zoomimage').style.top = startpos[1] + "px";
        $('zoomimage').style.width = width + "px";
        $('zoomimage').style.height = height + "px";
        $('zoomimage').style.MozOpacity = '0.0';
	    $('zoomimage').style.filter = 'alpha(opacity=0)';
        $('zoomimage').style.display = "block";
        
        dozoom(id, Xstep, Ystep, widthinc, heightinc, 0);
    }
    else{
        reset();
    }
}

function dozoom(id, xstep, ystep, widthinc, heightinc, opacity){
    stepcounter--;
    opacity += 0.2;
    if(stepcounter >= 0){
        $('zoomimage').style.left = getPos($('zoomimage'))[0] - xstep + "px";
        $('zoomimage').style.top  = getPos($('zoomimage'))[1] - ystep + "px";
		setOpacity($('zoomimage'), opacity);
	    setWidth($('zoomimage'), getWidth($('zoomimage')) + widthinc);
	    setHeight($('zoomimage'), getHeight($('zoomimage')) + heightinc);
        setTimeout('dozoom("' + id + '", ' + xstep + ', ' + ystep + ', ' + widthinc + ', ' + heightinc + ', ' + opacity + ')', 5);
    }
    else{
        swapMainImg(id);
        reset();
    }
}

function swapMainImg(newimg){
    if(document.images){
        document.images.pMainImage.src = dir + $('pfId').value + '/' + newimg;
    }
    $('pMainImage').style.visibility = "visible";
}

function reset(){
    stepcounter = steps;
    $('zoomimage').style.display = "none";
    zoomed = true;
    zooming = false;
}

function getPos(obj) {
    var offset = 140;
	var curleft = curtop = 0;
	if (obj.offsetParent){
		curleft = obj.offsetLeft;
		curtop = obj.offsetTop;
		while (obj = obj.offsetParent){
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		}
	}
	return [curleft,curtop];
}

function getWidth(obj){
    return obj.offsetWidth;
}

function getHeight(obj){
    return obj.offsetHeight;
}

function setWidth(obj, w){
    obj.style.width = w + "px";
}

function setHeight(obj, h){
    obj.style.height = h + "px";
}
function setOpacity(obj, value){
	obj.style.opacity = value/10;
	obj.style.filter = 'alpha(opacity=' + value*10 + ')';
}