intSize = 20;
intBorder = 3;
intCWidth = intSize;
intCHeight = intSize;
		
function jsTagInit(strName,funcClick,intW,intH)
{
	if ($(strName).length > 0 )
	{
		//alert(strName);
		$(strName).each (
			function(i)
			{
				var objOffset = $(this).offset();
				//alert($(this).children('div.cssImg').children('img').length);
				//var aryImg = $(this).children('div.cssImg');
				//alert(aryImg.html());
				//var objImg = aryImg.children('img');
				objImg = $(this).children('div.cssImg').children('img');
						
				$(this).children('div.cssImg').css('margin-top',0);
				$(this).children('div.cssImg').css('margin-left',0);
				$(this).children('div.cssImg').css('padding-top',0);
				$(this).children('div.cssImg').css('padding-left',0);
				//$(this).children('div.cssImg').css('position','absolute');
				//$(this).children('div.cssImg').css('z-index','0');
				
				/*		
				$(this).append("<div class=\"cssOver\"></div>");
				$(this).children('div.cssOver').css('margin-top',0);
				$(this).children('div.cssOver').css('margin-left',0);
				$(this).children('div.cssOver').css('padding-top',0);
				$(this).children('div.cssOver').css('padding-left',0);
				$(this).children('div.cssOver').css('position','absolute');
				$(this).children('div.cssOver').css('z-index','3');
				//$(this).children('div.cssOver').css('background','#ffffff');
				//alert(objImg.height());
				$(this).children('div.cssOver').css('width',objImg.width());
				$(this).children('div.cssOver').css('height',objImg.height());
				*/
				//alert(objImg.width()+" "+objImg.height());
				//alert($(this).children('div.cssOver').html());
				//alert(objOffset.top+" "+objOffset.left);
				//alert(objOffset.top);
				$(this).attr('xxtop' , objOffset.top);
				$(this).attr('xxleft', objOffset.left );
				//alert(objOffset.left);
				$(this).attr('xxw',objImg.width());
				$(this).attr('xxh',objImg.height());
				$(this).click(
					function(e)
					{
					
						objMainFrame = $(this);//.parent();
								
						if (objMainFrame.children('div.cssNew').length == 0 )
						{
							strHtml = "<div class='cssNew'></div>";
							objMainFrame.append(strHtml);
						}
						
						this.offsetLeft;
						
						objMainFrame.attr('bw',intCWidth);
						objMainFrame.attr('bh',intCHeight);
						objXY = objMainFrame.offset();
						//alert(objXY.top);
						//alert(e.pageX+" "+e.pageY);		
						jsTagChange(objMainFrame,e.pageX,e.pageY,intCWidth,intCHeight);	
						//alert(e.clientX+" "+(e.clientY));
						funcClick(e.pageX,e.pageY);// - objXY.top);						
					}
				);
						
				$(this).mouseover(
					function()
					{
						$(this).css('cursor','crosshair');
					}
				);
			}	
		)
	}
}

		
function jsTagChange(objItem,intPosX,intPosY,intWidth,intHeight)
{

	var intImgW = objItem.attr('xxw');
	var intImgH = objItem.attr('xxh');
	var intX = ( intPosX - parseInt(objItem.attr('xxleft')) );
	var intY = 0;//( intPosY - parseInt(objItem.attr('xxtop'))  );
	var intY =  intPosY - parseInt(objItem.attr('xxtop')) ;						
	//alert(intPosX+" "+intPosY+" "+intX+" "+intY+" "+objItem.attr('xxtop'));
	
	//alert(intPosY+" "+parseInt(objItem.attr('xxtop')));							
	var intTotalW = 0;
	var intTotalH = 0;			
	var intBY = 0 ;
	var intBX = 0 ;
	
	if ($.browser.msie)
	{
		if ($.browser.version == "6.0")
		{
			if (intX - intWidth < 0)
			{
				intTotalW = intX;
				intBX = 0;//objItem.attr('xxleft');
			}
			else
			{
				intBX = intX - intWidth;
				intTotalW = (intWidth);
			}	
			//intBX = intX;
			//alert(intTotalW);
			
			//alert(intImgW - intX);					
			if (intImgW - intX > intWidth )
			{
				intTotalW += intWidth ;
			}
			else
			{
				intTotalW += ((intImgW - intX > 0)? intImgW - intX : 0) ;
			}
			//alert(intTotalW);			
										
			if (intY - intHeight < 0)
			{
				intTotalH = intY;
				intBY = 0;//objItem.attr('xxtop');
			}
			else
			{
				intBY = intY - intHeight;
				intTotalH = intHeight;
			}
			//intBY = intY;
			//alert(intBX+" "+intBY);							
			
			if (intImgH - intY > intHeight )
			{
				intTotalH += intHeight ;
			}
			else
			{
				intTotalH += ((intImgH - intY > 0)? intImgH - intY : 0) ;
			}
			
			intBX += parseInt(objItem.attr('xxleft'));
			intBY += parseInt(objItem.attr('xxtop'));
		}
		else
		{
			if (intX - intWidth < 0)
			{
				intTotalW = intX;
				intBX = 0;//objItem.attr('xxleft');
			}
			else
			{
				intBX = intX - intWidth;
				intTotalW = (intWidth);
			}	
			//intBX = intX;
			//alert(intTotalW);
			
			//alert(intImgW - intX);					
			if (intImgW - intX > intWidth )
			{
				intTotalW += intWidth ;
			}
			else
			{
				intTotalW += ((intImgW - intX > 0)? intImgW - intX : 0) ;
			}
			//alert(intTotalW);			
										
			if (intY - intHeight < 0)
			{
				intTotalH = intY;
				intBY = 0;//objItem.attr('xxtop');
			}
			else
			{
				intBY = intY - intHeight;
				intTotalH = intHeight;
			}
			//intBY = intY;
			//alert(intBX+" "+intBY);							
			
			if (intImgH - intY > intHeight )
			{
				intTotalH += intHeight ;
			}
			else
			{
				intTotalH += ((intImgH - intY > 0)? intImgH - intY : 0) ;
			}
		}
		
	}
	else
	{
		if (intX - intWidth < 0)
		{
			intTotalW = intX;
			intBX = objItem.attr('xxleft');
		}
		else
		{
			intBX = intPosX - intWidth;
			intTotalW = (intWidth);
		}	
		//alert(intTotalW);	
		//alert(intImgW - intX);
		//alert(intImgW );			
		if (intImgW - intX > intWidth )
		{
			intTotalW += intWidth ;
		}
		else
		{
			intTotalW += ((intImgW - intX > 0)? intImgW - intX : 0) ;
		}
		//alert(intTotalW);				
									
		if (intY - intHeight < 0)
		{
			intTotalH = intY;
			intBY = objItem.attr('xxtop');
		}
		else
		{
			intBY = intPosY - intHeight;
			intTotalH = intHeight;
		}
		//alert(intBX+" "+intBY);							
		if (intImgH - intY > intHeight )
		{
			intTotalH += intHeight ;
		}
		else
		{
			intTotalH += ((intImgH - intY > 0)? intImgH - intY : 0) ;
		}	
	}	
	//alert(intBX+" "+intBY);
	
	if (!$.browser.msie)
	{						
		intTotalW = ((intTotalW - intBorder * 2 < 0 )? intBorder * 2 - intTotalW : intTotalW - intBorder * 2);
		intTotalH = ((intTotalH - intBorder * 2 < 0 )? intBorder * 2 - intTotalH : intTotalH - intBorder * 2);
	}
	
	//alert(intTotalW+" "+intTotalH);																					
	objNewItem = objItem.children('div.cssNew');
	//alert(intTotalW);
	objNewItem.css('width',intTotalW);
	objNewItem.css('height',intTotalH);
	objNewItem.css('top',intBY );
	objNewItem.css('left',intBX );
	
	//objNewItem.css('top',intY );
	//objNewItem.css('left',intBX );
	objNewItem.css('border-style','solid');
	objNewItem.css('border-width',intBorder);
	objNewItem.css('border-color','#000000');
	//objNewItem.css('background','#cccccc');	
	objNewItem.css('position','absolute');
	objNewItem.css('z-index','2');
	objNewItem.css('padding','0');
	objNewItem.css('margin','0');
						
	objItem.attr('ccX',intX);
	objItem.attr('ccY',intY);
	objItem.attr('ccH',intTotalH);
	objItem.attr('ccW',intTotalW);
	
	
}

function jsTagUpdate(strName,intW,intH)
{
	intPX = parseInt($(strName).attr('xxleft')) + parseInt( $(strName).attr('ccX') );
	intPY = parseInt( $(strName).attr('xxtop') ) +  parseInt( $(strName).attr('ccY') );
	
	$(strName).attr('bw',intW);
	$(strName).attr('bh',intH);
	
	jsTagChange($(strName),intPX,intPY,intW,intH);
}

function jsTagRemove(strName)
{
	if ($('strName').children('div.cssNew').length > 0 )
	{
		$('strName').children('div.cssNew').remove();
	}
}

function jsTagInfo(strName)
{
	objItem = $(strName);
	
	var objInfo = {
		x: objItem.attr('ccX'),
		y: objItem.attr('ccY'),
		w: objItem.attr('ccH'),
		h: objItem.attr('ccW'),
		bw: objItem.attr('bw'),
		bh:	objItem.attr('bh')
	};
	
	return objInfo;
}