/*
---
script: ShapeHover.js

description: Add rollover effect on an image map

license: MIT-style license.

authors: Yannick Croissant

inspiration:
	Inspired by [jQuery Maphilight](http://davidlynch.org/js/maphilight/docs/) Copyright (c) 2008 [David Lynch](http://davidlynch.org), [MIT License](http://opensource.org/licenses/mit-license.php)

requires:
 core/1.2.3: '*'
 more/1.2.3.1: [Assets]

provides: [ShapeHover]

...
*/
var ShapeHover=new Class({Implements:[Options,Events],options:{fill:{type:"color",content:"#000",opacity:0.5},stroke:{color:"#F00",opacity:1,width:1},fade:true,alwaysOn:false,onReady:$empty,onMouseOver:$empty,onMouseOut:$empty,onClick:$empty},initialize:function(c,a){this.element=document.id(c);this.map=document.getElement('map[name="'+this.element.get("usemap").split("#")[1]+'"]');this.setOptions(a);this.type=document.createElement("canvas")&&document.createElement("canvas").getContext?"canvas":(document.namespaces?"vml":false);if(!this.type||!this.map){return false}if(this.type=="vml"){document.createStyleSheet().addRule("v\\:shape","display:inline-block");document.namespaces.add("v","urn:schemas-microsoft-com:vml","#default#VML")}if(this.options.fill.type!="image"){return this.ready()}if(this.type=="canvas"){this.fillContent=new Asset.image(this.options.fill.content,{onload:this.ready.bind(this)})}else{var b=new Element("div",{styles:{position:"absolute",left:"-9999em"}});b.inject(this.element,"after");b.innerHTML='<v:rect><v:fill type="tile" src="'+this.options.fill.content+'" /></v:rect>';this.ready()}},ready:function(){this.wrap=new Element("div",{styles:{background:"url("+this.element.get("src")+")",height:this.element.getSize().y,position:"relative",width:this.element.getSize().x}}).inject(this.element,"before");this.element.style.opacity=0;if(Browser.Engine.trident){this.element.style.filter="Alpha(opacity=0)"}this.element.setStyles({position:"absolute",left:0,top:0,padding:0,border:0});this.wrap.adopt(this.element);this.canvas=this.createCanvas().set({styles:{border:0,left:0,padding:0,position:"absolute",top:0},width:this.element.getSize().x,height:this.element.getSize().y});if(this.options.alwaysOn){this.map.getElements("area[coords]").forEach(function(b){var a=this.shapeFromArea(b);this.addShapeTo(a[0],a[1])}.bind(this))}else{this.map.getElements("area[coords]").addEvent("mouseover",function(b){var a=this.shapeFromArea(b.target);this.addShapeTo(a[0],a[1]);this.fireEvent("onMouseOver",b)}.bind(this)).addEvent("mouseout",function(a){this.clearCanvas();this.fireEvent("onMouseOut",a)}.bind(this)).addEvent("click",function(a){this.fireEvent("onClick",a)}.bind(this))}this.canvas.inject(this.element,"before");this.fireEvent("onReady")},createCanvas:function(){if(this.type=="canvas"){var a=new Element("canvas",{styles:{width:this.element.getSize().x+"px",height:this.element.getSize().y+"px"}});a.getContext("2d").clearRect(0,0,a.width,a.height);if(this.options.fade){a.set({tween:{duration:"short"}})}return a}return new Element("var",{styles:{display:"block",height:this.element.getSize().y+"px",overflow:"hidden",width:this.element.getSize().x+"px",zoom:1}})},addShapeTo:function(g,k){if(this.type=="canvas"){if(this.options.fade){this.canvas.set("opacity",0)}var a=this.canvas.getContext("2d");a.beginPath();if(g=="rect"){a.rect(k[0],k[1],k[2]-k[0],k[3]-k[1])}else{if(g=="circ"){a.arc(k[0],k[1],k[2],0,Math.PI*2,false)}else{if(g=="poly"){a.moveTo(k[0],k[1]);for(var c=2,m=k.length;c<m;c+=2){a.lineTo(k[c],k[c+1])}}}}a.closePath();if(this.options.fill){if(this.options.fill.type=="image"){var h=a.createPattern(this.fillContent,"repeat");a.fillStyle=h}else{a.fillStyle="rgba("+this.options.fill.content.hexToRgb(true).join(",")+","+this.options.fill.opacity+")"}a.fill()}if(this.options.stroke){a.strokeStyle="rgba("+this.options.stroke.color.hexToRgb(true).join(",")+","+this.options.stroke.opacity+")";a.lineWidth=this.options.stroke.width;a.stroke()}if(this.options.fade){this.canvas.tween("opacity",1)}}else{var l=[],j=[];k.filter(function(i,e){if(e%2){j.push(i)}else{l.push(i)}}.bind(this));l=-1*l.min()/(l.max()-l.min());j=-1*j.min()/(j.max()-j.min());if(this.options.fill&&this.options.fill.type=="image"){var o='<v:fill type="tile" position="'+l+","+j+'" src="'+this.options.fill.content+'" />'}else{var o='<v:fill opacity="'+(this.options.fill?this.options.fill.opacity:0)+'" />'}var n=this.options.stroke?'strokeweight="'+this.options.stroke.width+'px" stroked="t" strokecolor="'+this.options.stroke.color+'"':'stroked="f"';var d='<v:stroke opacity="'+(this.options.stroke?this.options.stroke.opacity:0)+'"/>';if(g=="rect"){var f='<v:rect filled="t" '+n+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+k[0]+"px;top:"+k[1]+"px;width:"+(k[2]-k[0])+"px;height:"+(k[3]-k[1])+'px;">'+o+d+"</v:rect>"}else{if(g=="circ"){var f='<v:oval filled="t" '+n+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+(k[0]-k[2])+"px;top:"+(k[1]-k[2])+"px;width:"+(k[2]*2)+"px;height:"+(k[2]*2)+'px;">'+o+d+"</v:oval>"}else{if(g=="poly"){var f='<v:shape coordorigin="0,0" filled="t" '+n+' fillcolor="'+(this.options.fill?this.options.fill.content:"")+'" coordsize="'+this.canvas.width+","+this.canvas.height+'" path="m '+k[0]+","+k[1]+" l "+k.join(",")+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+this.canvas.width+"px;height:"+this.canvas.height+'px;">'+o+d+"</v:shape>"}}}var b=document.createElement("div");b.style.display="none";document.body.appendChild(b);b.innerHTML=f;f=b.childNodes[0];document.id(f).inject(this.canvas);document.id(b).destroy()}},clearCanvas:function(){if(this.type=="canvas"){this.canvas.getContext("2d").clearRect(0,0,this.canvas.width,this.canvas.height)}else{this.canvas.empty()}},shapeFromArea:function(a){return[a.get("shape").toLowerCase().substr(0,4),a.get("coords").split(",").map(function(b){return parseFloat(b)})]}});