var ftag_x = 0;
var ftag_y = 0;
var ftag_width = 0;
var ftag_height = 0;
var tag_status = 0;

function startTagging(){
    callback_start_tagging();
    $('taginstruction').show();
    $('altname').value = '';
    CropImageManager.resetCropper();
    tag_status = 1;
}

function endTagging(){
	toggleCheckBoxes('friendform');
	$('altname').value = '';
    tag_status = 0;
    $('taginstruction').hide();
    CropImageManager.removeCropper();
    $('tagmenu').hide();
    callback_end_tagging();
}


function update_tag(transport){
	var response=transport.responseText;
    var jsonObj=eval("("+response+")");
	photo_tags = jsonObj.photo_tags;
	updatePhotoTags(1);
}



function submitTag(friend_name, friend_id){
	
    var data = $('main_photo').getDimensions();

    //if(friend_name)
    //	$('friendtag'+friend_id).checked = 0;
    var friend_name = $RF('friendform', 'friendradio');
	if(friend_name==null)
		friend_name='';
    var xratio = (ftag_x.toFixed(3) / data['width'].toFixed(3)) * 100;
    var yratio = (ftag_y.toFixed(3) / data['height'].toFixed(3)) * 100;
    var widthratio = (ftag_width.toFixed(3) / data['width'].toFixed(3)) * 100;
    var heightratio = (ftag_height.toFixed(3) / data['height'].toFixed(3)) * 100;
    //var altname = $('alt_name').value;
    var altname = $('altname').value;
    
    endTagging();
    //$('tagmenu').hide();
    
    //$('test').setStyle({'left': xratio+'%', 'top': yratio+'%', 'width': widthratio+'%', 'height': heightratio+'%'});
    
    var params = 'friend=' + escape(friend_name) + "&guid=" + main_photo_guid + "&xratio=" + xratio + "&yratio=" + yratio + "&widthratio=" + widthratio  + "&heightratio=" + heightratio + "&altname=" + escape(altname);
    
    var target_url;
    if(debug){
		target_url = "/ajax/photo/tag/";
	}else{
		target_url = location.protocol + '//' + location.host + "/ajax/photo/tag/";
	}
	
    new Ajax.Request( target_url,
        {
            method: "POST",
            parameters: params,
            onSuccess: update_tag
        }
    );
    

}

function $RF(el, radioGroup) {
    if($(el).type && $(el).type.toLowerCase() == 'radio') {
        var radioGroup = $(el).name;
        var el = $(el).form;
    } else if ($(el).tagName.toLowerCase() != 'form') {
        return false;
    }
 
    var checked = $(el).getInputs('radio', radioGroup).find(
        function(re) {return re.checked;}
    );
    return (checked) ? $F(checked) : null;
}

function toggleCheckBoxes(formName)   {
	var form=$(formName);
	var i=form.getElements('checkbox');
	i.each(function(item)
		{
			item.checked=false;
		}
	);
}


function onEndCrop( coords, dimensions ) {
    //$('tagmenu').setStyle({'left': coords.x1 + 'px', 'top': coords.y1 + 'px' });
    if(tag_status==1){
    	$('tagmenu').show();
    }
    ftag_x = coords.x1;
	ftag_y = coords.y1;
	ftag_width = dimensions.width;
	ftag_height = dimensions.height;
}

         /**
         * A little manager that allows us to swap the image dynamically
         * for the dynamic example
         *
         */
        var CropImageManager = {
            /**
             * Holds the current Cropper.Img object
             * @var obj
             */
            curCrop: null,
            
            /**
             * Initialises the cropImageManager
             *
             * @access public
             * @return void
             */
            init: function() {
                this.attachCropper();
            },
            
            /**
             * Handles the changing of the select to change the image, the option value
             * is a pipe seperated list of imgSrc|width|height
             * 
             * @access public
             * @param obj event
             * @return void
             */
            onChange: function( e ) {
                var vals = $F( Event.element( e ) ).split('|');
                this.setImage( vals[0], vals[1], vals[2] ); 
            },
            
            /**
             * Sets the image within the element & attaches/resets the image cropper
             *
             * @access private
             * @param string Source path of new image
             * @param int Width of new image in pixels
             * @param int Height of new image in pixels
             * @return void
             */
            setImage: function( imgSrc, w, h ) {
                $( 'testImage' ).src = imgSrc;
                $( 'testImage' ).width = w;
                $( 'testImage' ).height = h;
                this.attachCropper();
            },
            
            /** 
             * Attaches/resets the image cropper
             *
             * @access private
             * @return void
             */
            attachCropper: function() {
                if( this.curCrop == null ) this.curCrop = new Cropper.Img( 'main_photo', { minWidth: 50, minHeight: 50, onEndCrop: onEndCrop } );
                else this.curCrop.reset();
            },
            
            /**
             * Removes the cropper
             *
             * @access public
             * @return void
             */
            removeCropper: function() {
                if( this.curCrop != null ) {
                    this.curCrop.remove();
                }
            },
            
            /**
             * Resets the cropper, either re-setting or re-applying
             *
             * @access public
             * @return void
             */
            resetCropper: function() {
                this.attachCropper();
            }
        };