var navImage1 = new Element('img',{ src:'images/redesign/main-nav-button.gif' })
var navImage2 = new Element('img',{ src:'images/redesign/main-nav-button-on.gif' })
var articleSelectorMarker = new Element('img',{ src:'images/redesign/article-selector-marker.png' })
var articleSelectorMarkerArrow = new Element('img',{ src:'images/redesign/article-selector-marker-arrow.png' })
var ratingStarsOn = new Element('img',{ src:'images/redesign/stars-on.png' })
var ratingStarsOff = new Element('img',{ src:'images/redesign/stars-off.png' })
var ratingStarsHalf = new Element('img',{ src:'images/redesign/stars-half.png' })
var ratingStarsLargeOn = new Element('img',{ src:'images/redesign/stars-large-on.png' })
var ratingStarsLargeOff = new Element('img',{ src:'images/redesign/stars-large-off.png' })

var currentSelectorIndex;
var currentRecipeBrowserIndex;
var currentRecipeSwitcherIndex;

//window.addEvent('domready', function() {
function domReadyGo() {
	/* PlaceholderInput implementation */
	/* for markup #1 */
	$$('input[placeholder]').each(function(el) {
		new PlaceholderInput(el);
	});
	
	/* PlaceholderInput implementation */
	/* for markup #2 */
	$$('label.placeholder').each(function(el) {
	var target = $pick($(el.get('for')), el.getNext());
	if (target && (target.get('type') == 'text' || target.get('tag') == 'textarea')) {
		target.set('placeholder', el.get('text'));
		el.destroy();
		new PlaceholderInput(target);
		}
	});
	
	
	/* Top menu rollovers */
	function navOn(navIndex) {
		$('nav-item-' + navIndex).addClass('nav-item-hover');
		$('nav-link-' + navIndex).addClass('nav-item-anchor-hover');
	}
	function navOff(navIndex) {
		$('nav-item-' + navIndex).removeClass('nav-item-hover');
		$('nav-link-' + navIndex).removeClass('nav-item-anchor-hover');
	}
	
	var navFlyouts = $$('div[class=nav-flyout-container]');
	navFlyouts.each(function(navFlyout) {
		navFlyout.setStyle('visibility', 'hidden'); // Destroy the CSS hover effects, otherwise the flyout delay won't work
	});
	
	var navItems = $$('li[id^=nav-item-]');
	var navFlyoutDelay;
	navItems.each(function(navItem) {
		// Switch the menu item background images
		var navIndex = navItem.id.substring(navItem.id.lastIndexOf('-') + 1); // Get the index of the nav item
		$('nav-item-' + navIndex).addEvent('mouseover', function() { navOn(navIndex); } );
		$('nav-item-' + navIndex).addEvent('mouseout', function() { navOff(navIndex); } );		
		
		// Switch the flyouts on and off
		var navFlyout = navItem.getElement('div[class=nav-flyout');
		navItem.addEvent('mouseenter', function(navmouseover) {
			// Delay the flyout just in case the user has briefly passed over the navigation item
			if (navFlyout != null)
				navFlyoutDelay = navFlyout.setStyle.delay(250, navFlyout, new Array('visibility', 'visible'));
		});
		navItem.addEvent('mouseleave', function() {
			if (navFlyout != null) {
				if (navFlyoutDelay) {
					$clear(navFlyoutDelay); // Clear the flyout delay timer
				}
				navFlyout.setStyle('visibility', 'hidden');
			}
		});
	});

	/* Article selector 'sticky' effect */
	var selectorLinkTags = $$('div[class*=article-selector-link]');
	var totalArticleSelectorItems = selectorLinkTags.length;
	if (totalArticleSelectorItems > 0) {
		var i = 0;
		selectorLinkTags.each(function(selectorLink) {
			i++;
			var markerId = 'marker-arrow-' + i;
			var markerElement = new Element('img', {
				'id': markerId,
				'src': 'images/redesign/article-selector-marker-arrow.png',
				'width': '21px',
				'height': '50px',
				'styles': {
					'position': 'absolute',
					'float': 'left',
					'clear': 'both',
					'left': '209px',
					'z-index': '2',
					'display': 'none'
				}
			});
			
			// Inject the marker arrow into the DOM
			markerElement.inject(selectorLink, 'top');
			
			// If first item then display its marker
			if (i == 1) {
				currentSelectorIndex = i;
				toggleArticleSelectorImages(currentSelectorIndex, true);
			}
			
			// Add the mouseenter events
			selectorLink.addEvent('mouseenter', function() {
				if (cycleArticleSelectorId) {
					$clear(cycleArticleSelectorId); // Switch off the article cycler
				}
				toggleArticleSelectorImages(currentSelectorIndex, false); // Hide the previous images
				currentSelectorIndex = selectorLink.id.substring(selectorLink.id.lastIndexOf('-') + 1); // Update the currentSelectorIndex
				toggleArticleSelectorImages(currentSelectorIndex, true); // Show the new images
			})
		});
	
		// Cycle through the articles in the article selector every 5 seconds
		function cycleArticleSelector() {
			toggleArticleSelectorImages(this.counter, false);
			this.counter++;
			if (this.counter > totalArticleSelectorItems) {
				this.counter = 1;
			}
			currentSelectorIndex = this.counter; // Update the currentSelectorIndex
			toggleArticleSelectorImages(this.counter, true);
		}
		var totalArticleSelectorItems = selectorLinkTags.length;
		var cycleArticleSelectorId = cycleArticleSelector.periodical(5000, { counter: 1 });
	}

	function toggleArticleSelectorImages(selectorId, show) {
		if (show) {
			cssDisplay = 'block';
			$('article-selector-link-' + selectorId).addClass('article-selector-item-on'); // Show the marker
		} else {
			cssDisplay = 'none';
			$('article-selector-link-' + selectorId).removeClass('article-selector-item-on'); // Hide the marker
		}
		$('article-selector-' + selectorId).setStyle('display', cssDisplay); // Toggle the main image
		$('marker-arrow-' + selectorId).setStyle('display', cssDisplay); // Toggle the arrow
	}
	
	// Check/clear ingredients toggle for recipe pages
	if ($('ingredients-check-all-checkbox')) {
		$('ingredients-check-all-checkbox').addEvent('click', function() {
			$$('.ingredients-checkbox').each(function(el) {
				el.checked = $('ingredients-check-all-checkbox').checked;
			});
		});
	}
	
	/* Add navigation scrollbars to any recipe section browsers 
	   (JavaScript is used to set this CSS property, because if it's set in the CSS and JavaScript is disabled, 
	   the recipes get hidden when mousing over the left scrollbar, causing the right scrollbar to be unusable) */
		
	/*var recipeBrowsers = window.frames["video-browse-list"].document.getElementById('recipe-browser');
	    alert('halllo length = ' + recipeBrowsers.length);	*/
		
	var recipeBrowsers = $$('ul[class=recipe-browser]');
	if (recipeBrowsers.length > 0) {
		recipeBrowsers.each(function(recipeBrowser) {
			recipeBrowser.addClass('recipe-browser-scroller');
		});
		
		/* Recipe section browser 'sticky' effect */
		var recipeBrowserNavItems = $$('li[id*=recipe-browser-item-]');
		var totalRecipeBrowserItems = recipeBrowserNavItems.length;
		if (totalRecipeBrowserItems > 0) {
			var i = 0;
			recipeBrowserNavItems.each(function(recipeBrowserItem) {
				i++;
				recipeBrowserItem.removeClass('hoverable'); // Switch off the CSS hover effect that toggles the right-hand list
				recipeBrowserItem.addClass('recipe-browser-nav-item-scrolling'); // Reduce the width of the nav item to accomodate the scrollbar (not present when JavaScript is switched off)
					
				// If first item then display its marker
				if (i == 1) {
					currentRecipeBrowserIndex = i;
					toggleRecipeBrowserItems(currentRecipeBrowserIndex, true);
					window.frames["BrowseRecipeTopicRecipes"].location.href = recipeBrowserItem.getElement('a').href;
				}
				
				// Add the mouseover events
				recipeBrowserItem.addEvent('click', function(event) {
					toggleRecipeBrowserItems(currentRecipeBrowserIndex, false); // Hide the, previous images
					currentRecipeBrowserIndex = recipeBrowserItem.id.substring(recipeBrowserItem.id.lastIndexOf('-') + 1); // Update the currentRecipeBrowserIndex
					toggleRecipeBrowserItems(currentRecipeBrowserIndex, true); // Show the new images
					//var frame = $$('iframe[id=iframeTopicRecipes]');
					//frame.location.href = "http://localhost/FoodTV/BrowseRecipeTopicSearch.aspx?topic=Drinks";
					
					window.frames["BrowseRecipeTopicRecipes"].location.href = recipeBrowserItem.getElement('a').href;
					event.stop();
				})
			});
		}
	}
	
	function toggleRecipeBrowserItems(recipeBrowserId, show) {
		if (show) {
			//cssVisibility = 'visible';
			$('recipe-browser-item-' + recipeBrowserId).getElement('a').addClass('recipe-browser-nav-item-selected'); // Show the nav marker
		} else {
			//cssVisibility = 'hidden';
			$('recipe-browser-item-' + recipeBrowserId).getElement('a').removeClass('recipe-browser-nav-item-selected'); // Hide the marker
		}
		//$('recipe-browser-recipe-' + recipeBrowserId).setStyle('visibility', cssVisibility); // Toggle recipes in right-hand scrolling pane
	}
	
	/* Show the first 100 characters of the recipe feedback quotes 
	   and include a 'Read more' link to view the remaining text */
	var recipeQuotes = $$('div[class=recipe-comments-box] blockquote');
	recipeQuotes.each(function(recipeQuote) {
		var recipeQuoteTruncated = recipeQuote.get('text').substring(0, 99);
		recipeQuoteTruncated = recipeQuoteTruncated.substring(0, recipeQuoteTruncated.lastIndexOf(' ')) + '..." ';
		var readMore = new Element('a', {'href': '#', 'class': 'read-more', 'html': 'Read more <span style="display: none;">' + recipeQuote.get('text') + '</span>'});
		readMore.addEvent('click', function(event) {
			recipeQuote.set('text', $(this).getElement('span').get('text') + '"');
			event.stop();
		});
		recipeQuote.set('text', recipeQuoteTruncated);
		readMore.inject(recipeQuote, 'bottom');
	});
	
	/* Set the average rating when the link is clicked */
	var averageRatingLink = $('average');
	var averageRating = '70%'; // Set the default value for the average rating
	if (averageRatingLink) {
		averageRatingLink.addEvent('click', function(event) {
			/* AJAX CODE TO SET THE AVERAGE RATING GOES HERE */
			$$('span[class=ratingFill]')[0].setStyle('width', averageRating);
			event.stop();
		});
	}
	
	/* Recipe switcher 'sticky' effect */
	var recipeSwitcherLinks = $$('a[class*=recipe-switcher-link]');
	var totalRecipeSwitcherLinks = recipeSwitcherLinks.length;
	if (totalRecipeSwitcherLinks > 0) {
		var i = 0;
		recipeSwitcherLinks.each(function(recipeSwitcherLink) {
			i++;
			recipeSwitcherLink.removeClass('recipe-switcher-link-hoverable'); // Switch off the CSS hover effect
			
			// If first item then display its marker
			if (i == 1) {
				currentRecipeSwitcherIndex = i;
				toggleRecipeSwitcherItems(currentRecipeSwitcherIndex, true);
			}
			
			// Add the click events
			recipeSwitcherLink.addEvent('click', function(event) {
				toggleRecipeSwitcherItems(currentRecipeSwitcherIndex, false); // Hide the previous images
				currentRecipeSwitcherIndex = recipeSwitcherLink.id.substring(recipeSwitcherLink.id.lastIndexOf('-') + 1); // Update the currentRecipeBrowserIndex
				toggleRecipeSwitcherItems(currentRecipeSwitcherIndex, true); // Show the new images
				event.stop();
			})
		});
	}
	/* Add the click event to the recipe switcher 'next recipe' link */
	var recipeSwitcherNextRecipeLink = $('recipe-switcher-next-recipe');
	if (recipeSwitcherNextRecipeLink) {
		recipeSwitcherNextRecipeLink.addEvent('click', function(event) {
			toggleRecipeSwitcherItems(currentRecipeSwitcherIndex, false); // Hide the previous images
			if (currentRecipeSwitcherIndex == totalRecipeSwitcherLinks) {
				currentRecipeSwitcherIndex = 1;
			} else {
				currentRecipeSwitcherIndex++;
			}
			toggleRecipeSwitcherItems(currentRecipeSwitcherIndex, true); // Show the new images
			event.stop();
		});
	}
	
	/* Toggle the visibility of the recipe switcher images */
	function toggleRecipeSwitcherItems(recipeSwitcherId, show) {
		if (show) {
			cssVisibility = 'visible';
			$('recipe-switcher-link-' + recipeSwitcherId).addClass('recipe-switcher-link-selected'); // Change the link style
		} else {
			cssVisibility = 'hidden';
			$('recipe-switcher-link-' + recipeSwitcherId).removeClass('recipe-switcher-link-selected'); // Default link style
		}
		$('recipe-switcher-recipe-' + recipeSwitcherId).setStyle('visibility', cssVisibility); // Toggle recipes
	}
}