﻿/***************************************************************************************
*
* Main Carousel Module JavaScript Functions. Requires Disney Parks global.js and YUI library to function properly.
* Copyright (c) 2008 Walt Disney Internet Group.  All Rights Reserved.
*
****************************************************************************************/

WDPRO_LOADER.require("dom");
WDPRO_LOADER.require("event");
WDPRO_LOADER.require("carousel");


WDPRO_LOADER.addCallback(
	function(){		
		YAHOO.util.Event.onDOMReady( CarouselMediaSelect.init );
		YAHOO.util.Event.onDOMReady( CarouselMediaConfig );	
	}
);

function fadeNavButtons( strClassName, strOpacity, intOpacityValue ) {
	var $D = WDPRO.util.Dom;
	var fadeButtons = $D.setStyle( strClassName, strOpacity, intOpacityValue )
	return fadeButtons;
}

CarouselMediaSelect = {
	mediaItems: null,
	mediaItemsTotal: null,
	
	contentSpotlightItems: null,
	contentSpotlightItemsTotal: null,
	
	init:function(){		
			var $D = WDPRO.util.Dom;
			var $E = YAHOO.util.Event;			
			var listDiv	= $D.get("mediaCarouselListTarget");
			var listItem = listDiv.getElementsByTagName("li")[0];
			var incrementTotal = $D.getElementsByClassName('mediaItem', 'div', listItem).length;	// previously (var endNumofGroup = 4)
			CarouselSelect.mediaItems	= $D.getElementsByClassName('mediaItem', 'div');
			CarouselSelect.mediaItemsTotal = CarouselSelect.mediaItems.length;
		
			$D.setStyle( 'mediaPrev', 'opacity', 0.2 );				//hide previous and next buttons if there are 4 or less items
			$D.setStyle( 'mediaPrev', 'cursor', 'default' );
			if ( CarouselSelect.mediaItemsTotal <= 4 ) {
				$D.setStyle( 'mediaNext', 'opacity', 0.0 );
				$D.setStyle( 'mediaPrev', 'opacity', 0.0 );	
			}
			

			
	}
}



/******** start main carousel ********/
function CarouselMediaConfig() {			
		var $D = WDPRO.util.Dom;
		var $E = YAHOO.util.Event;
		//var $A = YAHOO.util.Anim;
		//var $M = YAHOO.util.Motion;
		
		var prev = $D.get("mediaPrev");
		var next = $D.get("mediaNext");
		var startNumofGroup = 1;
		var endNumofGroup = 4;
		
		var listDiv = $D.get("mediaCarouselListTarget");
		var list = listDiv.getElementsByTagName("ul")[0];
		var listItem = listDiv.getElementsByTagName("li")[0];
		var mediaItems = $D.getElementsByClassName('mediaItem', 'div');
		var mediaItemsTotal = mediaItems.length;		

		var incrementTotal = $D.getElementsByClassName('mediaItem', 'div', listItem).length;
		var totalWidth = list.offsetWidth;
		//alert('listItem.offsetWidth=' + listItem.offsetWidth);
		var adjustedMargins = 0;//parseInt( $D.getStyle( mediaItems,'margin-left' ) ) + parseInt( $D.getStyle( mediaItems,'margin-right' ) );
		var totalItemsWidth = (listItem.offsetWidth * (mediaItemsTotal) ) - adjustedMargins;	
		//alert("adjustedMargins=" + adjustedMargins);
		//alert('totalItemsWidth=' + totalItemsWidth);

		
		
		var startXY = $D.getXY( listItem );		
		var moveX = (listItem.offsetWidth * 1) - adjustedMargins;
		//alert(totalWidth);
		
		try {
			moveX = moveX + adjustedMargins;
			//alert('moveX=' + moveX);
		}
		catch(e) {}
		
		var config = {
			target: listDiv
			, triggers: [				
				{
					// NEXT DIRECTION
					element: next													
					, eventType:"click"				
					, movement: {by: [-(moveX),0]}
					, duration: 0.5
					, easing: YAHOO.util.Easing.easeBoth
					, onBeforeAnim:function() {
						var curXY = $D.getXY(listItem);
						
						if ( endNumofGroup >= mediaItemsTotal ) { return false; }
						
						// WAS
						//if ( (Math.abs( curXY[0] - startXY[0]) + moveX ) >= totalItemsWidth ) { return false; }
						
						//alert("incrementTotal " + incrementTotal + " " + "moveX " + moveX + " " + (Math.abs( curXY[0] - startXY[0]) + moveX ) + " >= " + totalItemsWidth);
						startNumofGroup = startNumofGroup + incrementTotal;			// increment pagination number by 4 if showing 4 items; we currently show 1 group with 4 items
						endNumofGroup = endNumofGroup + incrementTotal;

						// Reset fade and pointer
						$D.setStyle( 'mediaNext', 'opacity', 1 );
						$D.setStyle( 'mediaPrev', 'opacity', 1 );
						$D.setStyle( 'mediaPrev', 'cursor', 'pointer' );
						$D.setStyle( 'mediaNext', 'cursor', 'pointer' );
						
						// REMAINDER ITEMS EXIST
						if ( endNumofGroup > mediaItemsTotal ) {
							fadeNavButtons('mediaNext', 'opacity', 0.2);				// hide next arrow if at the end of carousel							
							$D.setStyle( 'mediaNext', 'cursor', 'default' );
						} else {
						
						// NO REMAINDER ITEMS EXIST
						if ( mediaItemsTotal == endNumofGroup ) {				// hide next arrow if displaying last section
							fadeNavButtons('mediaNext', 'opacity', 0.2);
							$D.setStyle( 'mediaNext', 'cursor', 'default' );
						}
					}
					
					//alert('curXY=' + curXY + '\n' + 'startXY=' + startXY + '\n' + 'totalsofar=' +  (Math.abs( curXY[0] - startXY[0]) + moveX ) + '\n' + 'totalItemsWidth=' + totalItemsWidth);
					//alert(moveX);
				}
			},
			{
					// PREVIOUS DIRECTION
					element: prev
					, eventType:"click"
					, movement: {by: [moveX,0]}
					, duration: 0.5
					, easing: YAHOO.util.Easing.easeBoth
					, onBeforeAnim:function() {
						var curXY = $D.getXY(listItem);
						
						
						if ( startNumofGroup <= incrementTotal  ) { return false; }
						
						// WAS
						//if ( curXY[0] >= startXY[0] ) { return false; }
						
						startNumofGroup = startNumofGroup - incrementTotal;	
						
						// increment pagination number by 4 if 4 displayed; we currently show 1 group with 4 items
						endNumofGroup = endNumofGroup - incrementTotal;
						
						// reset fade and pointer
						$D.setStyle( 'mediaPrev', 'opacity', 1 );					
						$D.setStyle( 'mediaNext', 'opacity', 1 );
						$D.setStyle( 'mediaNext', 'cursor', 'pointer' );
						
						if( startNumofGroup <= incrementTotal ) {					// hide previous arrow when showing start group
							fadeNavButtons('mediaPrev', 'opacity', 0.2);
						}
						
						if( startNumofGroup == 1 ) {
							$D.setStyle( 'mediaPrev', 'cursor', 'default' );
							$D.setStyle( 'mediaNext', 'cursor', 'pointer' );
						}
					}								
				}
			
		]
	}
	var carousel = new WDPRO.widgets.Carousel(config);	
	
}
/******** end main carousel ********/

