// Browser detection
var s_browser="ie";
if (navigator.appName=="Netscape") s_browser="ns";
if (navigator.appName=="Opera") s_browser="op";
if (navigator.userAgent.indexOf("Safari")!==-1) s_browser="sf";

// Take a tour stuff...
var glb_i_tour=0;
var glb_a_tour=Array('spanTradeWant','idWantList','AddToWant','idTradeList','divAddToHave','divPageHeadline','GetNow','tdTourItemArea','ucLeftMenu_divGeneralLinks')
var o_element_top; var o_element_left; var o_element_width; var o_element_right; var o_element_height;

// see if the URL has tour= which means the user is in the middle of a tour
function check_if_tour () {
	var myURL = document.URL.match(/.+(\?|\&)tour\=(\d)/i); //look for "?tour=X" or "&tour=X"
	if (myURL) {
		myURL=RegExp.$2;
		glb_i_tour=parseInt(myURL);
		fn_tour(glb_i_tour);
	};
}

function fn_tour(i_mode) {
	var tempObj= null;
	var s_link="";
	var content_width = 290;  // you can change this for each step
	var o_info_height;  // set this for each of the "top" info boxes
	var o_info_left_offset=0; 
	s_mode=glb_a_tour[i_mode];
	s_infomode='right';  //*** default placement of window - change this to 'left' for an individual message if you want the box to appear to the left
	var b_return_home=false;
	tempObj=$('divThreeSteps'); //hide three steps if visible
	if (tempObj) tempObj.hide();
	if (i_mode==0) {
		s_html="<h4>your want list and have list</h4>Getting started is simple:<ul><li>tell us the items you want<li>tell us the items you have</ul>Swaptree creates trades by matching items that you have with other people who want those items, and vice-versa. &nbsp;It's almost magical! &nbsp;And it's free!<br><br><h6><b>HINT:</b> &nbsp;Make sure you put items on BOTH your want and have lists. &nbsp;We recommend that you put at least 10 items on EACH list.</h6>";
		s_infomode='left';
	} else if (i_mode==1) {
		s_html="<h4>items i want</h4>Your want list is easy to fill:&nbsp; it's like shopping for free!<br><br>Add all of the books that you've been dying to read, the latest CDs, those classic movies, or your dream games. &nbsp;Those are the items that you want right?<br><br>As soon as you add an item to your want list, Swaptree will start trying to get you that item in trade.<br><br><h6><b>HINT:</b> &nbsp;Having items on your want list allows other users to initiate trades with you. &nbsp;We only create trades that will get you items on your want list - so fill it up!</h6>";
		s_infomode='left';
	} else if (i_mode==2) {
		s_html="<h4>adding an item to your want list</h4>As you are searching or browsing the site, you'll see lots of \"want it\" links like the one to the left.<br><br>Clicking on the link will add that item to your want list.<br><br><h6><b>HINT:</b> &nbsp;To quickly find items that you want, you can use the search box above to search for an item title or your favorite author, artist, actor or game publisher.</h6>";
		tempObj = $$('a.AddToWantStyle');
		if (tempObj.length==0) { //the user ONLY has GetNows, so there are no add to wants
			s_mode="idWantList";
		} else {
			s_mode=tempObj[1].id;
		}
	} else if (i_mode==3) {
		s_html="<h4>items i have - items you are trading</h4>These are all of the items that you have and are willing to trade.<br><br>Even though we have great trade matching technology - we still can't get you something for nothing!<br><br>Therefore, you MUST add some items to your \"have list\" before we can find any trades for you.<br><br>So grab that stack of books, CDs, DVDs and video games next to the couch and prepare to get a bunch of new stuff - for free!";
		s_infomode='left';
	} else if (i_mode==4) {
		s_html="<h4>adding an item to your have list</h4>To add an item to your have list, just enter the UPC code or ISBN for the item. &nbsp;You know - the funny numbers by the barcode?<br><br>It only takes a second, and then you're off to the races!<br><br><h6><b>HINT:</b> &nbsp;We require you to type in the UPC/ISBN for your \"have list\" items because it identifies the exact item you are trading.</h6>";
		s_link=baseUrl + "WebFrmItemAddedToTradeList.aspx?tour=5";
	} else if (i_mode==5) {
		s_html="<h4>instantly see items you can receive</h4>When you add an item to your have list, we instantly show you all of the items that you can receive in trade for it.<br><br>For example, by trading the item to the left, you can receive thousands of items, including any one of the items below!<br><br><h6><b>HINT:</b> &nbsp;Even if you can't receive anything for a particular item right now, because of our multi-way trading algorithms, as soon as a single user wants an item, you'll be able to receive tons of items for it!</h6>";
		s_infomode='top';
		o_info_height = 205;
		b_return_home=true;
		if (s_browser=="ie") { 
			content_width=405;
			o_info_left_offset=95;
		} else {
			content_width=377;
			o_info_left_offset=85;
		}
		$$('#divPageHeadline select')[0].hide();  //hide the mediatype pulldown since it bleeds through in IE
	} else if (i_mode==6) {
		s_html="<h4>initiate a trade - get it now!</h4>Once you have items on your have list, any item that you can receive in trade will have a \"GET NOW\" link.<br><br>\"GET NOW\" means that there is a trade available to get you that item RIGHT NOW!<br><br>Just click on the link and we'll get the trade started!";
		$$('a.greenIconBtnLink')[0].id = 'divGetNow';  // can we make this more selective so it's quicker?
		s_mode='divGetNow';
		b_return_home=true;
	} else if (i_mode==7) {
		s_html="<h4>how many items can I get right now?</h4>As you add items to your have list, we update this area with the total number of items you can receive in trade right now.<br><br>Click on the book, CD, movie or video game icon, and we'll show you all of the \"GET NOW\" items you can receive in that media type.<br><br>Pretty cool, huh?";
		b_return_home=true;
		s_link=baseUrl + "home/?mediatype=1&tour=8";
	} else if (i_mode==8) {
		s_html="<h4>get off to a quick start!</h4>First of all, add some items that you want to trade to your have list.<br><br>After that, try out these two links:<ul><li><b>\"Newly Added To Have List\"</b> - shows items which other users are trading. &nbsp;Add any of these items to your want list, and there's a good chance we can set up a trade quickly.<br><br><li><b>\"Newly Added To Want List\"</b> - lists what other users want. &nbsp;Use it to find some cool things to add to YOUR want list or maybe you'll see something that you were thinking about trading!</ul>";
		b_return_home=true;
	} 

	s_html+='<h5>'+(i_mode+1)+' of '+(glb_a_tour.length)+'</h5>'
	
	// these are the location of the item we are highlighting - o_element
	o_mode=document.getElementById(s_mode);
	o_element_top = fn_get_pos(o_mode,'Top');
	o_element_left = fn_get_pos(o_mode,'Left');
	o_element_height = fn_get_pos(o_mode,'Height');
	o_element_width = fn_get_pos(o_mode,'Width');
	o_element_right = o_element_left+o_element_width;
			
	fn_anim_boxout(o_mode,'#000',0,s_link);
	o_info=fn_element_create(document.getElementsByTagName('body')[0] ,'div','tour_info','inner');
	o_info.className='alert_info';
	
	//place o_info	
	if (s_infomode=='right') {
		o_info.style.left=(o_element_right+27+o_info_left_offset)+'px';
		o_info.style.top=(o_element_top-30)+'px';
	}
	else if (s_infomode=='left') {
		o_info.style.left=(o_element_left-content_width-50+o_info_left_offset)+'px';
		o_info.style.top=(o_element_top-30)+'px';
	}
	else if (s_infomode=='top') {
		o_info.style.left=(o_element_left+(o_element_width/2)-(content_width/2)+o_info_left_offset) +'px';
		o_info.style.top=(o_element_top-o_info_height-30) + 'px';
	}	
	else if (s_infomode=='bottom') {
		o_info.style.left=(o_element_left+(o_element_width/2)-(content_width/2)+o_info_left_offset) +'px';
		o_info.style.top=(o_element_top+o_element_height+30) + 'px';
		}
	
	if (glb_i_tour+1>=glb_a_tour.length) glb_i_tour=0;
	else glb_i_tour++;
	if (s_link.length==0) s_link = "javascript:fn_tour("+glb_i_tour+")"; 
	
	// In IE, the "arrow" image on the side of the info box won't fade in 
	if (s_browser!=='ie' && s_infomode!=='top') o_info.innerHTML='<img class="front_'+s_infomode+'" src="/images/front_'+s_infomode+'.gif">';
	else o_info.innerHTML='';
	
	if (glb_i_tour==0) s_html+='<div id="infofooter"><a href="javascript:fn_tour_close('+b_return_home+');" style="float: left;"><img src="/images/tour_close.jpg"> end the tour</a><a href="' + baseUrl + 'WebFrmHowDoesThisWork.aspx" style="float: right;"><img src="/images/icon_arrow_green.gif"> learn more</a></div>';
	else s_html+='<div id="infofooter"><a href="javascript:fn_tour_close('+b_return_home+');" style="float: left; margin-top: 9px;"><img src="/images/tour_close.jpg"> stop the tour</a><a href="'+s_link+'" style="float: right;"><img src="/images/tour_next.gif"> next step on the tour</a></div>';
	o_info.innerHTML+=s_html;
	o_info.style.width= content_width;
	fn_anim_fadein('tour_info',0);
	scroll(0, o_element_top-350);
}

function fn_tour_close(b_return_home) {
	glb_i_tour=0;
	if (b_return_home) {
		window.location.href = baseUrl + "home/";
		return;
	};
	fn_anim_fadeout('tour_info',100);
	fn_element_destroy('boxouts');
}

/////////-------------------------------------------------------------------------

function fn_anim_boxout(o_element,s_colour,i_margin,s_link) {
	o_content=document.getElementsByTagName('body')[0];
	o_board=fn_element_create(o_content,'div','boxouts','inner');
	i_opacity=35;
	
	var o_content_top=fn_get_pos(o_content,'Top');
	var o_content_left=fn_get_pos(o_content,'Left');
	var o_content_height = fn_get_body_height();
	var o_content_width=fn_get_pos(o_content,'Width');
	
	if (o_element_width<20 || o_element_height<20) i_margin=8;
	
	s_div_left="<div id='boxout_left' style='z-index:100;position:absolute;top:"+o_content_top+"px;left:"+o_content_left+"px;width:"+(o_element_left-o_content_left-i_margin)+"px;height:"+o_content_height+"px;background-color:"+s_colour+";'></div>";
	
	s_div_top="<div id='boxout_top' style='z-index:100;position:absolute;top:"+o_content_top+"px;left:"+(o_element_left-i_margin)+"px;width:"+(o_element_width+(i_margin*2))+"px;height:"+(o_element_top-o_content_top-i_margin)+"px;background-color:"+s_colour+";'></div>";
	
	s_div_right="<div id='boxout_right' style='z-index:100;position:absolute;top:"+o_content_top+"px;left:"+(o_element_right+i_margin)+"px;width:"+((o_content_left+o_content_width)-(o_element_right)-i_margin)+"px;height:"+o_content_height+"px;background-color:"+s_colour+";'></div>";
	
	s_div_bottom="<div id='boxout_bottom' style='z-index:100;position:absolute;top:"+(o_element_top+o_element_height+i_margin)+"px;left:"+(o_element_left-i_margin)+"px;width:"+(o_element_width+(i_margin*2))+"px;height:"+(o_content_height-o_element_top-o_element_height-i_margin)+"px;background-color:"+s_colour+";'></div>";
	
	s_div="<div id='boxout_middle' style='z-index:100;position:absolute;top:"+(o_element_top-i_margin)+"px;left:"+(o_element_left-i_margin)+"px;width:"+(o_element_width+(i_margin*2))+"px;height:"+(o_element_height+(i_margin*2))+"px;background-color:#fff;'></div>";
	
	//if (s_link.length>0) s_div="<a href='"+s_link+"'>"+s_div+"</a>";  // add a hyperlink if it is necessary to change pages
	o_board.innerHTML=s_div_left+s_div_top+s_div_right+s_div_bottom+s_div;
	fn_anim_opacity('boxout_left',i_opacity); fn_anim_opacity('boxout_top',i_opacity); fn_anim_opacity('boxout_right',i_opacity); fn_anim_opacity('boxout_bottom',i_opacity); fn_anim_opacity('boxout_middle',0);
	o_board.style.display="block";
}


function fn_element_create(o_container,s_tag,s_id,s_mode) {
	if (!document.getElementById(s_id)) {
		if (s_tag.indexOf('input')==0) {
			if (s_browser=='ie') {
				a_bits=s_tag.split('_');
				s_type=a_bits[1];
				s_tag="<INPUT TYPE='"+s_type+"'>";
			} else 	s_tag='input';
		} else if (s_tag=='button' && s_browser=='ie') s_tag="<BUTTON TYPE='submit'>";
		o_element=document.createElement(s_tag);
		o_element.setAttribute('id',s_id);
		if (s_mode=='before') {
			o_temp=o_container.parentNode;
			o_temp.insertBefore(o_element,o_container.nextSibling);
		} else o_container.appendChild(o_element);
	} else o_element=document.getElementById(s_id);
	return o_element;
}

function fn_get_body_height() {
	var bodyHeight = document.documentElement.offsetHeight  // for compliant browsers
	if (document.body.scrollHeight > bodyHeight) bodyHeight= document.body.scrollHeight;  // for IE
	return bodyHeight;
}

function fn_get_pos(o_element,s_mode) {
	if (s_mode=="Width" || s_mode=="Height") {
		if (s_mode=="Width") s_return=o_element.offsetWidth;
		else if (s_mode=="Height") s_return=o_element.offsetHeight;
	} else {
		s_value=0;
		do {
			if (s_mode=="Top" && o_element.offsetTop!="NaN") s_value+=o_element.offsetTop||0;
			else if (s_mode=="Left" && o_element.offsetLeft!="NaN") s_value+=o_element.offsetLeft||0;
			else if (s_mode=="Right" && o_element.offsetRight!="NaN") s_value+=o_element.offsetRight||0;
			else if (s_mode=="Bottom" && o_element.offsetBottom!="NaN") s_value+=o_element.offsetBottom||0;
			o_element=o_element.offsetParent;
		} while (o_element);
		s_return=s_value;
		if (s_browser=='ie' && s_mode=='Left') s_return+=3;
	}
	return s_return;
}

function fn_anim_fadein(s_element,i_opacity) {
	i_opacity+=12;
	fn_anim_opacity(s_element,i_opacity);
	if (i_opacity<100) {
		document.getElementById(s_element).style.display="block";
		setTimeout("fn_anim_fadein('"+s_element+"',"+i_opacity+");",30);
	}
}

function fn_anim_fadeout(s_element,i_opacity) {
	i_opacity-=12;
	fn_anim_opacity(s_element,i_opacity);
	if (i_opacity>0) setTimeout("fn_anim_fadeout('"+s_element+"',"+i_opacity+");",35);
	else document.getElementById(s_element).style.display="none";
}

function fn_element_destroy(s_element) {
	o_element=document.getElementById(s_element);
	if (o_element) o_element.parentNode.removeChild(o_element);
}

function fn_anim_opacity(s_element,i_opacity) {
	o_element=document.getElementById(s_element);
	i_opacity=(i_opacity==100)?99.999:i_opacity;
	o_element.style.filter="alpha(opacity:"+i_opacity+")";
	o_element.style.KHTMLOpacity=i_opacity/100;
	o_element.style.MozOpacity=i_opacity/100;
	o_element.style.opacity=i_opacity/100;
}