/// <reference path="../../../../jQuery/[VERSION NUMBER]/jquery-[VERSION NUMBER]-vsdoc.js" />

// ********************************************************************
// 
// Manheim Retail Marketing
// ********************************************************************
// Copyright © 2010 Manheim Retail Marketing.
//
//  Summary
// ******************************
// $Workfile: ClassTemplate.js $
// Notes:
//
// File History Information
// ************************
// Created on:					    
// Last Modified:					$Modtime: 7/10/10 12:39 $
// Original Author:					
// Last Modified by:				$Author: Prescottl $
// Last JS Lint:					
//
// Source Control Information
// **************************
// File Version:					$ $
// VSS Location:					$Archive: $
//
// ********************************************************************


// Check / create namespace
if (!mrm.global.isNamespaceDefined("mrm.lib.display"))
{
	mrm.global.createNamespace("mrm.lib.display", "1.1");
}


// Class definition
mrm.lib.display.MultiStateDisplayAutoFade = mrm.lib.display.MultiStateDisplay.subClass
({
	
	/*
	=============================
	CONSTANTS
	=============================
	*/
		/* JQuery element targeting strings */
		"SE_AUTOFADE_ELEMENT" : ".mrm-msd-autofade",
		
		
		/* JQuery element targeting string fragments */
		
		
		/* Css class names */
		
		
		/* Css class name fragments */
		
						
		/* Data object properties */
		"DOP_FADE_IN_DURATION" : "fadeInDuration",
					
		/* Event types */
		
						
		/* Event object properties */
		
		
		/* Javascript class definition instance namespace strings (Class definitions (used to create class instances)) */
		
		
		/* Javascript class instance namespace strings (Actual class instances) */
		
		/* GENERAL PROPERTIES */
		"FADE_IN_DURATION" : 700,



	/*
	=============================
	CONSTRUCTOR
	=============================
	*/
		"init" : function ()
		{
			this._super(); //Call base init method (if required)
		},

	
	
	/*
	=============================
	PUBLIC PROPERTIES
	=============================
	*/
	


	/*
	=============================
	PUBLIC METHODS
	=============================
	*/
		
	
	
	/*
	=============================
	PRIVATE PROPERTIES
	=============================
	*/
		
		
		
	/*
	=============================
	PRIVATE METHODS
	=============================
	*/
			
	/* Setup methods */

		// [Override method]
		//
		// @param [dataId] : Reference id for control data within the internal dataStore array
		"_setupSubClass" : function (dataId) 
		{
			var d = this._getData(dataId);

			d[this.DOP_FADE_IN_DURATION] = this.FADE_IN_DURATION;
		},
	
		
	/* Event handlers */
		
		// [Override method]
		//
		// @param [e] : [custom jqEventObject]
		// @param [dataId] : [int] Reference id for control data within the internal dataStore array
		"_handleCoreStateChangeComplete" : function (e, dataId)
		{
			var __this = this;

			// Get conditions / properties
			var d = this._getData(dataId);
			
			
			
			var t = d[this.DOP_JQ_TARGET];
			var stateId = d[this.DOP_CURRENT_STATE];
					
			// Find any autoplay elements within the current display state
			//var currentDisplay = this._findScoped(t, this.SF_MSD_DISPLAY + stateId, this.SE_MSD);
			//var fadeTargets = this._findScoped(currentDisplay, this.SE_AUTOFADE_ELEMENT, this.SE_MSD);
			var fadeTargets = t.find(this.SF_MSD_DISPLAY + stateId + " " + this.SE_AUTOFADE_ELEMENT);
			
			if (fadeTargets.length > 0)
			{
				// Set updating display flag (deactivates change mechanism until anim complete)
				d[this.DOP_UPDATE_IN_PROGRESS] = true;
			
				fadeTargets.hide();
				fadeTargets.fadeIn(d[this.DOP_FADE_IN_DURATION], function (event){ __this._handleFadeComplete(e, fadeTargets, dataId) } );		
			}
		},
				
		
		// @param [changeEvent] : [custom jqEventObject] Original 'change state' event 
		// @param [jqElements] : jqObject of all autoFade elements
		// @param [dataId] : Reference id for control data within the internal dataStore array
		"_handleFadeComplete" : function (changeEvent, jqElements, dataId)
		{
			var e = changeEvent;

			jqElements.removeAttr("style");

			// Get conditions / properties
			var d = this._getData(dataId);
			
			d[this.DOP_UPDATE_IN_PROGRESS] = false;

			// If queueing change requests then rerun and 
			if (d[this.DOP_QUEUE_CHANGE_REQUESTS] && d[this.DOP_QUEUED_STATE_CHANGE])
			{
				var id = d[this.DOP_QUEUED_STATE_ID];

				// Clear queue
				d[this.DOP_QUEUED_STATE_CHANGE] = false;
				d[this.DOP_QUEUED_STATE_ID] = null;
				// Get queued id and change display
				this._changeDisplayState(dataId, id, false);
			}
			else
			{
				// Set updating display flag (deactivates change mechanism until anim complete)
				
				// Reactivate autoplay
				//
				// Work out whether the change state call was generated by user click or autoplay and adjust 'wait duration' accordingly 
				var duration = (e[this.EOP_AUTOPLAY_EVENT]) ? d[this.DOP_AUTOPLAY_DURATION_DEFAULT] : d[this.DOP_AUTOPLAY_DURATION_USER_INTERUPTION];
				if (!this._controlPaused(dataId)) this._startAutoPlay(dataId, duration);
			}
		}
				


	
	/* Display manipulation */

	
	/* Utility methods */
	
});



/*
================================================================================
CLASS NAMES:

Please see 'superclass'

- 'mrm-msd-autofade' : Add this class to any element within a display 'mrm-d' that you wish to fade (DO NOT ADD TO TEXT ELEMENTS OR ELEMENTS CONAINING TEXT ELEMENTS)


================================================================================
EXAMPLE HTML:

<div class="mrm-msd mrm-msd-d-0"><!-- ADD CLASS FOR THE DEFAULT DISPLAY DESIRED [e.g. to start on display (0 = 'mrm-msd-d-0') || to start on display (3 = 'mrm-msd-d-3')] -->
		
	<div><!-- OPTIONAL CONTAINER -->
		<div class="mrm-d mrm-d-0"><p>0</p><img class="mrm-msd-autofade" width="100" height="100" src="_blank.gif" /></div>
		<div class="mrm-d mrm-d-1"><p>1</p><img class="mrm-msd-autofade" width="100" height="100" src="_blank.gif" /></div>
		<div class="mrm-d mrm-d-2"><p>2</p><img class="mrm-msd-autofade" width="100" height="100" src="_blank.gif" /></div>
		<div class="mrm-d mrm-d-3"><p>3</p><img class="mrm-msd-autofade" width="100" height="100" src="_blank.gif" /></div>
		<div class="mrm-d mrm-d-4"><p>4</p><img class="mrm-msd-autofade" width="100" height="100" src="_blank.gif" /></div>
		<div class="mrm-d mrm-d-5"><p>5</p><img class="mrm-msd-autofade" width="100" height="100" src="_blank.gif" /></div>
		<div class="mrm-d mrm-d-6"><p>6</p><img class="mrm-msd-autofade" width="100" height="100" src="_blank.gif" /></div>
		<div class="mrm-d mrm-d-7"><p>7</p><img class="mrm-msd-autofade" width="100" height="100" src="_blank.gif" /></div>
		<div class="mrm-d mrm-d-8"><p>8</p><img class="mrm-msd-autofade" width="100" height="100" src="_blank.gif" /></div>
		<div class="mrm-d mrm-d-9"><p>9</p><img class="mrm-msd-autofade" width="100" height="100" src="_blank.gif" /></div>
	</div>

	<ul class="mrm-msd-menu">
		<li class="mrm-msd-dl mrm-msd-dl-0"><a href="#"></a></li>
		<li class="mrm-msd-dl mrm-msd-dl-1"><a href="#"></a></li>
		<li class="mrm-msd-dl mrm-msd-dl-2"><a href="#"></a></li>
		<li class="mrm-msd-dl mrm-msd-dl-3"><a href="#"></a></li>
		<li class="mrm-msd-dl mrm-msd-dl-4"><a href="#"></a></li>
		<li class="mrm-msd-dl mrm-msd-dl-5"><a href="#"></a></li>
		<li class="mrm-msd-dl mrm-msd-dl-6"><a href="#"></a></li>
		<li class="mrm-msd-dl mrm-msd-dl-7"><a href="#"></a></li>
		<li class="mrm-msd-dl mrm-msd-dl-8"><a href="#"></a></li>
		<li class="mrm-msd-dl mrm-msd-dl-9"><a href="#"></a></li>
	</ul>

	<a href="#" class="mrm-msd-dl-prev">Previous</a>
	<a href="#" class="mrm-msd-dl-next">Next</a>

	<a href="#" class="mrm-msd-dl-play">Play</a>
	<a href="#" class="mrm-msd-dl-pause">Pause</a>

	<h6 class="mrm-msd-ic">0 / 0</h6>
</div>

*/