/* picture tagging
* hugh messenger
*/

/* START */

var tagging = new Class ( {
	X1:0,
	Y1:0,
	X2:0,
	Y2:0,
	show:0,
		
	initialize:function(_variable,_imgID,_imgNo,_option,_text){
        this.variable=_variable;
        this.imageID=_imgID;
        this.image=$(this.imageID);
        this.imageNo=_imgNo;
        this.options=Object.extend({
            ajaxRequestURL:'',
			ajaxReturnID:'',
			style:'imgTag_',
			description:false,
			autoInit:false,
			ratioDim:{
                x:0,y:0
            },
			displayOnInit:false,
			minWidth:0,
			minHeight:0,
			maxWidth:0,
			maxHeight:0,
			variable: _variable
        }
        ,_option||{

        }
        );
        this.textVariables = Object.extend({
            okButton:'OK',cancelButton:'Cancel',nameText:'Name',descriptionText:'Description'
        }
        ,_text||{

        }
        );
        this.image.parentNode.style.position='relative';
        this.image.style.top='0px';
        this.image.style.left='0px';
        this.isWebKit=/Konqueror|Safari|KHTML/.test(navigator.userAgent);
        this.isIE6=false;
        this.isIE7=false;
		this.isIE8=false;
		if (/MSIE 8/.test(navigator.userAgent)) {
			this.isIE8 = true;
		}
		else if (/MSIE 7/.test(navigator.userAgent)) {
			this.isIE7 = true;
		}
		else if (/MSIE 6/.test(navigator.userAgent)) {
			this.isIE6 = true;
		}
        this.isOpera8=/Opera\s[1-8]/.test(navigator.userAgent);
        this.cropp=null;
        if(this.options.autoInit==true)this.init();

    }
    ,init:function(){

		//this.removeCrop();
        if(this.cropp!=null)return;
		/*
        this.cropp=new Cropper(this.imageID,{
            variable:this.variable,minWidth:this.options.minWidth,minHeight:this.options.minHeight,manWidth:this.options.manWidth,manHeight:this.options.manHeight,ratioDim:this.options.ratioDim,displayOnInit:this.options.displayOnInit,onEndCrop:this.endCrop,onStartCrop:this.startCrop
        }
        );
		*/
		this.cropp = new MooCrop(
			this.imageID,
			{
				'min':
				{
					'width': this.options.minWidth,
					'height': this.options.minHeight
				},
				onBegin: this.startCrop,
				onComplete: this.endCrop,
				showMask: false,
				variable: this.variable
			}
		);
		
        this.dataDiv= new Element("div",{
            "class":this.options.style+"main","id":this.imageID+"_main"
        }
        ).injectInside(this.cropp.wrapper);
        this.labelName = new Element ("label",{
            "class":"name_label"
        }
        );
        this.dataDiv.appendChild(this.labelName);
        this.labelName.innerHTML=this.textVariables.nameText;
        this.tagName= new Element ("input",{
            "type":"text","id":this.imageID+"_tagName","class":this.options.style+"tagName"
        }
        );
        this.dataDiv.appendChild(this.tagName);
		
        if(this.options.description==true){

            this.labelDescr= new Element("label",{
                "class":"description_label"
            }
            );
            this.dataDiv.appendChild(this.labelDescr);
            this.labelDescr.innerHTML=this.textVariables.descriptionText;
            this.tagDescript= new Element("textarea",{
                "class":this.options.style+"tagDescription","id":this.imageID+"_tagDescription"
            }
            );
            this.dataDiv.appendChild(this.tagDescript);
        }

        this.okButton= new Element("input",{
            "type":"button","id":this.imageID+"_tagButOk","class":this.options.style+"butOK"
        }
        );
        this.dataDiv.appendChild(this.okButton);
        this.okButton.value=this.textVariables.okButton;
        if(this.options.description==true)eval('this.okButton.onclick=function(){'+this.variable+'.choiceComplete('+this.variable+'.tagName.value,'+this.variable+'.tagDescript.value);}');
        else eval('this.okButton.onclick=function(){'+this.variable+'.choiceComplete('+this.variable+'.tagName.value,\'\');}');
        this.cancelButton= new Element("input",{
            "type":"button","id":this.imageID+"_tagButCancel","class":this.options.style+"butCancel"
        }
        );
        this.dataDiv.appendChild(this.cancelButton);
        this.cancelButton.value=this.textVariables.cancelButton;
        eval('this.cancelButton.onclick=function(){'+this.variable+'.removeCrop();}');

    }
	
    ,choiceComplete:function(tagname,description){

        if(tagname!=""){
			// $$$ hugh - added onSuccess
			// if onSuccess is specified, let them handle return value, don't auto update div
			// so use Ajax.Request instead of Updater
			// Also added escape() on strings, in case of url-unsafe characters
			
			if (this.options.ajaxOnSuccess) {
				var myAjax = new Ajax(
					this.options.ajaxRequestURL + "?action=addNew&variable="+this.variable+"&imageId="+this.imageNo+"&x1="+this.X1+"&x2="+this.X2+"&y1="+this.Y1+"&y2="+this.Y2+"&name="+escape(tagname)+"&description="+escape(description),
					{
						method: 'get',
						onSuccess:this.options.ajaxOnSuccess,
						onRequest:this.options.ajaxOnLoading
					}
				).request();
			}
			else {
				var myAjax = new Ajax(
					this.options.ajaxReturnID,this.options.ajaxRequestURL + "?action=addNew&variable="+this.variable+"&imageId="+this.imageNo+"&x1="+this.X1+"&x2="+this.X2+"&y1="+this.Y1+"&y2="+this.Y2+"&name="+escape(tagname)+"&description="+escape(description),
					{
						methodChooser: 'get'
					}
				).request();

			}
			
            this.removeCrop();
            //this.setStyle({'display':'none'});;
        }


    },removeCrop:function(){

        if( this.cropp!=null){
			eval(this.variable).dataDiv.style.display='none';
            this.image.parentNode.appendChild(this.dataDiv);
            //this.cropp.remove();
            //this.cropp.setStyle({'display':'none'});;
			this.cropp.removeOverlay();
            this.cropp=null;
        }
    }
    ,startCrop:function(){

        eval(this.options.variable).dataDiv.style.display='none';

    }
	,endCrop: function(imageArray, croparea, bounds, handle) {
		var variable = this.options.variable;
		eval(variable).X1 = croparea.left;
        eval(variable).Y1 = croparea.top;
        eval(variable).X2 = croparea.right;
        eval(variable).Y2 = croparea.bottom;
        eval(variable).dataDiv.style.display='block';
        var ow=eval(variable).dataDiv.offsetWidth;
        var oh=eval(variable).dataDiv.offsetHeight;
        var minleft=eval(variable).X1-ow;
        var maxright=parseInt(eval(variable).X2)+parseInt(ow);
        var mintop=eval(variable).Y1-oh;
        var width=$(eval(variable).imageID).offsetWidth;
        var height=$(eval(variable).imageID).offsetHeight;
        if(minleft<0&&maxright>width){

            var left=eval(variable).X1;
            var top=eval(variable).Y2;

        }
        else if(maxright>width){

            var left=minleft;
            var top=eval(variable).Y1;

        }
        else{

            var left=eval(variable).X2;
            var top=eval(variable).Y1;
        }

        eval(variable).dataDiv.style.top=top+'px';
        eval(variable).dataDiv.style.left=left+'px';
	}

    ,deltag:function(id){

        this.hideTag();
        new Ajax.Updater(this.options.ajaxReturnID,this.options.ajaxRequestURL,{
            parameters:"action=delete&tagId="+id+"&variable="+this.variable+"&imageId="+this.imageNo
        }
        );

    }
    ,showTag:function(c,description){

        if( this.cropp != null || this.show == 1 )return;
        this.show=1;
        var width=0,height=0,top=0,left=0;
        this.grayDiv=new Element("div",{
            "class":this.options.style+"grayDiv"
        }
        );
        this.image.parentNode.appendChild(this.grayDiv);
        width=this.image.offsetWidth;
        height=this.image.offsetHeight;
        top=this.image.offsetTop;
        left=this.image.offsetLeft;
        this.grayDiv.style.width=width+"px";
        this.grayDiv.style.height=height+"px";
        this.grayDiv.style.top = top + "px";
		if( this.isIE6 )
	        this.grayDiv.style.left = "0px";
		else if( this.isIE7 )
	        this.grayDiv.style.left = left - parseInt(20) + "px";
		else
	        this.grayDiv.style.left=left+"px";
		this.grayDiv.style.zIndex = 9997;
        this.showDiv = new Element("div",{
            "class":this.options.style+"showDiv"
        }
        );
        this.image.parentNode.appendChild(this.showDiv);
        this.showDiv.style.background="transparent url("+this.image.src+") no-repeat scroll -"+c.X1+"px -"+c.Y1+"px";
		// $$$ hugh - calculate parent offsets
		
		var obj = this.image;
		var left_offset = obj.offsetLeft;
		var top_offset = obj.offsetTop;
		while ((obj = obj.offsetParent) != null && (obj.style.position == '' || obj.style.position == 'static'))
		{
			left_offset += obj.offsetLeft;
			top_offset += obj.offsetTop;
			console.log('top_offset: ' + top_offset + ' left_offset: ' + left_offset);
		}
		
		if( this.isIE6 )
			this.showDiv.style.left=parseInt(c.X1)-parseInt(1) +"px";
		else if( this.isIE7 )
			this.showDiv.style.left=parseInt( left ) + parseInt(c.X1)-parseInt(20) +"px";
		else
			this.showDiv.style.left=left + parseInt(c.X1)-parseInt(1) +"px";
		this.showDiv.style.top=top + parseInt(c.Y1)-parseInt(1)+"px";
		this.showDiv.style.zIndex = 9998;
		// $$$ end hugh
        this.showDiv.style.width=parseInt(c.X2)-parseInt(c.X1)+"px";
        this.showDiv.style.height=parseInt(c.Y2)-parseInt(c.Y1)+"px";
        if(this.options.description==true){

            this.descriptionDiv= new Element("div",{
                "class":this.options.style+"descriptionDiv"
            }
            );
            this.image.parentNode.appendChild(this.descriptionDiv);
            this.descriptionDiv.innerHTML=description;
			// $$$ hugh
			if( this.isIE6 )
	            this.descriptionDiv.style.left=c.X1+"px";
			else if( this.isIE7 )
	            this.descriptionDiv.style.left=parseInt(left)+parseInt(c.X1) - 20 +"px";
	  		else
	            this.descriptionDiv.style.left=parseInt(left)+parseInt(c.X1)+"px";

            this.descriptionDiv.style.top=top+parseInt(c.Y2)+parseInt(3)+"px";
			this.descriptionDiv.style.zIndex = 9999;
			// $$$ end hugh
            if(description=="")this.descriptionDiv.style.display='none';
        }


    }
    ,hideTag:function(){
        if(this.cropp!=null||this.show==0)return;
        this.grayDiv.parentNode.removeChild(this.grayDiv);
        this.showDiv.parentNode.removeChild(this.showDiv);
        if(this.options.description==true&&this.descriptionDiv)this.descriptionDiv.parentNode.removeChild(this.descriptionDiv);
        this.show=0;

    }
    ,parseText:function(text){		text = text.replace(/%/gi, "%25");
		text = text.replace(/ /gi, "%20");
		text = text.replace(/!/gi, "%21");
		text = text.replace(/\"/gi, "%22");
		text = text.replace(/#/gi, "%23");
		text = text.replace(/\$/gi, "%24");
		text = text.replace(/&/gi, "%26");
		text = text.replace(/\'/gi, "%27");
		text = text.replace(/\(/gi, "%28");
		text = text.replace(/\)/gi, "%29");
		text = text.replace(/\*/gi, "%2a");
		text = text.replace(/\+/gi, "%2b");
		text = text.replace(/\,/gi, "%2c");
		text = text.replace(/-/gi, "%2d");
		text = text.replace(/\./gi, "%2e");
		text = text.replace(/\//gi, "%2f");
		text = text.replace(/:/gi, "%3a");
		text = text.replace(/;/gi, "%3b");
		text = text.replace(/</gi, "%3c");
		text = text.replace(/=/gi, "%3d");
		text = text.replace(/>/gi, "%3e");
		text = text.replace(/\?/gi, "%3f");
		text = text.replace(/@/gi, "%40");
		text = text.replace(/\[/gi, "%5b");
		text = text.replace(/\\/gi, "%5c");
		text = text.replace(/\]/gi, "%5d");
		text = text.replace(/\^/gi, "%5e");
		text = text.replace(/_/gi, "%5f");
		text = text.replace(/`/gi, "%60");
		text = text.replace(/\{/gi, "%7b");
		text = text.replace(/\|/gi, "%7c");
		text = text.replace(/\}/gi, "%7d");
		text = text.replace(/~/gi, "%7e");
		return text;    }

}
);


/* END */