var contextbox={
	"config": {
		"baseUrl": "/wp-content/themes/bequadrat",
		"imagesPath": "images",
		"dataUrl": "contextbox-content.json"
	},	
	"init": function() {
		this.box=new Element("div",{id:"contextbox"}).inject($$("body")[0],"bottom");
		this.box.setStyle("top",$$("#menu-primare-navigation a")[0].getPosition().y-this.box.getSize().y);
		boxContent=new Element("div",{id: "contextbox-content"}).inject(this.box,"top");
		boxHeadline=new Element("h3",{id: "contextbox-headline"}).inject(boxContent,"top");
		boxText=new Element("p",{id: "contextbox-text"}).inject(boxContent,"bottom");
		new Element("div",{id: "contextbox-arrow"}).inject(this.box,"bottom");
		this.fx=new Fx.Morph(this.box,{ duration: "short" }).set({ "opacity": 0});
		this.box.addEvent("mouseover",contextbox.boxover);
		this.box.addEvent("mouseout",contextbox.mouseout);
		new Request.JSON({
			"url": contextbox.config.baseUrl+"/"+contextbox.config.dataUrl,
			"secure": false,
			"onSuccess": function(r) {
				contextbox.data=r.contextboxes;
				$$("#menu-primare-navigation a").each(function(el) {
					el.addEvent("mouseover",contextbox.mouseover);
					el.addEvent("mouseout",contextbox.mouseout);
				});
			}
		}).send();
		
	},
	"mouseover": function(e) {
		el=e.target;
		if(contextbox.isVisible) return;
		else contextbox.isVisible=true;
		contextbox.box.setStyle("left",el.getPosition().x+(el.getSize().x/2)-(contextbox.box.getSize().x/2));
		for(i=0;i<contextbox.data.length;i++) {
			currentContent=contextbox.data[i];
			if(el.href.indexOf(currentContent.target)>-1) {
				$("contextbox-headline").setStyle("background-image","url("+contextbox.config.baseUrl+"/"+contextbox.config.imagesPath+"/"+currentContent.image+")");
				$("contextbox-headline").set("html",currentContent.headline);
				$("contextbox-text").set("html",currentContent.text);
				break;
			}
		}
		contextbox.fx.cancel().start({
			"margin-top": [10,0],
			"height": [253,263],
			"opacity": [0,1]
		});
	},
	"mouseout": function() {
		contextbox.isVisible=false;
		contextbox.fx.cancel().start({
			"margin-top": [0,15],
			"height": [263,253],
			"opacity": 0
		});
	},
	"boxover": function() {
		contextbox.fx.cancel().start({
			"margin-top": 0,
			"height": 263,
			"opacity": 1
		});
	},
	"box": null,
	"fx": null,
	"isVisible": false,
	"fxRunnung": false,
	"data": null
	
}

window.addEvent("domready",function() {
	contextbox.init();
});