/**
 * Google Search Panel - Tab onClick functions
 */
function google_type(panel_id) {
	var i;
	var display;
	var currPanelVal;
	var currPanel;
	var newPanelVal;
	var newPanelForm;
	
	// get value of current open panel
	var googlePanels = new Array('VM-google-bar-web', 'VM-google-bar-loc', 'VM-google-bar-vms', 'VM-google-bar-kel');
	
	for (i=0; i<=googlePanels.length; i++) {
		display = document.getElementById(googlePanels[i]).style.display;
		if (!display) {
			currPanel = 'VM-google-bar-web';
			currPanelVal = document.getElementById('VM-frmGoogleWeb').q.value;
			break;
		}
		else if (display=='block'){
			currPanel = googlePanels[i];
			
			if (typeof document.getElementById(googlePanels[i]).getElementsByTagName('form')[0].q == 'undefined') {
				if (typeof document.getElementById(googlePanels[i]).getElementsByTagName('form')[0].siteSearchQuery != 'undefinded') {
					currPanelVal = document.getElementById(googlePanels[i]).getElementsByTagName('form')[0].siteSearchQuery.value;
				}
			} else {
				currPanelVal = document.getElementById(googlePanels[i]).getElementsByTagName('form')[0].q.value;
			}
			break;
		}
	}
	currPanelVal = (currPanelVal == 'Business or service e.g. Argos, plumbers, hotels') ? '' : currPanelVal;

	// hide all the panels
	document.getElementById('VM-google-bar-web').style.display = 'none';
	document.getElementById('VM-google-bar-loc').style.display = 'none';
	document.getElementById('VM-google-bar-vms').style.display = 'none';
	document.getElementById('VM-google-bar-kel').style.display = 'none';

	// display selected panel
	document.getElementById(panel_id).style.display = 'block';
	
	// populate newly selected form field with contents of previously selected field - submit form if web or site
	for (i=0; i<=googlePanels.length; i++) {
		display = document.getElementById(googlePanels[i]).style.display;
		if (display=='block') {
			newPanelForm = document.getElementById(googlePanels[i]).getElementsByTagName('form')[0];
			
			//newPanelVal = newPanelForm.q.value;
		
			if (typeof newPanelForm.q == 'undefined' && typeof newPanelForm.siteSearchQuery != 'undefined') {
				var textForm = newPanelForm.siteSearchQuery;
			} else {
				var textForm = newPanelForm.q;
			}
			
			if (googlePanels[i]!='VM-google-bar-loc') {
				textForm.focus();
			}
			if (currPanelVal) {
				textForm.style.color = '#333';
				textForm.value = currPanelVal;
				if (googlePanels[i]!='VM-google-bar-loc' && currPanel!='VM-google-bar-loc') {
					//alert('submit');
					newPanelForm.submit();
				}
			}
			break;
		}
	}
}



/**
 * Drop Down Menu in the header
 */
(function(){
	function dropdownMenu(){
		//Prepare the subNav element
		var subNav = $('VM-secondary-nav').addClassName('VM-slide').hide();
		
		//Adding a wrap for all the content inside the sub-nav, to fix
		//scriptaculaous slide down bug
		var div = new Element('div');
		subNav.immediateDescendants().each( function(elem) {
			div.insert(elem);
		}); 
		subNav.insert(div);
		
		//Listen for click event and apply the sliding effect
		$$('.VM-more-nav').each( function( elem ){ 
			elem.observe('click', function(event) {
				Event.stop(event);
				new Effect.toggle(subNav, 'slide', { duration: 0.3 });
			});
		});
	}
	
	dropdownMenu();
})();


/**
 * Form related 
 */
Event.observe(window, 'load', function() {
	var form = new VM.Form('content');
	form.exampleText();
});



var overlay = null;
function closeFlashTutorial(event) {
	if (typeof overlay != 'undefined')
		overlay.hide();
}

/** 
 * Customisation Module
 *	- initialize component window
 */
(function() {
	var windowMgr = null;
	
	var elemBookmarkButton = null, elemResetButton = null; //Buttons
	var elemCustomerLink = null, elemTutuorialLink = null;
	var elemBgThumbList = null; //the List with background thumbs
	
	function init() {
		
		updateCustomisation();
		
		//Initialise Widgets and adding them to the ComponentManager Class     
		Event.observe(window, 'load', function() {
			windowMgr = new VM.Component.WindowMgr(); 
		});
		
		
		
		elemBookmarkButton = $('VM-set-home');
		elemResetButton = $('VM-custom-reset');
		
		elemBgThumbList = $('VM-background-thumbs');
		elemCustomerLink = $('set-customer-link');
		elemTutuorialLink = $('VM-video-guide');
		
		Event.observe(window, 'load', function() {
			setTutorialControl();
		});

		setBackgroundControl();
		
		//setHomepageControl();
		
		setResetControl();
		
		setCustomerControl();
	};
	
	function updateCustomisation() {
		if (typeof cookieUtility == 'undefined') {
			return;
		}
		var layoutStr = cookieUtility.get('vmhp');
		
		if (layoutStr != null && userLayoutStr != layoutStr) {
			location.reload(true);
		}
	}
	
	//Set as Customer
	function setCustomerControl() {
		if (elemCustomerLink) {
			elemCustomerLink.observe('click', function(event) {
				Event.stop(event);
				if (typeof cookieUtility != null) {
					cookieUtility.add('vmhp-legacy_company', 'customer');
					location.reload(true);
				}
			});
		}
	}
	
	//Reset the page by deleting the cookie
	function setResetControl() {
		elemResetButton.observe( 'click', function(event) {
			Event.stop(event);
			var qus = 'Clicking reset removes all the changes you have made to the page. Are you sure?';
			if( window.confirm(qus) ) {
				if (typeof cookieUtility != null) {
					cookieUtility.empty();
					location.reload(true);
				}
			}
		});
	}
	
	//Setup a overlay dialog box for the flash video
	function setTutorialControl() {
		var dialog = new Element('div', { id: 'flash-tutorial-container' } );
		overlay = new VM.DialogOverlay(dialog);
		
		embedFlash( "flash-tutorial-container", 
			"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0",
			"845","500", 
			"VM_VideoGuide_v3","middle",
			"http://www.virginmedia.com/inc/hp/flash/tutorial/VM_VideoGuide_v3.swf","high","#000000","transparent");
		elemTutuorialLink.observe('click', function(event) {
			Event.stop(event);
			overlay.show();
		});
		
		Event.observe(window, 'load', function() {
			elemTutuorialLink2 = $('VM-video-guide-footer');
			elemTutuorialLink2.observe('click', function(event) {
				Event.stop(event);
				overlay.show();
			});
		});
	}
	
	function setBackgroundControl() {
		
		var skinCookieName = 'vmhp-skin';
		
		var thumbClassName = 'VM-display-thumb';
	
		//change background
		(function() {		
			elemBgThumbList.select('li > div.VM-thumb > a, li > a').each( function(elem) {
				elem.observe('click', changeBackground);
			});
			function changeBackground(event){
				skinId = Event.element(event).readAttribute('href').slice(1);
				$$('body')[0].writeAttribute({ id: skinId });
				
				if(typeof cookieUtility != 'undefined') {
					cookieUtility.add(skinCookieName, skinId, 360);
				}
			};
		})();
		
		//Rollover Thumbnails for different backgrounds
		(function() {
			var showTips = false;
			
			elemBgThumbList.select('li > a, li > div.VM-thumb').each( function(elem) {
				elem.observe('mouseover', showThumbTooltips);
			});
			elemBgThumbList.select('li > a, li > div.VM-thumb').each( function(elem) {
				elem.observe('mouseout', function() {
					showTips = false;
				});
			});
			function showThumbTooltips(event) {
				Event.stop(event);
				elemBgThumbList.select('li').each( function(elem) {
					elem.removeClassName(thumbClassName);
				});
				
				var listElem = Event.findElement(event, 'li'); 

				listElem.addClassName(thumbClassName);
				
				showTips = true;
				
				function tooltip() {
					window.setTimeout( function() {
						if (!showTips) {
							listElem.removeClassName(thumbClassName);
						} else {
							tooltip();
						}
					}, 3000);
				}
				tooltip();
			};
		})();
	}
	
	function setHomepageControl() {
		elemBookmarkButton.observe('click', function(event){
			var link = Event.element(event);

			var title = window.document.title;
			var url = window.location.href;
			
			if (navigator.appVersion.charAt(navigator.appVersion.indexOf("MSIE") + 5) >= 5 && 
		        navigator.platform.indexOf("Win16") == -1 && 
				navigator.platform.indexOf("Mac") == -1 ) {

				Event.stop(event);
				
				link.style.behavior='url(#default#homepage)';
				link.setHomePage(url);	
			} else if (window.sidebar) {
		     	window.sidebar.addPanel(title, url, "");
		   	} else if (window.sidebar&&window.sidebar.addPanel) {
		    	 window.sidebar.addPanel(title,url,"");
			} else {
				Event.stop(event);
			}
		});
	}
	
	init();
})();


/**
 * Rollover and Carousel Module 
 * 	- Set the behaviour of the mouseover event for rollover & carousel elements
 *	- Rotator for the carousel
 */
( function() {
	function init() {
		//Lead-rollover & Lead Carousel actions
		$$('.lead-rollover > ul > li > a, #hp-lead-carousel > ul > li > a').each( function(element) {
			element.observe('mouseover', function(event) {
				var element = Event.element(event);

				element.up(3).select('ul > li').each( function(element) {
					element.removeClassName('selected');
				});
				
				element.up(1).addClassName('selected');
			});
		});
		
		//Mouseover & Mouseout event for the carousel
		$$('.lead-carousel > ul').each( function(element) {
			element.observe('mouseover', function(event) {
				element.addClassName('active');
			});
			element.observe('mouseout', function(event) {
				element.removeClassName('active');
			});
		});
		
		//Rotating Lead Carousel
		var carouselLists = $('hp-lead-carousel').down('ul');
		window.setInterval(function() {	
			if (!carouselLists.hasClassName('active')) {
				var currentItem = carouselLists.select('li.selected')[0];
				var nextItem = currentItem.next('li') || carouselLists.down();
					
				nextItem.addClassName('selected');
				currentItem.removeClassName('selected');
			} 
		}, 8000);
	}
	
	init();
})();


/**
 * Tabs Module
 * All the different variation of the tabs
 */
( function() {
	function init() {
		//Side Tab ( for TV listing and My Favourites )
		$$(	'#hp-favourites-favourites ul.content-ul > li > a.tab,' + 
			'#hp-tv-tvlistings ul > li > a.tab').each( function(tabSelector) {
				tabSelector.observe('click', function(event){
					Event.stop(event);
					
					parentLi = Event.element(event).up();
					
					if (parentLi.tagName == "A") {
						parentLi = parentLi.up();
					}
					
					parentLi.siblings().each( function(elem) {
						elem.removeClassName('selected');
					}); 
					
					parentLi.addClassName('selected');
				});
		});
		
		//Tab ( for Most Popular )
		var tabBlock = $$( '.triple-tabbed-list .tab-block');
		var tabSelectors = $$( '.triple-tabbed-list .tab-control > li > a');
		tabSelectors.each( function(tabSelector) {
			tabSelector.observe('click', function(event) {
				Event.stop(event);
			});
		});
		tabSelectors.each( function(tabSelector2) {
			tabSelector2.observe('mouseover', function(event) {
				Event.stop(event);
				
				var selector = Event.element(event);
				
				var id = selector.readAttribute('href').replace("#" , '');
				
				tabBlock.each( function(block) {
					if (block.identify() == id) {
						$(id).style.display = 'block';
					} else {
						block.style.display = 'none';
					}
				});
			});
		});
	}

	init();
})();



/**
 * Collapsible Form
 * Toggle the class name of the wrapper div 
 */
( function() {
	function init() {
		$$('a.form-expander').each( function(elem) {
			elem.observe('click', function(event) {
				Event.stop(event);
				
				var elem = Event.element(event);
				
				if (elem.up('div').hasClassName('collapsed')) {
					elem.up('div').removeClassName('collapsed');
				} else {
					elem.up('div').addClassName('collapsed');
				}
			});
		});
	}
	
	init();
})();



/**
 * Horizontal Carousel Module
 * It's a horizontal carousel that allow user to slide the left or right to see 
 * the next / previous items in the list with a selector show the position of the 
 * current element.
 */
( function() {
	function init() {
		$$('.image-carousel').each( function(elem) {
			var viewport = elem.select('.viewport')[0];
			var itemSelector = elem.select('.carousel-item-selector > ul')[0];
			
			var listItems = viewport.select('li');
			var itemCount = elem.select('.viewport > ul > li').size();
			var listElem = elem.select('.viewport > ul')[0];
			var itemWidth = listElem.getWidth() / itemCount;
			
			var currentIndex = 0;
			
			var inMotion = false;
			
			viewport.setStyle({ 
				overflow: 'hidden', 
				position: 'relative'
			}); 
			
			listItems.each( function(item, i) {
				var left = itemWidth * i;
				if (itemCount - 1 == i) left = -itemWidth;
				item.setStyle({
					position: 'absolute',
					left: left + 'px'
				});
			});

			//Slide Right Button
			elem.select('.arrow-right > a')[0].observe('click', function(event) {
				Event.stop(event);
				
				if (!inMotion) {	
					inMotion = true;
					
					currentIndex++;
					
					if (currentIndex >= itemCount) currentIndex = 0;
					
					selectItem(currentIndex, -1);
				}
			});
			
			//Left Right Button
			elem.select('.arrow-left > a')[0].observe('click', function(event) {
				Event.stop(event);

				if (!inMotion) {
					inMotion = true;
					
					currentIndex--;
					
					if (currentIndex < 0) currentIndex = itemCount - 1;
					
					selectItem(currentIndex, 1);
				}
			});
			
			//Selector Buttons
			elem.select('.carousel-item-selector > ul > li > a').each( function(selector) {
				
				selector.setStyle({ cursor: 'default' });
				
				selector.observe('click', function(event) {
					Event.stop(event);
				});
			});

			//Selecting the item and apply the move effect
			function selectItem(itemIndex, direction) {		
				itemSelector.select('li').each( function(listItem, index) {
					listItem.removeClassName('selected');
					if (itemIndex == index) listItem.addClassName('selected');
				});
				
				
				listItems.each( function(item, i) {
					var x = item.positionedOffset()[0] + itemWidth * direction;

					new Effect.Move(item, { 
						x: x , y: 0, mode: 'absolute', 
						queue: { limit: itemCount, scope: 'imagecarousel' },
						afterFinish: function(){
							var firstItem = (itemIndex == 0) ? itemCount - 1 : itemIndex - 1;
							var lastItem = (itemIndex == itemCount - 1) ? 0 : itemIndex + 1;
				
							var left = listItems[itemIndex].positionedOffset()[0] - itemWidth * direction;
							
							if (direction > 0) {
								listItems[firstItem].setStyle({ left: left + 'px' });
							} else {
								listItems[lastItem].setStyle({ left: left + 'px' });
							}
							
							inMotion = false;
						}
					});
				});
			}
		});	
	}

	init();
})();


/**
 * My Links Component
 */
( function() {
	function init() {
		myLinksElem = $('hp-favourite-mylinks');
		if (myLinksElem) {
			myLinks = new VM.Component.MyLinks(myLinksElem);
		}
	}

	init();
})();

/**
 * Sage Related Click Tracking
 * 
 * 
 * Description				format
 * ---------------------------------------------------------------
 * clicks-home flag			clicks/home/
 * customer type			1
 * <component>				(
 *   cid					xx
 *   column					1
 *   row					11
 *   <subcomponent>			(s
 *     subid				xx
 *     link #				11
 *   </ subcomponent>		s)
 * </ component>			)
 * 	MyLinks (special case)	-(name)
 */
(function() {
	
	var componentsKeys = [];
	var subComponentsKeys = [];
	var layout = [];
	var customerType = 0;
	
	function init() {
		if (typeof cKeysObj != 'undefined') {
			componentsKeys = cKeysObj;
		}
		if (typeof scKeysObj != 'undefined') {
			subComponentsKeys = scKeysObj;
		}
		if (typeof layoutObj != 'undefined') {
			layout = layoutObj;
		}
		if (typeof cusType != 'undefined') {
			customerType = cusType;
		}
		
		trackHeader();
		
		trackStaticContent();
		
		trackComponents();
		
		trackFooter();
	}
	
	function tracklink(str, event) {
		sage_ev(1, str);
		
		if (typeof vmsagedebug != 'undefined' && vmsagedebug) {
			event.stop();
			if (typeof console != 'undefined') {
				console.log(str);
			}
		}
	}
	
	function setClickTrack(element, cid, sid, outboundOnly) {
		element = $(element);
		
		if (!element) {
			return;
		}
		
		outboundOnly = typeof outboundOnly == 'undefined' ? true : outboundOnly;
		
		element.select('a').each( function(linkElem, linkNo) {
			if ( (outboundOnly && linkElem.readAttribute('href').charAt(0) != '#') ||
					!outboundOnly ) {
				linkElem.observe('click', function(event) {
					var str = 'clicks/home/' + customerType;
					str 	+= 	'(-' + cid + '-xx-xx' + 
								'-(s-' + sid + '-' + linkNo + '-s))';
					
					tracklink(str, event);
				});
			}
		});
		
		element.select('form').each( function(formElem, formNo) {
			formElem.observe('submit', function(event) {
				var str = 'clicks/home/' + customerType;
				str 	+= 	'(-' + cid + '-xx-xx' + 
							'-(s-' + sid + '-f' + formNo + '-s))';
				
				tracklink(str, event);
			});
		});
	}
	
	function trackStaticContent() {	
		setClickTrack('hp-lead-carousel', 'ls', 'ls');
		
		setClickTrack($$('#promoBox > .carousel-non-customer')[0], 'ls', 'cn');
		
		setClickTrack('weather-forecast', 'wt', 'wt');
		
		setClickTrack('hp-myvm', 'my', 'my');
		
		setClickTrack('hp-todaysHighlights', 'th', 'th');
	}
	
	function trackHeader() {
		var componentId = 'hd';
		
		//header - logo
		$$('#VM-header-block > a')[0].observe('click', function(event) {
			var str = 'clicks/home/' + customerType + '(-hd-xx-xx-(s-lo-00-s))';
			
			tracklink(str, event);
		});
		
		//header - tabs
		setClickTrack('VM-header-tabs', componentId, 'h0');
		
		//header - search
		setClickTrack('VM-google-bar', componentId, 'h1');
		
		//header - mainNav
		setClickTrack('VM-global-nav', componentId, 'h2');
		
		//header - subNav
		setClickTrack('VM-secondary-nav', componentId, 'h3');
		
		//header - customisation strip
		setClickTrack($$('.VM-customise')[0], componentId, 'h4', false);
	}
	
	function trackFooter() {
		var componentId = 'ft';
		
		//footer - sitemap
		setClickTrack($('VM-link-farm').select('.VM-site-links')[0], componentId, 'fm');
		
		//footer - helpful things
		setClickTrack($('VM-link-farm').select('.VM-help-links')[0], componentId, 'fh');
		
		//footer - products
		setClickTrack($('VM-link-farm').select('.VM-product-links')[0], componentId, 'fp');
		
		//footer - search
		setClickTrack('VM-mini-site-search', componentId, 'fs');
		
		//footer - global footer
		setClickTrack('VM-footer-legal-strip', componentId, 'fg');
	}
	
	function trackComponents() {
		//Component Titles
		componentsKeys.each( function(cKeys) {
			var component = $('hp-' + cKeys.cid);
			if (component){
				component.select('.component-title a').each( function (linkElem, linkNo) {
					if (linkElem.readAttribute('href').charAt(0) != '#') {
						linkElem.observe('click', function(event) {
							var pos = getPosition(cKeys.cid);
							var str	= 'clicks/home/' + customerType;
							str 	+= '(-' + cKeys.mcid + '-' + pos[0] + '-' + pos[1] + '-)';

							tracklink(str, event);
						});
					}
				});
			}
		});
		
		//Sub Components Links
		subComponentsKeys.each( function(subKeys) {
			var subComponent = $('hp-' + subKeys.cid + '-' + subKeys.sid );
			if (subComponent) {
				subComponent.select('a').each( function( linkElem) {
					var href = linkElem.readAttribute('href');
					if ( href && href.charAt(0) != '#' ) {
						linkElem.observe('click', function(event) {			
							var pos = getPosition(subKeys.cid);
							var linkNo = getLinkNo(subComponent, linkElem);
							var str	 = 'clicks/home/' + customerType;
							str 	+= '(-' + subKeys.mcid + '-' + pos[0] + '-' + pos[1] + '-';
							str		+= '(s-' + subKeys.msid + '-' + linkNo + '-s))';

							if (subComponent.identify() == 'hp-favourites-favourites') {
								str += '-(' + linkElem.innerHTML + ')';
							}
							
							tracklink(str, event);
						});
					} 
				});
				subComponent.select('form').each( function(formElem, formNo) {
					formElem.observe('submit', function(event) {
						var pos = getPosition(subKeys.cid);
						var formNo = getFormNo(subComponent, formElem);
						var str	 = 'clicks/home/' + customerType;
						str 	+= '(-' + subKeys.mcid + '-' + pos[0] + '-' + pos[1] + '-';
						str		+= '(s-' + subKeys.msid + '-f' + formNo + '-s))';

						tracklink(str, event);
					});
				});
			}
		});
		
		//Component Promotion Links
		componentsKeys.each( function(cKeys) {
			var component = $('hp-' + cKeys.cid);
			if (component){
				component.select('.promotion-strap a').each( function (linkElem, linkNo) {	
					if (linkElem.readAttribute('href').charAt(0) != '#') {
						linkElem.observe('click', function(event) {
							
							var pos = getPosition(cKeys.cid);
							var str	= 'clicks/home/' + customerType;
							str 	+= '(-' + cKeys.mcid + '-' + pos[0] + '-' + pos[1] + '-';
							str		+= '(s-ad-' + linkNo + '-s))';
							
							tracklink(str, event);
						});
					}
				});
			}
		});
		
		//Return an array [column, row] of a component
		function getPosition(cid) {
			var pos = [];
			$$('.column').each( function(column, colIndex) {
				column.select('.hp-component').each( function(component, rowIndex) {
					if ( component.identify() == 'hp-'+cid ) {
						pos = [colIndex, rowIndex];
					}
				});
			});
			return pos;
		}
		
		function getLinkNo(subComponent, linkElem) {
			var linkNo = 0, linkCount = 0;
			subComponent.select('a').each( function( curLinkElem) {
				if (curLinkElem == linkElem) {
					linkNo = linkCount;	
				}
				if (curLinkElem.readAttribute('href').charAt(0) != '#') {
					linkCount++;
				}
			});
			
			return linkNo;
		}
		
		function getFormNo(subComponent, formElem) {
			var formNo = 0, formCount = 0;
			subComponent.select('a').each( function( curFormElem) {
				if (curFormElem == formElem) {
					formNo = formCount;	
				}
				formCount++;
			});
			
			return formNo;
		}
	}

	Event.observe(window, 'load', init);
})();