Event.addEvent(window, "load", ArticleHover);

function ArticleHover(){
	var articles = Document.getElementsByClassName("JS:ArticleHover");
	articles.each(ArticleHover.set);
}
ArticleHover.set = function(element){
	Event.addEvent(element, "mouseover", ArticleHover.show);
}
ArticleHover.show = function(evt){
	var element = Event.getTarget(evt);
	Event.preventDefault(evt);
	if(element.tagName.toLowerCase() == "img"){
		element = element.parentNode;
	}
	var image = element.getElementsByTagName("img")[0];
	image.removeAttribute("alt");
	var mainDiv = ArticleHover.create(element);
	var hoverDiv = ArticleHover.setPosition(mainDiv, image);
	var fade = new Tween(mainDiv, "alpha", Regular.easeOut, Document.getOpacity(mainDiv), 80, 0.2);
}
ArticleHover.create = function(element){
	var bodyElement = document.getElementsByTagName("body")[0];
	var div = document.createElement("div");
	Event.addEvent(div, "selectstart", function(){ return false; });
	div.className = "article_hover";
	div.style.opacity = 0;
	div.style.filter = "alpha(opacity=0)";
	bodyElement.appendChild(div);
	var article_hover_title = document.createElement("p");
	article_hover_title.className = "article_hover_title";
	article_hover_title.innerHTML = element.title;
	div.appendChild(article_hover_title);
	var article_hover_description = document.createElement("p");
	article_hover_description.className = "article_hover_description";
	article_hover_description.innerHTML = element.rel;
	div.appendChild(article_hover_description);
	var article_hover_link = document.createElement("p");
	article_hover_link.className = "article_hover_link";
	article_hover_link.innerHTML = "click to read more";
	div.appendChild(article_hover_link);
	div.caller = element;
	return div;
}
ArticleHover.setPosition = function(div, image){
	div.style.left = Document.getX(image) + "px";
	div.style.top = Document.getY(image) + "px";
	div.style.width = image.offsetWidth + "px";
	div.style.height = image.offsetHeight + "px";
	var bodyElement = document.getElementsByTagName("body")[0];
	var hover = document.createElement("div");
	hover.className = "article_hover_trigger";
	bodyElement.appendChild(hover);
	hover.trigger = div;
	Event.addEvent(hover, "mouseout", ArticleHover.hide);
	Event.addEvent(hover, "click", ArticleHover.navigate);
	hover.style.left = Document.getX(div) + "px";
	hover.style.top = Document.getY(div) + "px";
	hover.style.width = div.offsetWidth + "px";
	hover.style.height = div.offsetHeight + "px";
	return hover;
}
ArticleHover.navigate = function(evt){
	var element = Event.getTarget(evt);
	var trigger = element.trigger;
	window.location = trigger.caller.href;
}
ArticleHover.hide = function(evt){
	var element = Event.getTarget(evt);
	var hoverDiv = element.trigger;
	Event.removeEvent(hoverDiv, "mouseout", ArticleHover.hide);
	var fadeOut = new Tween(hoverDiv, "alpha", Regular.easeOut, Document.getOpacity(hoverDiv), 0, 0.2);
	fadeOut.onMotionFinished = function(){
		ArticleHover.remove(element);
	}
}
ArticleHover.remove = function(element){
	var hoverDiv = element.trigger;
	hoverDiv.parentNode.removeChild(hoverDiv);
	element.parentNode.removeChild(element);
}