/**
 * Homepage
 *
 * @namespace PP.application
 * @class Homepage
 * @constructor
 */

PP.application.Homepage = function()
{    
    launchCarousel = function()
    {
        if ( ! $D.get( 'featured_projects' )  ) return;

		var animations = {
		    opacityOut: {
		         opacity: { from:1, to:0 } 
		    },
		    opacityIn: {
		         opacity: { from:0, to:1 } 
		    },
		    opacityThumbOut: {
		         opacity: { from:1, to:0.2 } 
		    },
		    opacityThumbIn: {
		         opacity: { from:0.2, to:1 } 
		    }
		}
		
		//animate featured copy on page load
		$D.get('featured_copy').innerHTML = $D.get("featured_1").innerHTML;
		var anim = new $Anim('featured_copy', animations.opacityIn, 1, PP.util.Easing.easeInStrong);
		anim.animate();

		//Set selected class on correct li element
		$D.batch($S.query('div#featured_projets_thumbnails ul li'), function (el) {
			// clear all classes on the li tags
			if($D.hasClass(el, 'selected')) {
    			var anim = new $Anim(el, animations.opacityThumbIn, 1, PP.util.Easing.easeOutStrong);
    			anim.animate();
			} else {
			    var anim = new $Anim(el, animations.opacityThumbOut, 1, PP.util.Easing.easeOutStrong);
    			anim.animate();
			}	
		});
		
		//Launch Carousel
		var carousel = new PP.widget.Carousel("featured_projects", {
          animation: { speed: 0.7 },
          isCircular: true, 
          numVisible: 1,
          autoPlayInterval: 5000
        });
        carousel.render(); // get ready for rendering the widget
        carousel.show();   // display the widget
        carousel.startAutoPlay() //start autoplay
		
		//Set Images (do this for better performance... i think :)
		$D.batch($S.query('div#featured_projects ol li img'), function (el) {
		    var alt = $D.getAttribute(el, 'alt');
		    $D.setAttribute(el, 'src', '/wp-content/themes/pp/images/featured/'+alt+'.jpg');
		});
		
		//Set Previous/Next Event Listeners
		$E.on($D.get('preveous_featured_page'), 'click', function (ev) {
			$E.preventDefault(ev);
			carousel.scrollBackward();
			carousel.stopAutoPlay();
			if ( typeof(restartAutoPlay) !== 'undefined' ) {
				clearTimeout(restartAutoPlay);
			}
		})
		$E.on($D.get('next_featured_page'), 'click', function (ev) {
			$E.preventDefault(ev);
			carousel.scrollForward();
			carousel.stopAutoPlay();
			if ( typeof(restartAutoPlay) !== 'undefined' ) {
				clearTimeout(restartAutoPlay);
			}
		})
		
		//Before Page Change Event
		carousel.on("beforePageChange", function () {
			var anim = new $Anim('featured_copy', animations.opacityOut, 1, PP.util.Easing.easeOutStrong);
			anim.animate(); 
		});
		
		//After Page Change Event
		carousel.on("pageChange", function (page) {
			var current_page = page+1;
			var featured_content = $D.get("featured_"+current_page).innerHTML;
			$D.get('featured_copy').innerHTML = featured_content;

			var anim = new $Anim('featured_copy', animations.opacityIn, 1, PP.util.Easing.easeInStrong);
			anim.animate(); 
			
			//Set selected class on correct li element
			$D.batch($S.query('div#featured_projets_thumbnails ul'), function (el) {
				var li = el.getElementsByTagName('li');
				// clear all classes on the li tags
				$D.batch(li, function (el) {
					if($D.hasClass(el, 'selected')) {
						$D.removeClass(el, 'selected');
						//Animate opacity out
						var anim = new $Anim(el, animations.opacityThumbOut, 1, PP.util.Easing.easeOutStrong);
            			anim.animate();
					}	
				});
				//Add selected class to correct li element
				$D.addClass(li[current_page-1], 'selected');
				//Animate Opacity In
				var anim = new $Anim(li[current_page-1], animations.opacityThumbIn, 1, PP.util.Easing.easeOutStrong);
    			anim.animate();
			})
			
			//Restart Auto Play
			restartAutoPlay = setTimeout(function(){
			    carousel.startAutoPlay();
			}, 10000);
			    
		});
		
		$D.batch($S.query('a.carousel-pager-item'), function (el) {
			$E.on(el, 'click', function(ev) {
				$E.preventDefault(ev);
				var el = $E.getTarget(ev);
				var parentAnchor = $D.getAncestorByTagName(el, "a");
				var href= $D.getAttribute(parentAnchor, 'href').replace("#", '');
				//Go to correct item
				carousel.scrollTo(href-1, true);
				carousel.stopAutoPlay();
				if ( typeof(restartAutoPlay) !== 'undefined' ) {
					clearTimeout(restartAutoPlay);
				} 
			});
			
		});
       
    };
    
    // Public Methods
    return {
        /**
         *sets event listener
         * 
         */
        init: function()
        {
            $E.onDOMReady(function() {
                launchCarousel();
            });
        }
    };
}().init();