/*globals $, $$, Asset, assetsUrl, SimpleSlideshow, window*/

var navImages,
	homeSlides,
	navHoverImages = [
		assetsUrl + 'k/kids_website/images/home/nav-hover-happy-kids-icon.png',
		assetsUrl + 'k/kids_website/images/home/nav-hover-create-icon.png',
		assetsUrl + 'k/kids_website/images/home/nav-hover-connect-icon.png',
		assetsUrl + 'k/kids_website/images/home/nav-hover-learn-icon.png',
		assetsUrl + 'k/kids_website/images/home/nav-hover-discover-icon.png',
		assetsUrl + 'k/kids_website/images/home/nav-hover-play-icon.png'
	];
	
imgPreload(navHoverImages);

window.addEvent('domready', function () {
	/*var slideshow = new SimpleSlideshow('home-slideshow', '#home-slideshow .slide', {
		showControls: true, 
		controlsContainer: $('home-slideshow-nav'),
		showTOC:false
	});*/
	
	//slideshow.start();
    var bannerFX = new ImageFaderFX($('home-slideshow'));
	bannerFX.play(6000);
    new FXController(bannerFX, $('home-slideshow-controls'));
    
    var quotesFX = new ImageFaderFX($('quotes-slide-show'));
    quotesFX.play(6000);
    new FXController(quotesFX, $('quotes-slideshow-controls'));

    var recognitionFX = new ImageFaderFX($('recognition-slide-show'), $$('.recognition-slide'));
    recognitionFX.play(6000);

	/*var recognition = new SimpleSlideshow('recognition-slide-show', '#recognition-slide-show .recognition-slide', {
		showControls: true, 
		controlsContainer: $('recognition-slideshow-nav'),
		showTOC:false
	});
	
	recognition.start();*/
	
    navImages = $$('.nav-link');
    
    setNavUI('nav-home');
    
    // set currentNav to the nav elem that corresponds the page that
	// we are on so that when the user mouse away from the navigation
	// we know which element to set as the highlighted nav element
	currentNav = $('nav-home');
	if (currentNav) {
		currentNav.addClass('current-page');
		currentNav.getSiblings(currentNav).removeClass('current-page');
	}
    
    // shows / hides content in green area
    navImages.addEvent('click', function () {

		var contentId = $(this.id.replace(/nav/, 'content'));

		// find sibling that is currently being shown on the DOM by 
		// searching for class active and hide it.
		contentId.getSiblings('.show').removeClass('show').addClass('hide');

		// show the selected content
		contentId.removeClass('hide').addClass('show');	
    });
    
    navImages.addEvent('mouseenter', function () {
    	
		var navID = $(this.id),
			imgSrc,
			hoverClasses,
			navSibling,
			navSiblingClasses,
			navSiblingSrc,
			contentId;
	
		if (!navID.hasClass('active-content')) {
			//imgSrc = this.src.replace(/nav/, 'nav-hover');
			
			hoverClasses = 'nav-link active-content ' + this.id + '-hover';
			
			navSibling = this.getSiblings('.active-content')[0];
			
			navSiblingClasses = 'nav-link ' + navSibling.get('id'),
			
			//navSiblingSrc = navSibling.get('src').toString().replace(/nav-hover/, 'nav'),
			contentId = $(this.id.replace(/nav/, 'content'));
			
			
			navID.set('class', hoverClasses);
			
			navID.set({
				'styles': {
					'z-index': 3
				}
				
			});
			
			navSibling.set('class', navSiblingClasses)
			
			navSibling.set({
				'styles': {
					'z-index': 1
				}
				
			});
			
			// find sibling that is currently being shown on the DOM by 
			// searching for class active and hide it.
			contentId.getSiblings('.show')
				.removeClass('show')
				.addClass('hide');
			
			// show the selected content
			contentId.removeClass('hide').addClass('show');	    	
			
	    }
    });
    
    /*
    navImages.addEvent('mouseleave', function () {
    	var navID = $(this.id),
    		imgSrc = this.src.replace(/nav-hover/, 'nav'),
    		hoverClass = this.id + '-hover';
    	
    	navID.setStyle('z-index', 1).set('src', imgSrc).removeClass(hoverClass).addClass(this.id);
    });
    */
    
    $('project-nav').fireEvent('mouseenter');
});