function setPhoto() {
	YAHOO.util.Event.addListener(document.getElementById('tagDrawPhoto'), 'click', initPhoto);
	YAHOO.util.Event.addListener(document.getElementById('tagBox_cancel'), 'click', hideTag);
	YAHOO.util.Event.addListener(document.getElementById('tagPhoto'), 'click', showTag);

}
function setTagBox() {
		
	//window.scrollTo(0,YAHOO.util.Dom.getY('photo'));
	
	var tagBox_tabsHeight = parseInt(YAHOO.util.Dom.getStyle('tagBox_tabs','height').replace('px',''))
	YAHOO.util.Dom.setX('tagBox',YAHOO.util.Dom.getXY('photo')[0]+10);
	YAHOO.util.Dom.setY('tagBox',YAHOO.util.Dom.getXY('photo')[1]+10);
	document.getElementById("tagBox").style.width = photo.width-20 + 'px';
	document.getElementById("tagBox").style.height = photo.height-20-tagBox_tabsHeight + 'px';
}

function showTag() {
	setTagBox();
	document.getElementById('tagBox').style.visibility = 'visible';	
}
function hideTag() {
	document.getElementById('tagBox').style.visibility = 'hidden';
}



function initPhoto() {
	if (isDrawing) {
		stopDrawing();
	} else {
		startDrawing();
	}
}

function startDrawing() {
	document.getElementById('tagDrawPhotoHint').style.display = 'block';
	document.getElementById('tagDrawPhoto').className='cancelDraw';
	
	
	photo.style.cursor = "crosshair";
	YAHOO.util.Event.addListener(photo, 'mousedown', YAHOO.example.DDApp.init);
	isDrawing=true;
	hideTag();
}
function stopDrawing() {
	document.getElementById('tagDrawPhotoHint').style.display = 'none';
	document.getElementById('tagDrawPhoto').className='startDraw';
	photo.style.cursor = "";
	YAHOO.util.Event.removeListener(photo, 'mousedown', YAHOO.example.DDApp.init);
	isDrawing=false;
	document.getElementById("panelDiv").style.display = 'none';
	hideTag();
}

var dd, dd2, dd3;	
YAHOO.example.DDApp = function() {

    return {
        init: function(e) {
			
			document.getElementById("panelDiv").style.display = 'block';
			document.getElementById('tagDrawPhotoHint').style.display = 'none';
				
			var startLeft = YAHOO.util.Event.getPageX(e) - YAHOO.util.Dom.getXY('photo')[0];
			var startTop = YAHOO.util.Event.getPageY(e) - YAHOO.util.Dom.getXY('photo')[1];
			var halfWidth = parseInt(YAHOO.util.Dom.getStyle('panelDiv','width').replace('px','')) / 2;
			var halfHeight = parseInt(YAHOO.util.Dom.getStyle('panelDiv','height').replace('px','')) / 2;

			startLeft = (startLeft > halfWidth)? startLeft - halfWidth : 0;
			startTop = (startTop > halfHeight)? startTop - halfHeight : 0;
			
			if (photo.width<startLeft+(2*halfWidth)) {
				startLeft = photo.width-(2*halfWidth);
				}
			if (photo.height<startTop+(2*halfHeight)) {
				startTop = photo.height-(2*halfHeight);
				}
			
			document.getElementById("panelDiv").style.left = startLeft + 'px';
			document.getElementById("panelDiv").style.top = startTop + 'px';
			
			setPos();
			
						
            dd = new YAHOO.example.DDResize("panelDiv", "handleDiv", "panelresize");
            dd2 = new YAHOO.util.DD("panelDiv", "paneldrag");
            dd2.addInvalidHandleId("handleDiv");
            
            dd2.addInvalidHandleType("input");
                        
            dd2.setXConstraint(startLeft,photo.width-startLeft-(2*halfWidth),0);
            dd2.setYConstraint(startTop,photo.height-startTop-(2*halfHeight),0);
			
			dd.onMouseUp = setPos;
			dd2.onMouseUp = setPos;
        }
    };
} ();
	
YAHOO.example.DDResize = function(panelElId, handleElId, sGroup, config) {
    if (panelElId) {
        this.init(panelElId, sGroup, config);
        this.handleElId = handleElId;
        this.setHandleElId(handleElId);
    }
};

YAHOO.example.DDResize.prototype = new YAHOO.util.DragDrop();
//YAHOO.extend(YAHOO.example.DDResize, YAHOO.util.DragDrop);

YAHOO.example.DDResize.prototype.onMouseDown = function(e) {
    var panel = this.getEl();
    this.startWidth = panel.offsetWidth;
    this.startHeight = panel.offsetHeight;

    this.startPos = [YAHOO.util.Event.getPageX(e),
                     YAHOO.util.Event.getPageY(e)];		
};

YAHOO.example.DDResize.prototype.onDrag = function(e) {
    var newPos = [YAHOO.util.Event.getPageX(e),
                  YAHOO.util.Event.getPageY(e)];

    var offsetX = newPos[0] - this.startPos[0];
    var offsetY = newPos[1] - this.startPos[1];
    
   
    var newWidth = Math.max(this.startWidth + offsetX, 10);
    var newHeight = Math.max(this.startHeight + offsetY, 10);

    var panel = this.getEl();
    panel.style.width = newWidth + "px";
    panel.style.height = newHeight + "px";
    
	setConstraints();	
};

function setConstraints() {


	// reset constraints    
	var posLeft = YAHOO.util.Dom.getXY('panelDiv')[0] - YAHOO.util.Dom.getXY('photo')[0];
	var posTop = YAHOO.util.Dom.getXY('panelDiv')[1] - YAHOO.util.Dom.getXY('photo')[1];
	var halfWidth = parseInt(YAHOO.util.Dom.getStyle('panelDiv','width').replace('px','')) / 2;
	var halfHeight = parseInt(YAHOO.util.Dom.getStyle('panelDiv','height').replace('px','')) / 2;


    dd2.resetConstraints();
        
    dd2.setXConstraint(posLeft,photo.width-posLeft-(halfWidth*2),0);
    dd2.setYConstraint(posTop,photo.height-posTop-(halfHeight*2),0);
    

}

function setPos() {
	if (!isDrawing) { return; }
	
	var posLeft = parseInt(YAHOO.util.Dom.getStyle('panelDiv','left').replace('px',''));
	var posTop = parseInt(YAHOO.util.Dom.getStyle('panelDiv','top').replace('px',''));
	var posWidth = parseInt(YAHOO.util.Dom.getStyle('panelDiv','width').replace('px',''));
	var posHeight = parseInt(YAHOO.util.Dom.getStyle('panelDiv','height').replace('px',''));  
	
	var percentLeft = Math.floor(posLeft / photo.width * 100);
	var percentTop = Math.floor(posTop / photo.height * 100);
	var percentWidth = Math.floor(posWidth / photo.width * 100);
	var percentHeight = Math.floor(posHeight / photo.height * 100);
	
	if (percentLeft > 100) { percentLeft = 100; }
	if (percentLeft < 0) { percentLeft = 0; }
	if (percentTop > 100) { percentTop = 100; }
	if (percentTop < 0) { percentTop = 0; }
	
	if (percentLeft + percentWidth > 100) {
		percentWidth = 100 - percentLeft;
		}
	if (percentTop + percentHeight > 100) {
		percentHeight = 100 - percentTop;
		}	
	
	hdnLeft.value = percentLeft;
    hdnTop.value = percentTop;
    hdnWidth.value = percentWidth;
    hdnHeight.value = percentHeight;
}

function setTagTab(tab) {
	if (tab=='text') {
		document.getElementById('tagbox_text').style.display = 'block';
		document.getElementById('tagbox_friends').style.display = 'none';
		document.getElementById('tagbox_events').style.display = 'none';
		
		document.getElementById('tagFriends').className =  document.getElementById('tagFriends').className.replace(' active','');
		document.getElementById('tagEvents').className =  document.getElementById('tagEvents').className.replace(' active','');
		document.getElementById('tagText').className += ' active';
		
		txtTag.focus();
	}
	if (tab=='friends') {
		document.getElementById('tagbox_text').style.display = 'none';
		document.getElementById('tagbox_friends').style.display = 'block';
		document.getElementById('tagbox_events').style.display = 'none';
		
		document.getElementById('tagText').className =  document.getElementById('tagText').className.replace(' active','');
		document.getElementById('tagEvents').className =  document.getElementById('tagEvents').className.replace(' active','');
		document.getElementById('tagFriends').className += ' active';
	}
	if (tab=='events') {
		document.getElementById('tagbox_text').style.display = 'none';
		document.getElementById('tagbox_friends').style.display = 'none';
		document.getElementById('tagbox_events').style.display = 'block';
				
		document.getElementById('tagText').className =  document.getElementById('tagText').className.replace(' active','');
		document.getElementById('tagFriends').className =  document.getElementById('tagFriends').className.replace(' active','');
		document.getElementById('tagEvents').className += ' active';
	}
}