/**
 * Misc navigational functionality.
 * 
 * @author Chris Lewis <chris@rosaloves.com> Thu May 17 23:17:10 EDT 2007
 * @version $Id: rosa.nav.js 238 2007-05-18 03:22:42Z burn $
 */

/*
 * Handle roll overs for _over style images.
 */
function rlImgRO(event) {
	var activeString = '_over';
	var e = Event.element(event);
	var p1 = '';
	var p2 = '';
	if(event.type == 'mouseover') {
		if(e.src.indexOf(activeString) >= 0) {
			return;
		}
		p1 = e.src.substring(0, e.src.lastIndexOf('.'));
		p2 = e.src.substring(e.src.lastIndexOf('.'));
		e.src = p1 + activeString + p2;
	} else if(event.type == 'mouseout') {
		if(e.src.indexOf(activeString) < 0) {
			return;
		}
		p1 = e.src.substring(0, e.src.indexOf(activeString));
		p2 = e.src.substring(e.src.indexOf(activeString) + activeString.length);
		e.src = p1 + p2;
	}
	//document.title=e.src;
}

//The active JS window.
var rlActiveJSWindow  = null;

//Show a JS window by id.
function rlShowJSWindow(win, srcEvent) {
	if($(win) == null) {
		//No such window.
		return;
	} else {
		//Hack to mostly correct the 'scroll bar bleed through' bug that
		//seems to only happen on Firefox OS X.
		var ps = $('postsSummary');
		if(ps) ps.style.overflow = 'hidden';
		$('windowCanvas').style.display = 'block';
		$('rosaTagNoDrop').style.display = 'block';
		rlActiveJSWindow = $(win);
		new Effect.Appear(rlActiveJSWindow, { duration: 0.3 });
		Event.stop(srcEvent); //cancel the link
	}
}

//Hide the active JS window.
function rlHideActiveJSWindow() {
	new Effect.Fade(rlActiveJSWindow, { duration: 0.3 });
	$('windowCanvas').style.display = 'none';
	$('rosaTagNoDrop').style.display = 'none';
	var ps = $('postsSummary');
	if(ps) ps.style.overflow = 'auto';
}

/* The active (visible) bubble. */
var rlActiveBubble = null;
var rlActiveBubblePersist = false;

/*
 * Thanks for findPos[X,Y] to: 
 * Peter-Paul Koch: http://www.quirksmode.org/js/findpos.html
 * Alex Tingle: http://blog.firetree.net/2005/07/04/javascript-find-position
 */
function findPosX(obj) {
	var curleft = 0;
	if(obj.offsetParent) {
		while(1) {
			curleft += obj.offsetLeft;
			if(!obj.offsetParent)
			break;
			obj = obj.offsetParent;
		}
	} else if(obj.x) {
		curleft += obj.x;
	}
	return curleft;
}

function findPosY(obj) {
	var curtop = 0;
	if(obj.offsetParent) {
		while(1) {
			curtop += obj.offsetTop;
			if(!obj.offsetParent)
			break;
			obj = obj.offsetParent;
		}
	} else if(obj.y) {
		curtop += obj.y;
	}
	return curtop;
}

/**
 * Find the bubble belonging a product element.
 * @param productE A product element.
 */
function rlFindBubble(productE) {
	if(productE.id) {
		if(productE.id.indexOf('product') > -1) {
			var pId = productE.id.substring('product'.length);
			return $('bubble' + pId);
		} else if(productE.id.indexOf('bubble') > -1) {
			return productE;
		}
	}
	return null;
}

function rlFindProductTrigger(bubbleE) {
	if(bubbleE.id) {
		if(bubbleE.id.indexOf('bubble') > -1) {
			var bId = bubbleE.id.substring('bubble'.length);
			var _p = $('product' + bId);
			return _p ? _p.getElementsByTagName('img')[0] : null;
		}
	}
	return null;
}

/**
 *
 * @param event The event object. This is used to locate the bubble element.
 * @param visible Flag showing whether we should show or hide the bubble.
 */
function rlShowProductBubble(event, visible) {
	var bubble = rlFindBubble(Event.findElement(event, 'a'));
	if(! bubble) {
		//Assume the source element is the bubble.
		bubble = rlFindBubble(Event.element(event));
	}
	if(bubble) {
		if(visible) {
			if(rlActiveBubble == bubble) {
				return;
			} else if(rlActiveBubble && rlActiveBubble != bubble) {
				Effect.Fade(rlActiveBubble, { duration: 0.3 });
			}
			rlActiveBubble = bubble;
			bubble.style.left = Event.pointerX(event) - 20 + 'px';
			bubble.style.top = Event.pointerY(event) - 20 + 'px';
			Effect.Appear(bubble, { duration: 0.3 });
		} else {
			var _p = rlFindProductTrigger(bubble);
			var product = rlFindProductTrigger(bubble);
			if(product) {
				if(elementContainsMouse(bubble, event) == false
					&& elementContainsMouse(product, event) == false) {
					rlActiveBubble = null;
					Effect.Fade(bubble, { duration: 0.3 });
				}
			}
		}
	}
}

function elementContainsMouse(element, event) {
	var mX = Event.pointerX(event);
	var mY = Event.pointerY(event);
	var eX = findPosX(element);
	var eY = findPosY(element); 
	var eDim = Element.getDimensions(element);
	return (mX >= eX && mX <= eX + eDim.width
		&& mY >= eY && mY <= eY + eDim.height);
}

function rlInitNav() {
	//Attach image swapping for all img tags of class imgRO.
	var imgs = document.getElementsByClassName('imgRO');
	for(i = 0; i < imgs.length; i++) {
		imgs[i].index = i;
		Event.observe(imgs[i], 'mouseover', function(event) { rlImgRO(event); });
		Event.observe(imgs[i], 'mouseout', function(event) { rlImgRO(event); });
	}
	
	/* For now assume the JS windows will be present. */
	Event.observe($('windowCanvas'), 'click', rlHideActiveJSWindow);
	if($('login') != null) {
		Event.observe($('login'), 'click', function(event) { rlShowJSWindow('loginWindow', event); });
	}
	Event.observe($('send_to_friend'), 'click', function(event) { rlShowJSWindow('toFriendWindow', event); });
	Event.observe($('news_signup'), 'click', function(event) { rlShowJSWindow('newsletterWindow', event); } );
	
	//Now init the product link hover summary bubbles, if there are any.
	//This part has NOTHING to do with the nav... file needs renaming.
	/*pLinkNodes = document.getElementsByClassName('product');
	for(i = 0; i < pLinkNodes.length; i++) {
		var pLinks = $(pLinkNodes[i]).getElementsByTagName('a');
		if(pLinks[0]) {
			Event.observe(pLinks[0], 'mouseover', function(event) { rlShowProductBubble(event, true); });
			
			var bubble = rlFindBubble(pLinks[0]);
			Event.observe(bubble, 'mouseout', function(event) { rlShowProductBubble(event, false); });
		}
		
	}*/
}

Event.observe(window, 'load', rlInitNav);