var ProductMediator = {

	oElementContainer  : null,
	aElementBlocks     : null,
	aElementButtons    : null,
	aElementImages     : null,
	aElementFullImages : null,

	aInitialImageOffsets : [],
	iSelectedIndex       : 0,
	bBusy                : false,
	bShowAnimation       : true,

	oAnimationController : Animator.getAnimationController(),

	COLOR_UNSELECTED : '#000000',
	COLOR_SELECTED   : '#1F2F3F',

	CLASS_NAME_SELECTED  : 'block-active',
	CLASS_NAME_INVISIBLE : 'invisible',

	init : function() {

		this.oElementContainer = document.getElementById('boxes');
		this.aElementBlocks = Common.Dom.getElementsByClassName(
			this.oElementContainer,
			'block',
			'div'
			);
		this.aElementButtons = Common.Dom.getElementsByClassName(
			this.oElementContainer,
			'title-inner',
			'span'
			);
		this.aElementImages = Common.Dom.getElementsByClassName(
			this.oElementContainer,
			'preview',
			'img'
			);
		this.aElementFullImages = Common.Dom.getElementsByClassName(
			this.oElementContainer,
			'image-full',
			'div'
			);

		var oThis = this;

		for(var i = 0; i < this.aElementButtons.length; i++) {
			Common.Event.add(
				this.aElementButtons[i],
				'click',
				function(iIndex) {

					return function(oEvent) {

						var oEvent = Common.Event.normalize(oEvent);

						oEvent.cancelBubble = true;

						oThis.selectByIndex(iIndex);

					}

				}(i)
				);
		}

		for(var i = 0; i < this.aElementFullImages.length; i++) {
			Common.Event.add(
				this.aElementFullImages[i],
				'click',
				function(iIndex) {

					return function(oEvent) {

						var oEvent = Common.Event.normalize(oEvent);

						oEvent.cancelBubble = true;

					}

				}(i)
				);
		}

		if(this.bShowAnimation) {
			Common.Event.add(
				window,
				'load',
				function() {

					oThis.oAnimationController.addAnimation(
						new AnimationEquation(
						document.getElementById('product-image'),
						{
							aProperties  : ['marginLeft'],
							aValuesStart : [-1150],
							aValuesEnd   : [-150],
							aEquations   : [AnimationEquation.Cubic.easeOut],
							iFramesCount : 30
						}
						)
						);

					oThis.oAnimationController.start();

				}
				);
		}

		Common.Event.add(
			Common.Dom.getElementsByClassName(this.oElementContainer, 'closer', 'span').concat([document]),
			'click',
			function() {

				oThis.selectByIndex(0);

			}
			);

	},

	selectByIndex : function(iIndex) {

		if(this.iSelectedIndex == iIndex) {

			if(iIndex > 0) {
				return this.selectByIndex(0);
			}

			return;

		}

		this.unselectBlockByIndex(this.iSelectedIndex);
		this.selectBlockByIndex(iIndex);		

	},

	selectBlockByIndex : function(iIndex) {

		if(this.isBusy()) {
			return;
		}

		this.setBusy();

		var oThis = this;

		if(iIndex > 0) {

			// store initial image offset
			if(!this.aInitialImageOffsets[iIndex - 1]) {
				this.aInitialImageOffsets[iIndex - 1] = this.aElementImages[iIndex - 1].offsetTop;
			}
			
			this.oAnimationController.addAnimation(
				new AnimationEquation(
					this.aElementImages[iIndex - 1],
					{
						aProperties  : ['top'],
						aValuesStart : [this.aInitialImageOffsets[iIndex - 1]],
						aValuesEnd   : [this.aInitialImageOffsets[iIndex - 1] - this.aElementImages[iIndex - 1].offsetHeight - 15],
						aEquations   : [AnimationEquation.Cubic.easeOut],
						iFramesCount : 10,
						fStopCallbackFunction : function() {

							Common.Class.add(
								oThis.aElementBlocks[iIndex],
								oThis.CLASS_NAME_SELECTED
								);

							Animator.colour(oThis.aElementBlocks[iIndex], { sColorStart : oThis.COLOR_UNSELECTED, sColorEnd : oThis.COLOR_SELECTED, sProperty : 'backgroundColor', fStopCallbackFunction : function() { oThis.setUnBusy() }});

							if(window.XMLHttpRequest) {
								Animator.fadeIn(oThis.aElementFullImages[iIndex - 1]);
							}
							else {
								Common.Class.remove(oThis.aElementFullImages[iIndex - 1], oThis.CLASS_NAME_INVISIBLE);
							}

						}
					}
					)
				);

			this.oAnimationController.start();

		}
		else {
			
			Common.Class.add(
				this.aElementBlocks[iIndex],
				this.CLASS_NAME_SELECTED
				);

			Animator.colour(oThis.aElementBlocks[iIndex], { sColorStart : this.COLOR_UNSELECTED, sColorEnd : this.COLOR_SELECTED, sProperty : 'backgroundColor', fStopCallbackFunction : function() { oThis.setUnBusy() }});

		}

		this.iSelectedIndex = iIndex;

	},

	unselectBlockByIndex : function(iIndex) {

		Common.Class.remove(
			this.aElementBlocks[iIndex],
			this.CLASS_NAME_SELECTED
			);

		if(iIndex > 0) {

			if(window.XMLHttpRequest) {
				Animator.fadeOut(this.aElementFullImages[iIndex - 1]);
			}
			else {
				Common.Class.add(this.aElementFullImages[iIndex - 1], this.CLASS_NAME_INVISIBLE);	
			}

		}

		var oThis = this;

		Animator.colour(
			this.aElementBlocks[iIndex],
			{
				sColorStart : this.COLOR_SELECTED,
				sColorEnd   : this.COLOR_UNSELECTED,
				sProperty   : 'backgroundColor',
				fStopCallbackFunction : iIndex == 0?
					null :
					function() {

						oThis.oAnimationController.addAnimation(
							new AnimationEquation(
							oThis.aElementImages[iIndex - 1],
							{
								aProperties  : ['top'],
								aValuesStart : [oThis.aInitialImageOffsets[iIndex - 1] - oThis.aElementImages[iIndex - 1].offsetHeight - 15],
								aValuesEnd   : [oThis.aInitialImageOffsets[iIndex - 1]],
								aEquations   : [AnimationEquation.Cubic.easeOut],
								iFramesCount : 10
							}
						)
						);

						oThis.oAnimationController.start();

				}
			}
			);

	},

	setBusy : function() {

		this.bBusy = true;

	},

	setUnBusy : function() {

		this.bBusy = false;

	},

	isBusy : function() {

		return this.bBusy;

	}

};