/* Setup the variables */
base_url = "http://roohit.com";
var browser = navigator.appName;
var content;
var iFrameSRC;
if (typeof(showHover) == 'undefined') {
	var showHover = true;
}
if (typeof(divBg) == 'undefined') {
	var divBg = "#FFF";
}
if (typeof(title) == 'undefined') {
	var title = "AutoCollect, MicroBookmark, MicroShare";
}
if (typeof(titleColor) == 'undefined') {
	var titleColor = "#FFF";
}
if (typeof(titleBg) == 'undefined') {
	var titleBg = "#555555" ;
}
if (typeof(btmBg) == 'undefined') {
	var btmBg = "#cccccc" ;
}
if (typeof(logoSrc) == 'undefined') {
	var logoSrc = ""+base_url+"/site/images/aa/btn_h_tinylogo.png";
}
if (typeof(logoAlt) == 'undefined') {
	var logoAlt = "Rooh It";
}
if (typeof(itemImgSrc) == 'undefined') {
	var itemImgSrc = [
				base_url+'/site/FeaturesPage_files/save.gif'
			  , base_url+'/site/FeaturesPage_files/www.gif'
			  , base_url+'/site/FeaturesPage_files/mail.gif'
			  , base_url+'/site/FeaturesPage_files/autoBlog.gif'
			  , base_url+'/site/FeaturesPage_files/user.gif'
			  , base_url+'/site/FeaturesPage_files/search.gif'
			  , base_url+'/site/FeaturesPage_files/link.gif'
			  , base_url+'/site/FeaturesPage_files/free.gif'
	];
}
if (typeof(itemTitle) == 'undefined') {
	var itemTitle = [
				 'AutoCollect Highlights'
			   , 'Combine Highlights'
			   , 'Email Highlighted page'
			   , 'AutoPublish to Blog'
			   , 'Share Highlights'
			   , 'Social Discovery'
			   , 'Micro-Bookmarks'
			   , 'No Signup, Free'
	] ;
}
if (typeof(altTitle) == 'undefined') {
	var altTitle = [
				  'Automatically clips all highlights to <strong>one location</strong>. Highlight as you surf! '
				, 'Display multiple pages of interest <strong>as one page</strong> - with highlights intact.'
				, '..<strong>to anyone</strong>. No one needs to be a RoohIt user to view the highlights.'
				, 'Directly posts highlights to your blog (<strong>very cool</strong>!) Hilight as you surf => hilights appear on your page.'
				, 'to Any website such as Facebook, Twitter... etc. with <strong>one-click</strong>.'
				, 'See what like minded people are highlighting.'
				, ': automatically creates a short url that goes <strong>directly to the highlights</strong> on the page.'
				, ': no joining another service, no installation, <strong>no leaving this page</strong>, no fine print. ;)'					
	] ;
}
if (typeof(itemLink) == 'undefined') {
	var itemLink = [
				  base_url+'/site/fListAll.php#clips'
				, base_url+'/site/fListAll.php#saves'
				, base_url+'/site/fListAll.php#email'
				, base_url+'/site/fListAll.php#microblog'
				, base_url+'/site/fListAll.php#postany'
				, base_url+'/site/fListAll.php#socdisc'
				, base_url+'/site/fListAll.php#microbookmark'
				, base_url+'/site/fListAll.php#free'
	] ;
}

if (typeof(divSource) == 'undefined') {
	content = '<p class="menuTitle" style="background:'+titleBg+';">';
	content += title+'<span class="roohWT"><a href="'+base_url+'/site/learn.php#concept" title="The Concept"><img src="'+base_url+'/site/images/aa/btn_h_help.png" border="0" /></a></span></p>';
	content += '<div class="innerbox"><div class="intro2">With one-mouse click select, <br><span class="roohHiLight">Highlight, autoSave and MicroShare</span> any part of this page. </div><div style="margin:0px auto; width:220px;"><div class="feature_title">Features</div></div>';
	content += '<div class="feature_box"><div class="feature_box_row">';
	for (var i=0;i<itemImgSrc.length;i++) {
		content += '<div class="feature_item" onmouseover="showText('+i+');" onmouseout="hideText();"><a href="'+itemLink[i]+'" target="rooh"' ;
		//content += 'title="'+altTitle[i]+'"';
		content += '><img alt="'+altTitle[i]+'" align="absmiddle" src="'+itemImgSrc[i]+'"/><span>'+itemTitle[i]+'</span></a></div>';
		if (i == 1 || i == 3 || i == 5 || i == 7 || i == 9 || i == 11 || i == 13)
			content += '</div><div class="feature_box_row">';
	}
	content += '</div></div>';
	content += '<div id="roohitBtnMenuText"><span style="visibility:hidden;">Link Info</span></div>';
	content += '</div><div class="roohFooter" style="background-color:'+btmBg+';">'
	/* Link from logo is intentionally not in target=rooh because all other links to roohit.com are in this target, what if popup-blocker does not allow rooh window to open */
	content += 'Put a highlighter in your <a href="'+base_url+'/site/buttons.php" target="rooh" title="or blog">webpage</a> or <a href="'+base_url+'/site/1click.php" target="rooh" title="Internet Explorer, Firefox etc.">browser</a><a href="'+base_url+'/"><img alt="Powered by RoohIt" title="Powered by RoohIt" src="'+logoSrc+'" align="absmiddle"/></a></div>';
} else {
	/* Read contents from external file and polulate div */
	var newElement = document.createElement('iframe');   
	newElement.src = divSource;
	newElement.id = 'externalHTMLSource';
	//newElement.onload = function () { getIframeContents();};
	newElement.style.display = 'none';
	newElement.style.position = 'absolute';
	var t=setTimeout("document.getElementsByTagName('body')[0].appendChild(newElement)", 200);
}

/* Function to retrieve the external contents for the menu */
function getIframeContents() {
	var obj = document.getElementById('externalHTMLSource');
	if (browser == "Microsoft Internet Explorer") {
		iFrameSRC = window["externalHTMLSource"].document.body.innerHTML;
	} else {
		iFrameSRC = obj.contentWindow.document.body.innerHTML;
	}
}

/* Create the CSS <link> element and append to document head */
var cssItem = document.createElement('link');
	cssItem.setAttribute('type', 'text/css');
	cssItem.setAttribute('rel', 'stylesheet');
	cssItem.setAttribute('media', 'screen');
	cssItem.href = ""+base_url+"/site/css/btn.10.css";
	document.getElementsByTagName('head')[0].appendChild(cssItem);

/* Function to getElementsByClassName */
var documentElements = [];
function getElementsByClassName(theClassName) {		// get the elements by class name
	documentElements = [];
	var elements = (document.getElementsByTagName('*') || document.all);
	for (var i=0;i<elements.length;++i) {
		if (elements[i].className == theClassName) {
			documentElements.push(elements[i]);
		}
	}
	return documentElements;
}

/* Function to getElementsByName */
var linkItem = [];
function getElementsByName(theElementName) {
	linkItem = [];
	var elements = (document.getElementsByTagName('*') || document.all);
	for (var i=0;i<elements.length;++i) {
		if (elements[i].getAttribute("name")  == theElementName) {
			elements[i].style.right = '0';
			elements[i].style.left = '0';
			linkItem.push(elements[i]);
		}
	}
	return linkItem;
}

/* Function to display text in the sub-menu */
function showText(arrayNum) {
	document.getElementById('roohitBtnMenuText').style.display = 'block';
	document.getElementById('roohitBtnMenuText').innerHTML = altTitle[arrayNum];
}

/* Function to remove text from the sub-menu */
function hideText() {
	//document.getElementById('roohitBtnMenuText').style.display = 'none';
	//document.getElementById('roohitBtnMenuText').innerHTML = 'Link Info';
	document.getElementById('roohitBtnMenuText').innerHTML = '<center>CLICK THE BUTTON<br/>(Start highlighting this page)</center>';
}

/* Function to create the element for the menu */
function generateElement() {
	/* Create the rooh menu */
	var roohMenuElement = document.createElement('div');  
	if (document.getElementById('externalHTMLSource')) {
		roohMenuElement.innerHTML = iFrameSRC;
	} else {
		roohMenuElement.innerHTML = content;
		roohMenuElement.style.backgroundColor = divBg;
	}
	roohMenuElement.setAttribute("class","roohitBtnMenu");
	roohMenuElement.setAttribute("id","roohitBtnMenu");
	roohMenuElement.onmouseover = function () { show(this, 'null'); }
	roohMenuElement.onmouseout = function () { hide(); }
	roohMenuElement.style.visibility = 'hidden';
	roohMenuElement.style.display = 'none';
	
	// append the rooh menu element to the document body
	document.body.appendChild(roohMenuElement);
}

/* Function to run when the webpage loads */
window.onload = function() {
	if (typeof(divSource) != 'undefined') 
		var t=setTimeout("getIframeContents()", 300);
	var t=setTimeout("generateElement()", 300);
	
	allElements = [];
	var elements = (document.getElementsByTagName('*') || document.all);
	for (var i=0;i<elements.length;++i) {
		if (elements[i].id == 'roohitBtn' && elements[i].className != 'noRoohMenu') {
			if (browser == "Microsoft Internet Explorer")
				elements[i].setAttribute('className', 'roohitBtn');
			else
				elements[i].setAttribute('class', 'roohitBtn');
			elements[i].removeAttribute('id');
			allElements.push(elements[i]);
		}
	}
	
	getElementsByClassName('roohitBtn');
	for (var i=0;i<documentElements.length;i++) {
		documentElements[i].onmouseover = function () { show(this, 'main'); }
		documentElements[i].onmouseout = function () { hide(); }
	}
}

/* Function to show the rooh menu */
function show(element, type) {
	if (showHover == true) {
		theDiv = document.getElementById('roohitBtnMenu') ;
		if (theDiv.style.display == 'none')
			theDiv.style.display = 'block';
		if (type == 'main')
			checkLocation(element, theDiv);
		theDiv.style.visibility = 'visible';
	}
}

/* Function to hide the rooh menu */
function hide() {
	document.getElementById('roohitBtnMenu').style.visibility = 'hidden';
}

/* Function to check the location of the menu and position it correctly */
function checkLocation(wrtElement, div2show) {
	/* Check if the element is past the page width and position correctly */
		var documentWidth = window.innerWidth || document.documentElement.offsetWidth;
		
		var mainLeft = findPosX(wrtElement);
		var mainRight = mainLeft + wrtElement.offsetWidth;
		var posEleRight = mainLeft + div2show.offsetWidth;
		
		// Reset the element right and left style attributes
		if (browser == "Microsoft Internet Explorer")	// IE fix
			mainRight = mainRight+0;
		
		if (posEleRight >= documentWidth) {	// if the menu exceeds the page width...
			div2show.style.left = mainLeft - (div2show.offsetWidth-wrtElement.offsetWidth) +'px';	
		} else if (posEleRight <= documentWidth) {
			div2show.style.left = mainLeft+'px';
		}
		
	/* Check if the element exceeds the viewable page height and position correctly */
		var ScrollTop = document.body.scrollTop;
		if (ScrollTop == 0){if (window.pageYOffset){ScrollTop = window.pageYOffset;}else{ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;}}
	
		var ele = wrtElement;
		if (ele.hasChildNodes()) {	// check if the element has a child node.
			var children = ele.childNodes;
			for (var i = 0; i < children.length; i++) {
				if (children[i].tagName == 'IMG') {	// if the child node is an image get its height
					var mainElementHeight = children[i].offsetHeight;	// get the height of the image inside the link/main menu item
					break;	// end the loop
				}
			}
		}
		if (typeof(mainElementHeight) == 'undefined') {	// backup to get link height if there is no image in the link
			var mainElementHeight = wrtElement.offsetHeight;
		}
		
		var pageHeight = document.body.clientHeight + ScrollTop;
		var roohElementHeight = div2show.offsetHeight;	// get the elements height
		var mainFromTop = findPosY(wrtElement) + mainElementHeight;
		var posEleFromTop = div2show.offsetHeight + mainFromTop;
		
		if (posEleFromTop >= pageHeight) {	// position the menu above the main menu if it exceeds the page height
			div2show.style.top = mainFromTop-mainElementHeight-div2show.offsetHeight+'px';
		} else if (posEleFromTop <= pageHeight) {	// position the menu directly below the main menu
			div2show.style.top = (mainFromTop-4)+'px';	
		}
}

/* Function to find the current element/object X coordinate */
function findPosX(element) {
	var curleft = 0;
	if (element.offsetParent) {
		while(true) {
			curleft += element.offsetLeft;
			if(!element.offsetParent)
				break;
			element = element.offsetParent;
		}
	} else if (element.x) {
		curleft += element.x;
	}
	return curleft;	// return the x coordinate (pixels from left)
}

/* Function to find the current element/object Y coordinate */
function findPosY(element) {
	var curtop = 0;
	if (element.offsetParent) {
		while(true) {
			curtop += element.offsetTop;
			if(!element.offsetParent)
				break;
			element = element.offsetParent;
		}
	} else if(element.y) {
		curtop += element.y;
	}
	return curtop;	// return the y coordinate (pixels from top)
}