// Radio 2 Carousel

glow.ready(function() {

	//page elements	
	var elements = {
		CarouselContainer: glow.dom.get("#carousel-container").css("overflow", "hidden").css("height", "252px"),
		CarouselScrollDown: glow.dom.get("#scroll-down"),
		CarouselScrollDownControl: glow.dom.get("#scroll-down a.control"),
		CarouselScrollUp: glow.dom.get("#scroll-up"),
		CarouselScrollUpControl: glow.dom.get("#scroll-up a.control")
	};
	
	/*console.log(  
    "PAGE ELEMENTS TO STYLE:\n" + 
    "\t" + "#carousel-container (affected rows)      = " + elements.CarouselContainer.length  + "\n" + 
    "\t" + "#scroll-down (affected rows)             = " + elements.CarouselScrollDown.length           + "\n" + 
    "\t" + "#scroll-down a.control (affected rows) 	 = " + elements.CarouselScrollDownControl.length       + "\n" +
	"\t" + "#scroll-up (affected rows) 				 = " + elements.CarouselScrollUp.length       + "\n" +
	"\t" + "#scroll-up a.control (affected rows) 	 = " + elements.CarouselScrollUpControl.length       + "\n"
   );*/
	
	
	//settings
	var noOfItems 			= glow.dom.get("#video-items li").length;	
	var itemSize 			= 84; //<li> height of 84px (includes 2px border)	
	var totalHeight 		= noOfItems * itemSize;	
	var noToScroll 			= 3;		
	var pxToScroll 			= noToScroll * itemSize; //252px	
	var currPixelPosition 	= 0; //px number to start carousel from	
	var slideViews 			= parseInt(Math.ceil(totalHeight/pxToScroll || 0)); //number of slide views
	

	function createButtons() {	
		if(totalHeight > pxToScroll) {			
			var scrollDownArrow	                             =	'<a href="#" class="control">' + 
                                                            	'<span>scroll down</span>' +
                                                            	'</a>';
			var scrollUpArrow	                             =	'<a href="#" class="control">' + 
                                                            	'<span>scroll up</span>' +
                                                            	'</a>';				
			//var html = glow.lang.interpolate( buttonsTemplate, [data]);
      		//elements.CarouselScrollDown.append( html );
			elements.CarouselScrollDown.append( scrollDownArrow );
			elements.CarouselScrollUp.append( scrollUpArrow );
			
			showButton();
		}
	
	}
		
	
	function buttonsHandler() {
		glow.events.addListener('#scroll-up a', 'click', function () { 
			startScroll(currPixelPosition + pxToScroll);
			return false;
		});
		
		glow.events.addListener('#scroll-down a', 'click', function () {  
			startScroll(currPixelPosition - pxToScroll); 
			return false;
		});
	}
	
	
	function startScroll(scrolling) {

		var endScroll = parseInt(Math.ceil(scrolling/pxToScroll || 0));
	
		//if at beginning of list, stop scrolling up
		if(scrolling > 0) {
			glow.anim.css("#video-items", 1, {
				"top": {to: "0px"} 
				}, 
				{
					tween: glow.tweens.easeBoth()
				}
			).start();
			
			currPixelPosition = 0;
		}  
		
		//if at the end of list, stop scrolling down
		else if (endScroll < -(slideViews -1)) {
		
			glow.anim.css("#video-items", 1, {
				"top": {to: currPixelPosition + "px"}
				}, 
				{
					tween: glow.tweens.easeBoth()
				}
			).start();
		}

		else {
			glow.anim.css("#video-items", 1, {
				"top": {to: scrolling + "px"}
				}, 
				{
					tween: glow.tweens.easeBoth()
				}
			).start();
			
			currPixelPosition = scrolling;
		}  
		
		showButton(endScroll);

	} // EoF
	

		/*glow.events.addListener(startScroll, "complete", function(eds) {
    		showButton(eds);
  		});	*/	
	
	

	function showButton (es) {		
		var isDownActive = glow.dom.get("#scroll-down a.control");
		var isUpActive = glow.dom.get("#scroll-up a.control");
		
		var upActive = ( currPixelPosition < 0 ) ? isUpActive.css("display", "block") : isUpActive.css("display", "none"); 		
		
		var downActive = ( es < -(slideViews -2) ) ? isDownActive.css("display", "none") : isDownActive.css("display", "block"); 
			
		return upActive;
		return downActive;	
	}
	
	function build() {  
    	createButtons(); 
    	buttonsHandler();  
  	}  
  	build();

});