// variables that will be used within this script (can only set one image for cropping at a time)
var x1=y1=-1; // x,y position of the first click in relation to the image
var x2=y2=-1; // x,y position of the second click in relation to the image
var posx=posy=-1; // the x,y position in relation to the image's parent for selection area
var cropw=croph=-1; // width and height of crop area
var imgx=imgy=-1; // x,y position of the image in relation to its absolutely-positioned parent
var divx=divy=-1; // x,y position of the image's absolutely-positioned parent.
var poffx1=poffy1=-1; // the page offset (how far down or right have we scrolled) for first click
var poffx2=poffy2=-1; // the page offset (how far down or right have we scrolled) for first click
var selElem=null; // the selection area div element
var abselemdet=false; // absolute-position element detected in the path?

function getImageCropSelectionPoint(elem,evnt) {
	//alert(elem) ;
	 //x = d['crpImg'].offsetLeft;
	 //y = d['crpImg'].offsetTop;
	//alert("x = " + x + "\ny = " + y);
	
	
    var opera=(navigator.userAgent.toLowerCase().indexOf("opera") != -1);

    if(cropw>0 || croph>0){
        // second point was already defined
        // reset the selection area, and eliminate the need for a reset button.
        clearImageCropArea();
        return false;
    }
    
    // get image location relative to its absolutely-positioned parent (or document)
    // at first click (should this happen both times??)
    if(imgx == -1 && imgy == -1){
        // only if these are set to -1 (not calculated yet)
        obj=document.getElementById(elem);
        while(obj.offsetParent){
            // check if this element has absolute positioning first
            var absposcheck=false;
            if(typeof(obj.currentStyle)!='undefined' && obj.currentStyle.position){
                // this is MSIE, we need to work differently
                if( obj.currentStyle && obj.currentStyle.position == 'absolute'){
                    absposcheck=true;
                    if(abselemdet)
                        abselemdet=false;
                    else
                        abselemdet=true;
                }
            }else{
                // others browsers
                if(window.getComputedStyle(obj, '').getPropertyValue('position') == 'absolute'){
                    absposcheck=true;
                    if(abselemdet)
                        abselemdet=false;
                    else
                        abselemdet=true;
                }
            }

			if(absposcheck){
                // this is absolutely positioned
                // need to know the position in relation to the document as well
                while(obj.offsetParent){
                    // this gives the element relative to the document
                    divy += obj.offsetTop;
                    divx += obj.offsetLeft;
                    obj = obj.offsetParent;
                }
                break;
            }

            imgy = obj.offsetTop;
            imgx = obj.offsetLeft;
            obj = obj.offsetParent;
        }
        if(abselemdet){
            divy+=15;
        }
    }
    // calculate the current page offset (to compensate for scrolling!)
    if(typeof(window.pageXOffset)=='undefined'){
        // MSIE browsers
        if(x1==-1 && y1==-1){
            // this is the first click
            poffx1=document.body.scrollLeft;
            poffy1=document.body.scrollTop;
        }else{
            // second click
            poffx2=document.body.scrollLeft;
            poffy2=document.body.scrollTop;
        }
    }else{
        // others
        if(x1==-1 && y1==-1){
            // this is the first click
            poffx1=window.pageXOffset;
            poffy1=window.pageYOffset;
        }else{
            // second click
            poffx2=window.pageXOffset;
            poffy2=window.pageYOffset;
        }
    }

    if(x1==-1 && y1==-1){
        // this is the first click
        posx=evnt.clientX + poffx1 - divx;
        posy=evnt.clientY + poffy1 - divy;
        x1 = posx - imgx;
        y1 = posy - imgy;
        if(opera && abselemdet){
            y1+=11;
        }
    }else{
        // this is the second click
        x2 = evnt.clientX + poffx2 - divx - imgx;
        y2 = evnt.clientY + poffy2 - divy - imgy;
        if(opera && abselemdet){
            y2+=11;
        }

        // since each click defines a corner, decide which ones were
        // used so the user doesn't have to click in any certain order
        if(x1>x2){
            // right side was clicked first
            cropw = x1-x2;
            posx-=cropw;
        }else{
            cropw = x2-x1;
        }

        if(y1>y2){
            // bottom was clicked first
            croph = y1-y2;
            posy-=croph;
        }else{
            croph = y2-y1;
        }

        // also need to show the selection
        selElem = document.getElementById('imgJSselbox');
		//alert(selElem.offsetTop);
        selElem.style.width = (cropw)+'px';
        selElem.style.height = (croph)+'px';
        selElem.style.left = posx+'px';
        selElem.style.top = posy+'px';
        selElem.style.visibility = 'visible';
		document.getElementById('crop').style.visibility = 'visible';
    }
//alert("Point 1: ("+x1+", "+y1+")\nPoint 2: ("+x2+", "+y2+")\nSIZE: "+cropw+" x "+croph);

}

function setImageCropAreaSubmit(url,elem){
    // this will do nothing more than send the coords and image name to the
    // passed url via GET variables, process ot however you want from there
    
	// set relative position
		var d = document;

	obj=d['crpImg'] ;
	
var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	

obj=d['crpImg'] ;

	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;

	
    // image name: I don't want to deal with "http://www.exmaple.com" stuff!
    imgSrc=document.getElementById(elem).src;
    imgSrc=imgSrc.replace(/^[a-z]+\:\/\/[^\/]+/,"");

    // in case there is a query string for the image (used in some systems to prevent image caching)
    imgSrc=imgSrc.replace(/\?.*$/,"");

    if(url.indexOf('?') != -1){
        // if the url contains a query string, we want to append to it
        url=url+'&';
    }else{
        // no query string present, add it
        url=url+'?';
    }
    // put the rest in
    // these 2 lines are in case the area wasn't selected from top left to bottom right.
    if(x1>x2) x1=x2;
    if(y1>y2) y1=y2;
    //x1 = x1 - 223;
	//x1 = x1 - 97;
	//y1 = y1 - 172;
	//y1 = y1 - 187;
	x1 = x1 - curleft;
	y1 = y1 - curtop;
	//alert(y1);
	//alert("x = " + curleft + "\ny = " + curtop);
    url=url+'x='+x1+'&y='+y1+'&width='+cropw+'&height='+croph+'&image='+imgSrc;
//alert(url);
    window.location.href=url;
}

function clearImageCropArea(){
    x1=x2=y1=y2=imgx=imgy=divx=divy=cropw=croph=poffx1=poffx2=poffy1=poffy2=posx=posy=-1;
    if(selElem){
        selElem.style.width = 0;
        selElem.style.height = 0;
        selElem.style.left = 0;
        selElem.style.top = 0;
        selElem.style.visibility = 'hidden';
        selElem = null;
		document.getElementById('crop').style.visibility = 'hidden';
    }
}