/*	
	custom.js
	===============================================================
	Push Play 2008 - Custom functions
	
	Created 20.05.2008 by DS	
	Last Updated: See SVN		
	
	Functions:
	- init
	- add_nav_hovers, primary_nav_hover
	- add_print_button, print_page
	- apply_page_scroll_fixes, toggle_flash, wrap_flash_in_iframe	
	_______________________________________________________________
*/

	var global_flash_reqdVersion = '8.0';
	var global_flash_bgcolor = '#57a015';
	var flash_enabled = true; 

/*		
	@ init
	---------------------------------------------------------------	
	TRIGGER FUNCTIONS ON LOAD	
	_______________________________________________________________
*/
	
	function init()
	{	
		if (whichbrowser.isHiFi)
		{				
			body_class = (document.body.className ? document.body.className : '');
			body_id = (document.body.id ? document.body.id : '');			
						
			if (whichbrowser.isSafari)
			{
				document.getElementById('shell-wrap').className = (document.getElementById('shell-wrap').className + ' safari');
			}						
			if (whichbrowser.isSafari2)
			{
				document.getElementById('shell-wrap').className += (document.getElementById('shell-wrap').className + ' safari2');
			}			
			
		
			add_nav_hovers('primary-nav');
			add_print_button();
			
			if (flash_enabled)
			{						
			
				// output flash into #main first
				switch (body_id) 
				{
					case 't-home':
					
						// create embed hooks for Flash
						if (document.getElementById('panel-welcome'))
						{
							document.getElementById('panel-welcome').parentNode.id = 'flash-content-1';
						}
						if (document.getElementById('panel-push-play-near-you'))
						{
							document.getElementById('panel-push-play-near-you').parentNode.id = 'flash-content-2';	
						}
						if (document.getElementById('panel-campaign'))
						{
							document.getElementById('panel-campaign').parentNode.id = 'flash-content-3';			
						}										
						
						// generate Flash content
						
						// flash-content-1						
						var flash_src = '/resources/ui/flash/home/perspective-slideshow/perspective_slideshow_v6_[351x422].swf'; 								
						var flash_width = '351';				
						var flash_height = '422'; 				
						var flash_reqdVersion = global_flash_reqdVersion;				
						var flash_containerId = flash_createContainer('flash-embed-1', 'replaceContents', 'flash-content-1');	// flash-content-x as used by CSS						
						var flash_expressInstaller = false;							
						var flash_attributes = {};				
						// flash_attributes.name = 'value';				
						var flash_params = {}; 				
								flash_params.bgcolor = global_flash_bgcolor;		
								flash_params.wmode = 'transparent';								
						var flash_vars = {}; 				
								flash_vars.xmlURL = '/resources/ui/flash/home/perspective-slideshow/push_play_data.xml';					
						var flash_custom_args = {};
						// 	flash_custom_args.name = 'value';								
				
								flash_advancedEmbed(flash_src, flash_containerId, flash_width, flash_height, flash_reqdVersion, flash_expressInstaller, flash_vars, flash_params, flash_attributes, flash_custom_args);
						
						// flash-content-2												
						var flash_src = '/resources/ui/flash/home/map-and-events/events_map_v3_[352x422].swf'; 								
						var flash_width = '352';				
						var flash_height = '422'; 				
						var flash_reqdVersion = global_flash_reqdVersion;				
						var flash_containerId = flash_createContainer('flash-embed-2', 'replaceContents', 'flash-content-2');	// flash-content-x as used by CSS							
						var flash_expressInstaller = false;							
						var flash_attributes = {};				
						// flash_attributes.name = 'value';				
						var flash_params = {}; 				
								flash_params.bgcolor = global_flash_bgcolor;		
								flash_params.wmode = 'transparent';
						var flash_vars = {}; 				
								flash_vars.xmlURL = '/resources/ui/flash/home/map-and-events/events_map_data.xml';					
						var flash_custom_args = {};
						// 	flash_custom_args.name = 'value';								
				
								flash_advancedEmbed(flash_src, flash_containerId, flash_width, flash_height, flash_reqdVersion, flash_expressInstaller, flash_vars, flash_params, flash_attributes, flash_custom_args);
						
						// flash-content-3												
						var flash_src = '/resources/ui/flash/home/thumbnail-slideshow/thumbnail_slideshow_[264x422].swf'; 								
						var flash_width = '264';				
						var flash_height = '422'; 				
						var flash_reqdVersion = global_flash_reqdVersion;				
						var flash_containerId = flash_createContainer('flash-embed-3', 'replaceContents', 'flash-content-3');	// flash-content-x as used by CSS					
						var flash_expressInstaller = false;							
						var flash_attributes = {};				
						// flash_attributes.name = 'value';				
						var flash_params = {}; 				
								flash_params.bgcolor = global_flash_bgcolor;	
								flash_params.wmode = 'transparent';								
						var flash_vars = {}; 				
								flash_vars.xmlURL = '/resources/ui/flash/home/thumbnail-slideshow/push_play_thumbshow.xml';					
						var flash_custom_args = {};
						// 	flash_custom_args.name = 'value';								
				
								flash_advancedEmbed(flash_src, flash_containerId, flash_width, flash_height, flash_reqdVersion, flash_expressInstaller, flash_vars, flash_params, flash_attributes, flash_custom_args);
								
						// apply Flash layout
						
						if ((swfobject.hasFlashPlayerVersion(global_flash_reqdVersion)) && (flash_browser.supports_basicSwfobjectEmbed))
						{			
							// Push Play 2008 - uses #shell not body			
							shell_class = (document.getElementById('shell').className ? document.getElementById('shell').className : '');			
							
							if (!shell_class)
							{								
								document.getElementById('shell').className = 'flash';
							}
							else if (!shell_class.match('flash'))
							{
								document.getElementById('shell').className += ' flash';	
							}
						}									
						
						/*
						apply_page_scroll_fixes(
																			document.getElementById('flash-content-1')
																		, document.getElementById('flash-content-2')
																		, document.getElementById('flash-content-3')																		
																	  );
						*/
						match_panel_heights();
						break;		
				}					
			}
			
			activate_faux_links(); // run last
		}
	}	
	
	add_load_event(init); // window.onload = init;	
	
/*		
	@ add_nav_hovers
	@ primary_nav_hover
	---------------------------------------------------------------	
	_______________________________________________________________
*/

	function add_nav_hovers(nav_id)
	{	
		// check that the container exists
		if (document.getElementById(nav_id))
		{
			var images = document.getElementById(nav_id).getElementsByTagName('img');
		}				
		
		if (images)
		{				
			for (var i=0; i<images.length; i++)
			{
				img_src = images[i].src;
				
				if (img_src.match('-off.gif'))
				{
					var primary_img_path_end = img_src.indexOf('section');	
					var primary_img_path = img_src.substring(0, primary_img_path_end); // this calc is performed for every img but doesn't need to be
					
					// preload inline overstates
					window['linkImgHover_' + i] = new Image();					
					window['linkImgHover_' + i].src = img_src.replace('-off.gif', '-over.gif');
	
					if (nav_id == 'primary-nav')
					{
						// 	Mouse-dependent handlers
						// parentNode.parentNode.parentNode = img > span > span > A
						add_event(images[i].parentNode.parentNode, 'mouseover', primary_nav_hover, false);
						add_event(images[i].parentNode.parentNode, 'mouseout', primary_nav_hover, false);
		
						// 	Device independent handlers
						add_event(images[i].parentNode.parentNode, 'focus', primary_nav_hover, false);
						add_event(images[i].parentNode.parentNode, 'blur', primary_nav_hover, false);		
					}
					else
					{
						// 	Mouse-dependent handlers
						add_event(images[i].parentNode.parentNode.parentNode, 'mouseover', generic_nav_hover, false);
						add_event(images[i].parentNode.parentNode.parentNode, 'mouseout', generic_nav_hover, false);
		
						// 	Device independent handlers
						add_event(images[i].parentNode.parentNode.parentNode, 'focus', generic_nav_hover, false);
						add_event(images[i].parentNode.parentNode.parentNode, 'blur', generic_nav_hover, false);		
					}							
				}
			}
		}
	}
	
	function primary_nav_hover(e)
	{
		// identify 'this'
		
		if (!e) 
		{
			var e = window.event; // http://www.quirksmode.org/js/events_properties.html
		}
		
		// 
		
		if (e.target) 
		{
			targ = e.target;
		}
		else if (e.srcElement) 
		{
			targ = e.srcElement;
		}
		if (targ.nodeType == 3) 
		{	
			// defeat Safari bug
			targ = targ.parentNode;
		}
		
		// IE
		
		if (whichbrowser.isIE6up)	
		{
			_this = targ;
		}
		else
		{
			_this = this;	
		}	
		
		// some more ie checking (while loop update)
		
		while (_this.tagName.toLowerCase() != 'a')
		{
			_this = _this.parentNode;	
		}
	
		// interaction behaviours
		
		var img_src = _this.getElementsByTagName('img')[0].src;		

		var primary_nav_hover = document.getElementById('primary-nav').getElementsByTagName('ul')[0];	

		if ((e.type == 'mouseover') || (e.type == 'focus'))
		{			
			// _this.parentNode.parentNode = a > LI.nav-[x]
			primary_nav_hover.className = _this.parentNode.className.substring(0,5) + '-hover';
			_this.getElementsByTagName('img')[0].src = img_src.replace('-off.gif', '-over.gif');					
		}
		else if ((e.type == 'mouseout') || (e.type == 'blur'))
		{
			primary_nav_hover.className = '';	
			_this.getElementsByTagName('img')[0].src = img_src.replace('-over.gif', '-off.gif');	
		}		
	}	
	
/*		
	@ add_print_button
	@ print_page
	---------------------------------------------------------------	
	_______________________________________________________________
*/		
	
	function add_print_button()
	{
		if (!document.getElementById || !document.getElementsByTagName || !document.createElement || !document.replaceChild)
		{
			return;
		}		
		if (document.getElementById('print'))
		{
			return;
		}
		
		if ((document.getElementById('tools')) && (printable))
		{		
			var li = document.createElement('li');
					li.setAttribute('id', 'print');			

			var span = document.createElement('span');
					span.className = 'a blur';

					add_event(span, 'click', print_page, false);				
					
			var text = document.createTextNode('Print this Page');
			
					span.appendChild(text);					
					li.appendChild(span);					
					
			if (!(document.getElementById('tools').getElementsByTagName('ul')[0]))
			{
				// if no existing list, create new list
				var ul = document.createElement('ul');						
				ul.appendChild(li);
				document.getElementById('tools').appendChild(ul);
			}			
			else
			{
				// else add to exisitng list	
				document.getElementById('tools').getElementsByTagName('ul')[0].appendChild(li);
			}
		}
	}
	
	function print_page()
	{
		window.print();
	}	
	
/*		
	@ apply_page_scroll_fixes
	---------------------------------------------------------------	
	"Firefox 2 has a floating hitarea issue with transparent swfs after page scrolling, 
	but once you have clicked on the swfs the hitarea re-aligns.
	Its not the end of the world, but is a bit confusing if you don't know what's going on."
	src: SM
	_______________________________________________________________
*/	
	
	function apply_page_scroll_fixes()
	{
		if ((whichbrowser.isFirefox) && (whichbrowser.versionMinor == 2))
		{		
			if (arguments.length > 0)
			{
				// save args as global vars for reference by toogle_flash via scroll event listener										
				window.flash_els = new Array();
				var f = 0;
				
				for (var a=0; a<arguments.length; a++)
				{					
					if (arguments[a]) // if element exists
					{
						window.flash_els[f] = arguments[a];
						f++;
					}
				}	
			}	
			
			for (var f=0; f<window.flash_els.length; f++)
			{
				wrap_flash_in_iframe(window.flash_els[f]); // v2 solution
			}			
			
			//add_event(window, 'scroll', toggle_flash, false); // v1 solution
		}
	}
	
/*		
	@ toggle_flash
	---------------------------------------------------------------	
	Toggle specified flash off and back on using style="display:none/block;"
	_______________________________________________________________
*/			
	
	function toggle_flash()
	{
		for (var f=0; f<window.flash_els.length; f++)
		{
			window.flash_els[f].getElementsByTagName('object')[0].style.display = 'none'
			window.flash_els[f].getElementsByTagName('object')[0].style.display = 'block'			
		}
		//test: document.title += 'x';
	}
	
/*		
	@ wrap_flash_in_iframe
	---------------------------------------------------------------	
	http://www.quantumslip.com/archives/2006/09/flash_wmode_scr.html
	Rewritten by DS to run independently of jquery
	
	Further reading:
	http://bindzus.wordpress.com/2007/12/24/adding-dynamic-contents-to-iframes/
	_______________________________________________________________
*/		
	
	function wrap_flash_in_iframe(container_el)
	{
		//	Get the size of the flash object
		var object = container_el.getElementsByTagName('object')[0];
		var x = object.getAttribute('width');
		var y = object.getAttribute('height');
	
		// 	Create the iframe element
		var iframe = document.createElement('iframe');	
				iframe.className = 'flash-iframe';
				iframe.setAttribute('frameborder', '0');				
				iframe.setAttribute('marginwidth', '0');				
				iframe.setAttribute('marginheight', '0');				
				iframe.setAttribute('scrolling', '0');		
				
		//	Create a fallback message on the off-chance that iframes don't display
		//	(but can be created...)
		var	no_iframe = document.createTextNode('This iframe contains Flash content. ');
				iframe.appendChild(no_iframe);
				
		// 	Hide the ifrane for now
				iframe.style.display = 'none';						
	
		// 	Remove the old flash object	 
				container_el.removeChild(object);
			 
		//	Inject the iframe into the flash container 
				container_el.appendChild(iframe);
	 
		//	Set the dimensions of the iframe, and unhide it
				iframe.style.border = 'none';			
				iframe.setAttribute('width', (x + 'px'));	// so that content remains visible with CSS disabled
				iframe.setAttribute('height', (y + 'px')); // so that content remains visible with CSS disabled				
				iframe.style.width = (x + 'px');					
				iframe.style.height = (y + 'px');			
				iframe.style.display = 'block';		
				
		//	Identify the iframe document.body		
				if (iframe.contentDocument) // Firefox, Opera 
				{
					var iframe_doc = iframe.contentDocument;
				}
				
				if (iframe_doc)
				{
					//	"Calling the open method following by the close method will put the iframe's 
					//	document in such a state that you will be able to use the appendChild method."
					//	src: http://bindzus.wordpress.com/2007/12/24/adding-dynamic-contents-to-iframes/
					
							iframe_doc.open();
							iframe_doc.close();
							
					//	Inject the flash object into the iframe
							iframe_doc.body.appendChild(object);		
				}									
	}
	
/*	
   @ match_panel_heights()
	 @ getPadding()
	 @ getBottomMargin()
	 @ getStyle()
   ---------------------------------------------------------------
	 Match height of bottom panels on homepage.
	 
	 More info:
	 - /_documentation/updates.htm
	 - http://www.quirksmode.org/dom/getstyles.html
	 - http://www.howtocreate.co.uk/tutorials/javascript/domcss
	   (getComputedStyle and currentStyle are not supported by 
			Safari 2-, Konqueror 3.4- or Tkhtml Hv3)
   _______________________________________________________________
*/			

	function match_panel_heights()
	{
		if (!whichbrowser.isSafari2)
		{
			
			var panels = new Array();
			
					panels[0] = new Array();
					panels[0]['el'] = document.getElementById('panel-real-stories');
					panels[0]['height'] = panels[0]['el'].offsetHeight;		
					panels[0]['margin_bottom'] = getBottomMargin(panels[0]['el']);					
					panels[0]['body'] = new Array();
					panels[0]['body']['el'] = panels[0]['el'].getElementsByTagName('div')[0];			
					panels[0]['body']['height'] = panels[0]['body']['el'].offsetHeight;				
					panels[0]['body']['pad_height'] = getPadding(panels[0]['body']['el'], 'v');	
					
					panels[1] = new Array();
					panels[1]['el'] = document.getElementById('panel-discover-sport-and-rec');
					panels[1]['height'] = panels[1]['el'].offsetHeight;		
					panels[1]['margin_bottom'] = getBottomMargin(panels[0]['el']);						
					panels[1]['body'] = new Array();
					panels[1]['body']['el'] = panels[1]['el'].getElementsByTagName('div')[0];			
					panels[1]['body']['height'] = panels[1]['body']['el'].offsetHeight;				
					panels[1]['body']['pad_height'] = getPadding(panels[1]['body']['el'], 'v');									
								
					panels[2] = new Array();
	
					// top
					panels[2]['top'] = new Array();
					panels[2]['top']['el'] = document.getElementById('panel-kidzone');
					panels[2]['top']['height'] = panels[2]['top']['el'].offsetHeight;	
					panels[2]['top']['margin_bottom'] = getBottomMargin(panels[2]['top']['el']);						
					panels[2]['top']['body'] = new Array();
					panels[2]['top']['body']['el'] = panels[2]['top']['el'].getElementsByTagName('div')[0];			
					panels[2]['top']['body']['height'] = panels[2]['top']['body']['el'].offsetHeight;				
					panels[2]['top']['body']['pad_height'] = getPadding(panels[2]['top']['body']['el'], 'v');					
					
					// btm
					panels[2]['btm'] = new Array();
					panels[2]['btm']['el'] = document.getElementById('panel-shop');
					panels[2]['btm']['height'] = panels[2]['btm']['el'].offsetHeight;	
					panels[2]['btm']['margin_bottom'] = getBottomMargin(panels[2]['btm']['el']);					
					panels[2]['btm']['body'] = new Array();
					panels[2]['btm']['body']['el'] = panels[2]['btm']['el'].getElementsByTagName('div')[0];			
					panels[2]['btm']['body']['height'] = panels[2]['btm']['body']['el'].offsetHeight;				
					panels[2]['btm']['body']['pad_height'] = getPadding(panels[2]['btm']['body']['el'], 'v');					
					
					// the first panel can't be altered, because it has it's own min-height, so any changes will be made to the second panel
					panels[2]['height'] = panels[2]['top']['height'] + panels[2]['btm']['height'];
					panels[2]['margin_bottom'] = panels[2]['top']['margin_bottom'];		
					panels[2]['body'] = new Array();
					panels[2]['body']['el'] = panels[2]['btm']['body']['el'];				
					panels[2]['body']['height'] = panels[2]['btm']['body']['height'];				
					panels[2]['body']['pad_height'] = panels[2]['btm']['body']['pad_height'];
					
			// find out what the max height is
			var panel_max_height = 0;		
			for (var p=0; p<panels.length; p++)
			{
				if (panels[p]['height'] > panel_max_height)
				{
					panel_max_height = panels[p]['height'];
					tallest_panel = p;
				}
			}							
					
			// set a min-height equal to the max height		
			for (var p=0; p<panels.length; p++)
			{	
				// if the .panel height is less than the max height..
				if (panels[p]['height'] < panel_max_height)
				{
					panels[p]['height_increase'] = (panel_max_height - panels[p]['height']);
					
					// calculate the new .panel .body height						
					// the .body height must be increased by this amount, less any vertical padding on this element	
					
					// calculate the browser-dependent adjustment
					
					// default
					browser_panel_top_up = 0;
					
					if ((whichbrowser.isIE) && (!whichbrowser.isIE7up)) // ie6
					{						
						browser_panel_top_up = 4;										
					}						
					
					// scenario-dependent
					if ((p < 2) && (tallest_panel == 2))
					{
						browser_panel_top_up += panels[2]['margin_bottom'];
						
						if (whichbrowser.isFirefox) // ff2/3
						{		
							if (panels[2]['btm']['height'] > panels[2]['top']['height'])
							{
								browser_panel_top_up -= 2; // if panel 2 btm is the taller one	
							}
							else if (panels[2]['top']['height'] > panels[2]['btm']['height'])
							{
								browser_panel_top_up -= 1; // if panel 2 top is the taller one
							}						
						}			
						else if ((whichbrowser.isIE) && (!whichbrowser.isIE7up)) // ie6
						{
							browser_panel_top_up -= 3;
						}
						else if ((whichbrowser.isIE) && (whichbrowser.isIE7up)) // ie7
						{
							browser_panel_top_up -= 2;
						}						
						else if (whichbrowser.isSafari) // s3, gc
						{						
							browser_panel_top_up -= 2;		
						}							
					}									
					else if ((p == 2) && (tallest_panel < 2))
					{
						browser_panel_top_up -= panels[p]['margin_bottom'];	
						
						if (whichbrowser.isFirefox) // ff2/3
						{						
							browser_panel_top_up += 1;		
						}					
						else if ((whichbrowser.isIE) && (!whichbrowser.isIE7up)) // ie6
						{						
							browser_panel_top_up += 2;		
						}
						else if ((whichbrowser.isIE) && (whichbrowser.isIE7up)) // ie7
						{
							browser_panel_top_up += 2;
						}						
						else if (whichbrowser.isSafari) // s3, gc
						{						
							browser_panel_top_up += 2;		
						}					
					}	
					
					// the height difference is the max height less the panel height, with a browser-specific adjustment			
					panels[p]['body']['height_increase'] = panels[p]['height_increase'] - panels[p]['body']['pad_height'] + browser_panel_top_up;	
					
					// the new height is the old height + the height difference
					panels[p]['body']['new_height'] = panels[p]['body']['height'] + panels[p]['body']['height_increase'];											
					
					// 'prop' the panel open by assigning a min-height to the .panel .body	
					if ((whichbrowser.isIE) && (!whichbrowser.isIE7up))
					{
						// height for IE6
						panels[p]['body']['el'].style.height = panels[p]['body']['new_height'] + 'px';
					}
					else
					{
						// min-height for everyone else
						panels[p]['body']['el'].style.minHeight = (panels[p]['body']['new_height']) + 'px';		
					}							
					//panels[p]['body']['el'].style.color = 'red';				
				}
				/*
				Test output
				output = '<ul style="background:white;">';
				output += '<li>Panel #' + p + ' (Panel #' + tallest_panel + 'is tallest @ ' + panel_max_height + 'px)</li>';			
				output += '<li>.panel: old gross height = <br />' + panels[p]['height'] + '</li>';	
				output += '<li>.panel: height increase = <br />' + panels[p]['height_increase'] + '</li>';						
				output += '<li>.panel: new gross height = <br />' + panel_max_height + '</li>';					
				output += '<li>.body: old gross height = <br />' + panels[p]['body']['height'] + '</li>';									
				output += '<li>.body: new min-height = <br />' + panels[p]['body']['new_height'] + '</li>';	
				output += '<li>.body: height increase = <br />' + panels[p]['body']['height_increase'] + '</li>';								
				output += '</ul>';			
				document.getElementById('header').innerHTML += output;			
				*/
			}
		}
	}	
	
	function getPadding(el, type)
	{
		if ((whichbrowser.isIE) || (whichbrowser.isOpera))
		{
			if (type == 'h')
			{			
				padding = (getStyle(el, 'paddingLeft') + getStyle(el, 'paddingRight'));
			}
			else if (type == 'v')
			{	
				padding = (getStyle(el, 'paddingTop') + getStyle(el, 'paddingBottom'));
			}
		}
		else
		{
			if (type == 'h')
			{			
				padding = (getStyle(el, 'padding-left') + getStyle(el, 'padding-right'));
			}
			else if (type == 'v')
			{	
				padding = (getStyle(el, 'padding-top') + getStyle(el, 'padding-bottom'));
			}
		}
		return padding;		
	}
	
	function getBottomMargin(el)
	{
		if ((whichbrowser.isIE) || (whichbrowser.isOpera))
		{
			margin = getStyle(el, 'marginBottom');
		}
		else
		{
			margin = getStyle(el, 'margin-bottom');
		}
		return margin;
	}	
	
	function getStyle(el,styleProp)
	{	
		var x = el;
		
		if (x.currentStyle)
		{
			var y = x.currentStyle[styleProp];
		}
		else if (window.getComputedStyle)
		{
			var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
		}
		return parseInt(y); // eg 13px -> 13
	}