cpMenuMarker = function(name,target){
	this.name=name;
	this.target=document.getElementById(target).getElementsByTagName('area');
	this.parent=document.getElementById(target).parentNode;
	this.interval=null;
	this.timeout=null;
	this.status='null';
	this.left=0;
	this.top=1;
	this.width=0;
	this.click=null;

	this.move=function(e){
		if(e==undefined) e=event;
		if(e.target) obj=e.target; else obj=e.srcElement;
		this.status='move';
		clearTimeout(this.timeout);
		clearInterval(this.interval);
		this.targetURL=obj.href;
		var self=this;
		if (document.addEventListener) {
			if(self.click!=null) {
				this.div.removeEventListener("click", self.click, true);
				self.click=null;
			}
			this.div.addEventListener("click", self.click=function(e) { location.href=self.targetURL; }, true);
		}
		else {
			if(self.click!=null) {
				this.div.detachEvent("onclick", self.click, true);
				self.click=null;
			}
			this.div.attachEvent("onclick", self.click=function(e) { location.href=self.targetURL; }, true);
		}
		this.interval=setInterval("cpMenuMarkerItem['"+this.name+"'].moveTo("+obj.coords+");",30);
	}

	this.init=function(){
		this.div=document.createElement("div");
		this.div.style.position='absolute';
		this.div.style.display='block';
		this.div.style.top=this.top+'px';
		this.div.style.width=this.width+'px';
		this.div.style.left=this.left+'px';
		this.div.style.height='33px';
		this.div.style.background='#ffffff';
		this.div.style.KHTMLOpacity = this.div.style.MozOpacity = this.div.style.opacity = 0.2;
		this.div.style.filter = "alpha(opacity:20)";
		this.div.style.cursor = "pointer";
		this.parent.appendChild(this.div);
		var self=this;
		for(var i=0;i<this.target.length;i++) {
			var self=this;
			if (document.addEventListener) {
				this.div.addEventListener("mouseover", function(e) { self.status='hover'; }, true);
				this.target[i].addEventListener("mouseover", function(e) { self.move(e); }, true);
				this.parent.addEventListener("mouseout", function(e) { self.status='remove'; self.timeout=setTimeout("cpMenuMarkerItem['"+self.name+"'].remove();",1000); }, true);
			}
			else {
				this.div.attachEvent("onmouseover", function(e) { self.status='hover'; }, true);
				this.target[i].attachEvent("onmouseover", function(e) { self.move(e); }, true);
				this.parent.attachEvent("onmouseout", function(e) { self.status='remove'; self.timeout=setTimeout("cpMenuMarkerItem['"+self.name+"'].remove();",1000); }, true);
			}
		}
	}

	this.remove=function(){
		if(this.status=='remove') {
			clearInterval(this.interval);
			this.interval=setInterval("cpMenuMarkerItem['"+this.name+"'].moveTo(0,0,0,0);",20);
		}
	}

	this.moveTo=function(x,y,x2,y2){
		this.left=(this.left*0.8 + x*0.2);
		this.width=(this.width*0.8 + (x2-x)*0.2);
		if( Math.abs(this.left-x)<3 && Math.abs(this.width-(x2-x))<3 ) {
			this.left=x;
			this.width=(x2-x);
			clearInterval(this.interval);
		}
		this.div.style.left=this.left+'px';
		this.div.style.width=this.width+'px';
	}

	this.init();
}


var cpMenuMarkerItem=Array();

function addcpMenuMarker(id,target){
	if(cpMenuMarkerItem[id]==null) {
		cpMenuMarkerItem[id]=new cpMenuMarker(id,target);
	}
}