if(!$chk(window['VD'])) {
	var VD = {};
}


VD.CollectionNavigation = new Class({

	/**
	 * Options
	 * 
	 * @type {Object}
	 */
	options: {
		showDuration: 300,
		hideDuration: 500,
		minimalHeight: 2,
		startColor: '#d07412',
		// endColor: '#545454',
		endColor: '#d07412',
		autoCloseTime:500
	},

	/**
	 * The target element representing the collection navigation
	 *
	 * @type {Element}
	 * @private
	 */
	collectionContainer: null,
	
	/**
	 * Iframe to prevent browser elements to pop through the collection nav div
	 * 
	 * @type {Element} iFrame
	 * @private
	 */
	collectionContainerShield: null,
	
	/**
	 * Main Trigger for collection
	 *
	 * @type {Element}
	 */
	collectionTrigger: null,
	
	/**
	 * The current appear/ disappear FX
	 * 
	 * @type {Fx.Styles}
	 * @private
	 */
	currentCollectionContainerFx: null,
	
	/**
	 * The current appear/ disappear FX for the shield
	 * 
	 * @type {Fx.Styles}
	 * @private
	 */
	currentCollectionShieldFx: null,
	
	/**
	 * The current appear/ disappear FX for the trigger element
	 * 
	 * @type {Fx.Styles}
	 * @private
	 */
	currentTriggerFx: null,
	
	/**
	 * Indicates if the collection container is currently visible
	 * 
	 * @private
	 */
	visible: false,
	
	/**
	 * VD.CollectionNavigation Constructor
	 * 
	 * @param {Object} collectionContainer
	 * @param {Object} options
	 */
	initialize: function(collectionContainer, collectionTrigger, options) {
		
		(collectionContainer);
		
		this.setOptions(options);
		this.collectionContainer = $(collectionContainer);
		this.collectionTrigger = $(collectionTrigger);
		
		this.initAppearance();

	},

	/**
	 * Sets up the collection navigation appearance
	 *
	 * @private
	 */
	initAppearance: function() {
		this.collectionContainer.setStyle('position', 'absolute');	
		this.collectionContainer.setStyle('z-index', '1000');  
		this.collectionContainer.setStyle('display', 'none');
		this.collectionContainer.setStyle('visibility', 'hidden');
		this.collectionContainer.setStyle('height', this.options.minimalHeight);
		
		//if(window.ie) {
			this.collectionContainer.setStyle('left', this.collectionTrigger.getCoordinates().left);
			this.collectionContainer.setStyle('top', (this.collectionTrigger.getCoordinates().top + this.collectionTrigger.getCoordinates().height));
			window.addEvent('resize', this.correctTopNav.bindAsEventListener(this));
		//}
		
		// Create the collectionShield
		this.collectionShield = new Element('iframe');
		this.collectionShield.setStyle('position', 'absolute');
		this.collectionShield.setStyle('left', this.collectionContainer.getStyle('left'));
		this.collectionShield.setStyle('top', this.collectionContainer.getStyle('top'));
		this.collectionShield.setStyle('z-index', '999');
		this.collectionShield.setStyle('display', 'none');
		this.collectionShield.setStyle('visibility', 'hidden');
		this.collectionShield.setStyle('height', this.collectionContainer.getStyle('height'));
		this.collectionShield.setStyle('width', this.collectionContainer.getStyle('width'));	
		this.collectionShield.setStyle('border', 'none');
		this.collectionShield.setStyle('background-color', 	this.collectionContainer.setStyle('background-color'));	
		this.collectionShield.setStyle('padding', '0');
		this.collectionShield.setStyle('margin', '0');
		this.collectionShield.setAttribute('border', '0');
		this.collectionShield.setAttribute('frameborder', '0');
		
		this.collectionShield.injectAfter(this.collectionContainer);
		
	},
		
	correctTopNav: function() {
		this.collectionContainer.setStyle('left', this.collectionTrigger.getCoordinates().left);
	},
			
	/**
	 * Returns the total (max) height of the collectionContainer
	 *
	 * @return {Number}
	 */
	getTotalHeight: function() {
		
		var dimensions = this.collectionContainer.getSize();
		
		return dimensions.scrollSize.y;
		
	},

	/**
	 * Returns the current height of the collectionContainer
	 *
	 * @return {Number}
	 */
	getCurrentHeight: function() {
		
		var dimensions = this.collectionContainer.getSize();
		
		return dimensions.size.y;
		
	},

	/**
	 * Returns the minmal height of the collectionContainer
	 *
	 * @return {Number}
	 */	
	getMinimalHeight: function() {
		return this.options.minimalHeight;
	},

	/**
	 * Will kill and unset the currentCollectionContainerFx
	 *
	 * @private
	 */
	clearAppearanceFx: function() {
	
		if(this.currentCollectionContainerFx !== null) {
			this.currentCollectionContainerFx.stop();
			this.currentCollectionContainerFx = null;
		}                

		if(this.currentTriggerFx !== null) {
			this.currentTriggerFx.stop();
			this.currentTriggerFx = null;
		}
		
	},
	
	/**
	 * Will make the collection navigation appear
	 *
	 */
	show: function(autoClose) {
		
		var autoClose = $chk(autoClose) ? autoClose : false;
		
		this.killCloseTimer();
		
		// Clear current Fx
		this.clearAppearanceFx();
		
		// Set visible state
		this.visible = true;

		// Setup styles
		this.collectionContainer.setStyle('display', 'block');
		this.collectionContainer.setStyle('visibility', 'visible');
		this.collectionShield.setStyle('display', 'block');
		this.collectionShield.setStyle('visibility', 'visible');
		
		this.collectionTrigger.setStyle('background-image', 'url('+this.options.endImage+')');
		
		// Setup new Fx's
		this.currentCollectionContainerFx = new Fx.Styles(this.collectionContainer, {duration: this.options.showDuration, onComplete:this.showCompleteHandler.bind(this)});
		this.currentCollectionShieldFx = new Fx.Styles(this.collectionShield, {duration: this.options.showDuration, onComplete:this.showCompleteHandler.bind(this)});		
		this.currentTriggerFx = new Fx.Styles(this.collectionTrigger, {duration: this.options.showDuration, onComplete:this.showCompleteHandler.bind(this)});		

		
		// Start Fx
		this.currentCollectionContainerFx.start({
							'height': [this.getCurrentHeight(), this.getTotalHeight()],
							'backgroundColor': [this.collectionContainer.getStyle('backgroundColor'), this.options.endColor]
							});
		this.currentCollectionShieldFx.start({
							'height': [this.getCurrentHeight(), this.getTotalHeight()]
							});
		this.currentTriggerFx.start({
							'backgroundColor': [this.collectionTrigger.getStyle('backgroundColor'), this.options.endColor]
							});
							
		if(autoClose) {
			this.collectionTrigger.addEvent('mouseleave', this.startCloseTimer.bindAsEventListener(this));
		} else {
			this.collectionTrigger.removeEvents('mouseleave');
		}
	},
	
	closeTimer: null,
	
	startCloseTimer: function() {
		
		if(this.closeTimer === null) {
			this.closeTimer = setTimeout(this.hide.bindAsEventListener(this), this.options.autoCloseTime);
			this.collectionContainer.addEvent('mouseenter', this.killCloseTimer.bindAsEventListener(this));
			this.collectionContainer.addEvent('mouseleave', this.startCloseTimer.bindAsEventListener(this));
		}
	},
	
	killCloseTimer: function(e) {

		if(this.closeTimer !== null) {
			clearTimeout(this.closeTimer);
			clearInterval(this.closeTimer);
			this.closeTimer = null;
		}
	},
	
	/**
	 * Called when appear is done
	 * 
	 * @see VD.CollectionNavigation.show()
	 * @private
	 */
	showCompleteHandler: function() {
		// console.info('Collection Container: showCompleteHandler');
	},
	
	/**
	 * Will make the collection navigation disappear
	 *
	 */	
	hide: function() {
		
		this.collectionContainer.removeEvents('mouseover');
		this.collectionContainer.removeEvents('mouseleave');
		this.collectionContainer.removeEvents('mouseover');
		
		// Clear current Fx
		this.clearAppearanceFx();
		
		// Set visible state
		this.visible = false;
		
		// Setup new Fx
		this.currentCollectionContainerFx = new Fx.Styles(this.collectionContainer, {duration: this.options.hideDuration, onComplete:this.showCompleteHandler.bind(this)});
		this.currentCollectionShieldFx = new Fx.Styles(this.collectionShield, {duration: this.options.hideDuration, onComplete:this.showCompleteHandler.bind(this)});
		this.currentTriggerFx = new Fx.Styles(this.collectionTrigger, {duration: this.options.hideDuration, onComplete:this.showCompleteHandler.bind(this)}); 
		
		// Setup new Fx
		this.currentCollectionContainerFx = new Fx.Styles(this.collectionContainer, {duration: this.options.hideDuration, onComplete:this.showCompleteHandler.bind(this)});
		this.currentCollectionShieldFx = new Fx.Styles(this.collectionShield, {duration: this.options.hideDuration, onComplete:this.showCompleteHandler.bind(this)});
		this.currentTrigger1Fx = new Fx.Styles(this.collectionTrigger1, {duration: this.options.hideDuration, onComplete:this.showCompleteHandler.bind(this)}); 

		// Setup styles
		this.collectionContainer.setStyle('display', 'block');
		this.collectionContainer.setStyle('visibility', 'visible');
		this.collectionShield.setStyle('display', 'block');
		this.collectionShield.setStyle('visibility', 'visible');
		
		this.collectionTrigger.setStyle('backgroundImage', 'url('+this.options.startImage+')');
		
		// Start Fx
		this.currentCollectionContainerFx.start({
							'height': [this.getCurrentHeight(), this.getMinimalHeight()],
							'backgroundColor': [this.collectionContainer.getStyle('backgroundColor'), this.options.startColor]
							});
		this.currentCollectionShieldFx.start({
							'height': [this.getCurrentHeight(), this.getMinimalHeight()]
							});
		this.currentTriggerFx.start({
							'backgroundColor': [this.collectionTrigger.getStyle('backgroundColor'), this.options.startColor]
							});
		
	},
	
	/**
	 * Called when disappear is done
	 * 
	 * @see VD.CollectionNavigation.hide()
	 * @private
	 */
	hideCompleteHandler: function() {
		// console.info('Collection Container: hideCompleteHandler');
		this.collectionShield.setStyle('display', 'none');
		this.collectionShield.setStyle('visibility', 'hidden');		
		this.collectionContainer.setStyle('display', 'none');
		this.collectionContainer.setStyle('visibility', 'hidden');

		
	},
	
	toggle: function() {
		if(this.visible === true) {
			this.hide();
		} else {
			this.show();
		}
		
		//if a anchor has a href in IE, it follows the href, despite of any 'return false'. This solves the problemen.
		if (window.ie) {
			event.returnValue = false;
		}
	}

});
VD.CollectionNavigation.implement(new Options());
VD.CollectionNavigation.implement(new Events());


/**
 * Object containig all collection navigation vars
 * 
 */
VD.collectionNavigationVars = {
	collectionNavigationContainer: null
};


/**
 * Singleton acces to colletion navigation
 *
 * @return {VD.CollectionNavigation}
 */
VD.getSharedCollectionNavigation = function() {
	
	if(!$chk(VD.collectionNavigationVars.collectionNavigationContainer)) {
		// console.error('VD.collectionNavigationVars.collectionNavigationContainer was not initialized');
		return null;
	}
	return VD.collectionNavigationVars.collectionNavigationContainer;
}

/**
 * Will setup and init the navigation collection
 * 
 * @type {Function}
 */
VD.initCollectionNavigation = function() {
	
	//	// console.group('Collection Navigation');
	// console.info('Init Collection Navigation');

	// Fetch the collectionnavigation object
	// Use class
	var collectionCandidates = $$('.collectionNavigation');
	(collectionCandidates);
	var triggerCandidates = $$('.collectionTrigger');	
	
	if(collectionCandidates.length < 0) {
		// console.warn('No collection navigation collectionCandidates found!');
		// console.error('Could not initialize collection navigation: No collection navigation collectionCandidates found!')
		return;
	} else if(collectionCandidates.length > 1) {
		// console.warn('Found more than 1 navigation collectionCandidates! Will use first');
	}
	
	if(triggerCandidates.length < 0) {
		// // console.warn('No collection navigation trigger Candidates found!');
	} else if(triggerCandidates.length > 1) {
		// // console.warn('Found more than 1 navigation collection trigger Candidates! Will use first');
	}
	
	
	// Set the navigation collection container
	var navigationCollectionContainer = collectionCandidates[0];
	var navigationCollectionTrigger = triggerCandidates[0];
	
	VD.collectionNavigationVars.collectionNavigationContainer = new VD.CollectionNavigation(navigationCollectionContainer, navigationCollectionTrigger);
	
	// // console.dir(VD.collectionNavigationContainer);
	
	// // console.groupEnd('Collection Navigation');
}


window.addEvent('domready', VD.initCollectionNavigation);