/**
 * Spring2008.js
 * This is used on Spring2008.aspx to provide an accordion to shwo/hide content 
 * and also to provide tabs to show/hide content
 *
 * @author Geoff Oliver <goliver@triaddigital.com>
 * @date 01.23.2008
 * @version 0.1
 */

/* initialize the accordion */
accdn = new accordion('accordion', {
	classNames : {
		toggle : 'accordion_toggle',
		toggleActive : 'accordion_toggle_active',
		content : 'accordion_content'
	},
	defaultSize : {
		width : 635
	},
	direction : 'horizontal'
});

/* some variables we need throughout */
tab_collection = [];
accds = [];
fade_img = false;
track_url = 'http://www.samsclubmemberservices.com/tracker.aspx?action=';
current_tab = false;
auto_advancing = true;
/**
 * This function automatically advances the accordion every five seconds
 */
function autoAdvance(){
	/* global flag that gets set to 'false' when a tab is clicked on */
	if(!auto_advancing){
		return;
	}
	
	/* initialize 'next_tab' variable */
	var next_tab = false;
	/* iterate over the tab collection to figure out which to display next */
	for(var i=0; i < tab_collection.length; i++){
		var ct = tab_collection[i];
		if(ct == current_tab){
			/* probably an easier way to do this... */
			if(i == (tab_collection.length - 1)){
				next_tab = tab_collection[0];
			}else{
				next_tab = tab_collection[(i+1)];
			}
		}
		/* yay, we found the next tab. bail out of the loop */
		if(next_tab){
			break;
		}
	}
	
	if(next_tab && auto_advancing){
		/* set a timer to call the 'showTab' function for the 'next_tab' that we found */
		setTimeout("showTab('" + next_tab + "',true,true)", 8000); //8000 milliseconds = 8 seconds
	}else{
		/* this should NEVER happen... if it did, then we have problems */
	}
}

/**
 * This is just used to fade in images when the accordion switches
 * used in accordion.js - line 214
 */
function fadeInImage(i){
	try{
		opacity(i.id, 0, 100, 500);
	}catch(e){ ; }
}

/**
 * This method fires a series of opacity increases or decreases on an object
 * called above and in accordion.js - line 132
 */
function opacity(id, opacStart, opacEnd, millisec){
	try{
		var speed = Math.round(millisec / 100);
		var timer = 0;
		
		if(opacStart > opacEnd){
			for(i = opacStart; i >= opacEnd; i--){
				setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
				timer++;
			}
		}else if(opacStart < opacEnd){
			for(i = opacStart; i <= opacEnd; i++){
				setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
				timer++;
			}
		}
	}catch(e){ ; }
}

/**
 * This method actually changes the opacity of an object
 * called above
 */
function changeOpac(opacity, id){
	try{
		var object = document.getElementById(id).style;
		object.opacity = (opacity / 100);
		object.MozOpacity = (opacity / 100);
		object.KhtmlOpacity = (opacity / 100);
		object.filter = "alpha(opacity=" + opacity + ")";
	}catch(e){ ; }
}

/**
 * Here we fix stupid margin problems with IE that occur when 
 * an accordion is expanded. for whatever reason, IE adds a three pixel gap 
 * to the right side of the element and causes it to flow below (and invisibly) 
 * below the accordion
 */
function setMargins(e){
	try{
		/* grab the element that triggered this event */
		if(typeof(e) == 'string'){
			var targ = document.getElementById(e);
		}else{
			var targ = e.srcElement ? e.srcElement : e.target;
		}
		
		current_accd = targ.id;
		
		/* grab the element's parent, which is what we really want */
		var targ = targ.parentNode;
		
		/* grab the last accordion handle */
		var last = $('accordion_toggle_four');
		/* initialize tracker action string */
		var action = 'Spring2008-Accordion-';
		
		/* depending on what the target is, set the margin on the last element to 
		prevent a 3px gap in IE only! */
		if(targ.id != 'accordion_toggle_four'){
			last.style.marginRight = '-3px';
		}else{
			last.style.marginRight = '0px';
		}
		
		/* tack on end of action string to pass to tracker frame */
		switch(targ.id){
			case 'accordion_toggle_one':
				action+= 'OutdoorEntertaining';
				break;
			case 'accordion_toggle_two':
				action+= 'LawnAndGarden';
				break;
			case 'accordion_toggle_three':
				action+= 'CleanOut';
				break;
			case 'accordion_toggle_four':
				action+= 'CleanIn';
				break;
		}
		
		/* redirect tracker frame -- for metrics */
		trackInIframe(track_url+action);
	}catch(e){ ; }
}


/**
 * This is used on the accordion bars when you hover over them
 */
function mouseOverEffect(e){
	try{
		var targ = e.srcElement ? e.srcElement : e.target;
		targ.className += ' hover_effect';
	}catch(e){ ; }
}

/**
 * This is used on the accordion bars when you move your mouse away
 */
function mouseOutEffect(e){
	try{
		var targ = e.srcElement ? e.srcElement : e.target;
		targ.className = targ.className.replace(/hover_effect/g,'');
	}catch(e){ ; }
}

/**
 * This method changes background images on a tab and it's container. It's really 
 * only used on the left and right tabs because they need multiple background images to 
 * produce a top inner shadow and corner shadows.
 */
function setProperBackgrounds(e){
	try{
		/* if we were passed a string instead of an event object, grab the element using it's id (string passed */
		if(typeof(e) == 'string'){
			var targ = $(e);
			var clicked = false;
		}else{
			var targ = e.srcElement ? e.srcElement : e.target;
			var clicked = true;
		}
		
		/* initialize action string */
		var action = 'Spring2008-Tab-'; /*was Feb-Baby-Tab */
		/* lowercase and detect tag type */
		if(targ.tagName.toLowerCase() == 'span'){
			/* if tag was a span, we don't want it, we want it's parent element */
			targ = targ.parentNode;
		}
		
		/* create array of tab ids */
		var els = ['link_block_one','link_block_two','link_block_three','link_block_four','link_block_five'];
		
		/* iterate over tab id array */
		for(var i = 0; i < els.length; i++){
			var el = els[i];
			/* grab the element */
			var the_el = $(el);
			/* clean up element's grandparent's classname */
			the_el.parentNode.parentNode.className = the_el.parentNode.parentNode.className.replace(/tab_active_left/g,'');
			the_el.parentNode.parentNode.className = the_el.parentNode.parentNode.className.replace(/tab_active_right/g,'');
			the_el.parentNode.className+= ' tab_border_box';
			/* depending on which element it is, take certain action */
			switch(el){
				case 'link_block_one':
					if(targ.id == el){
						/* this is the first tab */
						targ.parentNode.parentNode.className+= ' tab_active_left';
					}
					break;
				case 'link_block_five':
					if(targ.id == el){
						/* this is the last tab */
						targ.parentNode.parentNode.className+= ' tab_active_right';
					}
					break;
				case 'link_block_two':
				case 'link_block_three':
					/* we don't care about the middle tabs */
			}
		}
		
		/* tack on end of action string depending on tab clicked */
		switch(targ.id){
			case 'link_block_one':
				action+= 'EveryDay';
				break;
			case 'link_block_five':
				if(targ.id == el){
					targ.parentNode.parentNode.className+= ' tab_active_right';
				}
				action+= 'ForMom';
				break;
			case 'link_block_two':
				action+= 'Nursery';
				break;
			case 'link_block_three':
				action+= 'OnTheGo';
				break;
		}
		
		/* redirect tracker frame -- for metrics */
		/*if(clicked == true){
			trackInIframe(track_url+action);
			//setTimeout("makeIframeGoBack()",3000);
		}*/
		
		/* clean up element's parent classname */
		targ.parentNode.className = targ.parentNode.className.replace(/tab_border_box/g,'');
	}catch(e){ ; }
}

function trackInIframe(url){
	var ifr = $('tracker_frame');
	ifr.parentNode.removeChild(ifr);
	
	var nifr = document.createElement('iframe');
	nifr.id = 'tracker_frame';
	
	document.body.appendChild(nifr);
	
	nifr.src = url;
}

var sids = new Array('sponsor_content_one','sponsor_content_two','sponsor_content_three','sponsor_content_four','sponsor_content_five');

function switchid(sid){
	hideallids();
	showdiv(sid);
}

function hideallids(){
	//loop through the array and hide each element by id
	for (var i=0;i<sids.length;i++){
		hidediv(sids[i]);
	}		  
}

function hidediv(sid) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(sid).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.sid.display = 'none';
		}
		else { // IE 4
			document.all.sid.style.display = 'none';
		}
	}
}

function showdiv(sid) {
	//safe function to show an element with a specified id
		  
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(sid).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.sid.display = 'block';
		}
		else { // IE 4
			document.all.sid.style.display = 'block';
		}
	}
}


/* function makeIframeGoBack(){
	history.go(-1);
} */

/**
 * This method places two random images in the bottom left and right blocks 
 * below 'GIVE YOUR BABY ONLY THE BEST' text
 */
function randomizeAdPlacements(){
	try{
		/* generate a random number based on the number of image names */
		
		var idx = Math.floor(sids.length * Math.random());
		switch(idx)
		{
			case 0:
			switchid('sponsor_content_one');
			break;
			case 1:
			switchid('sponsor_content_two');
			break;
			case 2:
			switchid('sponsor_content_three');
			break;
			case 3:
			switchid('sponsor_content_four');
			break;
			case 4:
			switchid('sponsor_content_five');
			break;
			default:
			break;
		}		
	}catch(e){ ; }
}

/**
 * This is used to track when someone clicks on a POV image
 */
function visitPage(tab,url){
	var action = 'SpringCleaning-POV-';
	switch(tab){
		case 'accordion_content_one_link':
			action+='OutdoorEntertaining';
			break;
		case 'accordion_content_two_link':
			action+='LawnAndGarden';
			break;
		case 'accordion_content_three_link':
			action+='CleanOut';
			break;
		case 'accordion_content_four_link':
			action+='CleanIn';
		/* case 'accordion_content_five_link':
			action+='ChildproofingYourHome';
			break; */
	}
	trackInIframe(track_url+action);
	setTimeout("document.location.href='"+url+"'",200);
}

/**
 * This method makes the page "fancy" -- it sets up the accordion, tab boxes, and 
 * calls the method do display the random ad images
 */
function doFancyStuff(){
	try{
		/* grab accordion's container */
		var the_accd = $('wrapper');
		/* grab acordion handles from container */
		var the_accds = the_accd.getElementsByTagName('h3');
		/* iterate over handles and 'observe' them */
		for(var o = 0; o < the_accds.length; o++){
			var c_name = the_accds[o].id.replace(/toggle/,'content') + '_link';
			var the_link = $(c_name);
			the_link.href = 'javascript:visitPage("'+c_name+'","'+the_link.href+'");';
			/* the_accds[o].rel = 'movie_' + o; */
			/* grab the div inside the h3 that contains the text and has borders */
			var adiv = the_accds[o].getElementsByTagName('div');
			adiv = adiv[0];
			accds.push(the_accds[o].id);
			/* watch for 'mouseover' and 'mouseout' events on the div - to set class used for bg image */
			Event.observe(adiv,'mouseover',mouseOverEffect);
			Event.observe(adiv,'mouseout',mouseOutEffect);
		}
		
		/* grab the a elements (the tab names) in the tab block */
		var tabs = $('tab_block').getElementsByTagName('a');
		/* iterate over tabs */
		var con_wid = Math.floor(100/(tabs.length));
		
		for(var t = 0; t < tabs.length; t++){
			/* grab the tab */
			var the_tab = tabs[t];
			/* find the block name from the href of the a (everything including and past the "#") */
			var show_block = the_tab.href.replace(/([^#]*)#/,'');
			/* grab the tab's content block */
			var att_con = $(show_block + '_content');
			/* set the href to show the tab block */
			the_tab.href = 'javascript:showTab("' + show_block + '_content");';
			/* dynamically set list item width */
			the_tab.parentNode.parentNode.style.width = con_wid + '%';
			/* set the class name of the content block so you can't see it */
			att_con.className+= 'tab_content_hidden';
			/* add content block to collection of tabs */
			tab_collection.push(show_block);
		}
		
		/* call the method to show the first tab */
		showTab('block_one_content',true,true);
		
		/* observe 'click' events on the tabs - to set correct bg images on left and right tab */
		Event.observe($('link_block_one'),'click',setProperBackgrounds);
		Event.observe($('link_block_two'),'click',setProperBackgrounds);
		Event.observe($('link_block_three'),'click',setProperBackgrounds);
		Event.observe($('link_block_four'),'click',setProperBackgrounds);
		Event.observe($('link_block_five'),'click',setProperBackgrounds);
		
		/* observe 'mouseup' events on the accordion handles - to set correct margins for stupid IE */
		Event.observe($('accordion_toggle_one'),'mouseup',setMargins);
		Event.observe($('accordion_toggle_two'),'mouseup',setMargins);
		Event.observe($('accordion_toggle_three'),'mouseup',setMargins);
		Event.observe($('accordion_toggle_four'),'mouseup',setMargins);
		
		/* show random ad placements */
		randomizeAdPlacements();
		
		if(auto_advancing){
			setTimeout("autoAdvance()",8000);
		}
		
		window.onload = showFancyStuff;
		
	}catch(e){ ; }
}

function showFancyStuff(){
	$('loader').style.display = 'none';
	$('fancy_stuff').style.display = 'block';
}

/**
 * This method shows and hides tabs
 */
function showTab(which,callBgMethod,callAutoAdvance){
	if(typeof(callAutoAdvance) != 'undefined' && !auto_advancing){
		return;
	}
	try{
		/* cleanup the name -- we don't need the '_content' part if it's there */
		which = which.replace(/_content$/,'');
		/* iterate over tab collection */
		for(var t = 0; t < tab_collection.length; t++){
			/* grab the tab's content block */
			var tc = $(tab_collection[t] + '_content');
			/* grab the tab's link */
			var tl = $('link_' + tab_collection[t]);
			/* set class name to initially hide */
			tc.className = 'tab_content_hidden';
			tl.className = 'tab_link_inactive';
			/* change active tab and associated block class names */
			if(tab_collection[t] == which){
				current_tab = which;
				tc.className = 'tab_content_visible';
				tl.className = 'tab_link_active';
				/* this prevents that annoying little dotted box (focus ring) that firefox puts around links */
				tl.blur();
			}
		}
		try{
			
			if(typeof(callBgMethod) != 'undefined'){
				/* fix the background images if necessary */
				setProperBackgrounds('link_' + which);
			}
			
			if(typeof(callAutoAdvance) == 'undefined'){
				auto_advancing = false;
			}else{
				autoAdvance();
				//setTimeout("autoAdvance()",5000);
			}
			
		}catch(e){ ; }
	}catch(e){ ; }
}


function thisMovie(movieName){
	if(navigator.appName.indexOf("Microsoft") != -1){
		return window[movieName];
	}else{
		if(document[movieName].length != undefined){
			return document[movieName][1];
		}
		return document[movieName];
	}
}