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

/**
 * HKM.ProductThumbButton
 *
 * @classDescription HKM.ProductThumbButton
 */
HKM.ProductThumbButton = new Class({

	/**
	 * Options
	 * 
	 * @type {Object}
	 */
	options: {
		onZoomImage: Class.empty()
	},
	
	id: null,
	
	delegate: null,
	
	largeImageURL: null,
	
	mediumImageURL: null,
	
	
	/**
	 * HKM.ProductThumbButton Constructor
	 * 
	 * @param {Object} thumb
	 * @param {Object} options
	 */
	initialize: function(thumb, delegate, options) {
		
		this.setOptions(options);
		this.setId();
		this.delegate = delegate;

		var urls = $ES('input', $(thumb));
		
		for(var i=0;i<urls.length;i++) {
			if(urls[i].name == 'medium') {
				this.mediumImageURL = urls[i].value;
			}
			
			if(urls[i].name == 'large') {
				this.largeImageURL = urls[i].value;
			}
		}

		$extend($(thumb), this);
		
		return thumb;
	},
	
	zoomImage: function(target, largeImage, zoomImage) {
		if(this.options.onZoomImage !== Class.empty) {
			this.options.onZoomImage(arguments);
		}
	},
	
	setId: function() {

		if(this.id === null) {
			if(!$chk(window['ProductThumbButtonIndex'])) {
				window['ProductThumbButtonIndex'] = 0;
			}
			this.id = 'thumbButton'+window['ProductThumbButtonIndex']++;
		}
	},
	
	getId: function() {
		return this.id;
	}
	
});
HKM.ProductThumbButton.implement(new Options());
//HKM.ProductThumbButton.implement(new Events());

/**
 * HKM.ProductZoom
 *
 * @classDescription HKM.ProductZoom
 */
HKM.ProductZoom = new Class({

	/**
	 * Options
	 * 
	 * @type {Object}
	 */
	options: {
		
		bottomContainerClass: 'bottomContainer',
		
		zoomDisplayClass: 'zoomDisplay',
		
		zoomThumbsClass: 'zoomThumbs',
		
		largeImageContainerClass: 'largeImageContainer',
		
		largeImageClass: 'largeImage',
		
		zoomControllClass: 'zoomControll',
		
		zoomButtonClass: 'startZoomButton',
		
		zoomTopPosition: 421
		
	},
	
	productImages: {},
	
	/**
	 * The target zoom container
	 *
	 * @type {Element}
	 */
	productZoomContainer: null,
	
	/**
	 * HKM.ProductZoom Constructor
	 * 
	 * @param {Object} target
	 * @param {Object} options
	 */
	initialize: function(target, options) {
		this.setOptions(options);
		this.productZoomContainer = $(target);

		// Init
		this.setUpBottomContainer();
		this.setupImageControll();
	},	

	largeImageContainer: null,
	
	largeImage: null,
	
	currentImageId: null,
	
	zoomControll: null,
	
	helpFieldContainer: null,
	
	helpField: null,	

	setupImageControll: function() {
		// Get largeImageContainer		
		var largeImageContainer = $ES('.'+this.options.largeImageContainerClass, this.productZoomContainer)
		if(!(largeImageContainer.length > 0)) {
			return false;
		} 
		this.largeImageContainer = largeImageContainer.pop();


		// Get largeImage display
		var largeImage = $ES('.'+this.options.largeImageClass, this.largeImageContainer);
		if(!(largeImage.length > 0)){
			return false;
		}

		this.largeImage = largeImage.pop();

		// Get zoom controll
		var zoomControll = $ES('.'+this.options.zoomControllClass, this.largeImageContainer);
		if(!(zoomControll.length > 0)){
			return false;
		}
		
		this.setUpThumbImages();

		this.zoomControll = zoomControll.pop();

		this.setUpZoomControll();		
			
	},
	
	zoomButton: null,
	
	setUpZoomControll: function() {

		//var topPos = (this.largeImageContainer.getStyle('height').toInt()-this.zoomControll.getStyle('height').toInt());
		this.zoomControll.setStyles({
			'position': 'absolute',
			'top': this.options.zoomTopPosition,
			'display': 'block',
			'visibility': 'visible',
			'left': 0,
			'z-index': 1001
		});

		var zoomButton = $ES('.'+this.options.zoomButtonClass, this.largeImageContainer);
		if(!(zoomButton.length > 0)) {
			return false;
		}
		this.zoomButton = zoomButton.pop();
		this.zoomButton.setStyles({'cursor':'pointer'});
		this.zoomButton.getFirst().setStyles({'cursor':'pointer'});
		
		var helpFieldContainer = $ES('.helpField', this.largeImageContainer);
		if(!(helpFieldContainer.length > 0)) {
			return false;
		}
		this.helpFieldContainer = helpFieldContainer.pop();
		
		this.helpFieldContainer.setStyles({'opacity': 0.0});
		
		if(this.helpFieldContainer.getFirst()) {
			this.helpField = this.helpFieldContainer.getFirst();
		} else {
			this.helpField = this.helpFieldContainer;
		}
		this.zoomButton.addEvent('click', this.firstZoomClick.bindAsEventListener(this));
	},
	
	firstZoomClick: function() {
			
		var target		= this.thumbs[0];		
		var zoomImage	= this.thumbs[0].largeImageURL;
		var largeImage	= this.largeImage.getFirst();
		var largeImagePath	= this.thumbs[0].mediumImageURL;	
		
		if(!$(this.productImages[target.getId()])) {

			var newImageProperties = {};
			newImageProperties['largePath'] = largeImagePath;
			newImageProperties['zoomPath'] = zoomImage;
			newImageProperties['largeImage'] = largeImage;
			this.productImages[target.getId()] = newImageProperties;
			this.startZoomHandler(null, target.getId());

		}

	},
	
	setZoomButtonId: function(imageId) {
		// Kill original event
		this.zoomButton.removeAttribute('onclick')
		
		this.zoomButton.removeEvents('click');
		this.zoomButton.addEvent('click', this.startZoomHandler.bindAsEventListener(this, [imageId]));
		this.zoomButton.getFirst().setText('BEKIJK VERGROTING');
		this.zoomButton.getNext().getFirst().setText('+')
	},
	
	setZoomStop: function() {
		// Kill original event
		this.zoomButton.removeAttribute('onclick')
		
		this.zoomButton.removeEvents('click');
		this.zoomButton.addEvent('click', this.endZoomHandler.bindAsEventListener(this));
		this.zoomButton.getFirst().setText('VERBERG VERGROTING');
		this.zoomButton.getNext().getFirst().setText('-')
	},
	
	startZoomForThumbAtIndex: function(thumbIndex) {		
		var thumb = this.zoomThumbs.getChildren()[thumbIndex];
		
		thumb.events.click.pass(thumb)();
	},
	
	startZoomHandler: function(e, imageId) {			
		
			if($chk(e)) {
				var evt = new Event(e);		
				evt.stopPropagation();
			}

			this.showZoomImage();

			if(this.currentImageId !== imageId) {

				if(this.zoomDisplay.getFirst().getFirst()) {
					this.zoomDisplay.getFirst().getFirst().remove();
				}
			}
			
			if($chk(imageId)) {
				if($chk(this.productImages[imageId]) && !$chk(this.productImages[imageId]['zoomImage'])) {
					this.setHelpText('Vergroting Laden');
					this.productImages[imageId]['zoomImage'] = new Asset.image(this.productImages[imageId]['zoomPath'], {id: 'zoomImage'+imageId, title: '', onload: this.loadedZoomImage.bind(this, [imageId])});
				} else {
					this.loadedZoomImage(imageId);
				}
			} 
			
			this.currentImageId = imageId;
			this.setZoomStop();
	},
	
	endZoomHandler: function(e) {
		
		this.clearHelpText();
		
		this.zoomController.destroy();
		this.zoomController = null;
		
		this.hideZoomImage();
		
		this.setZoomButtonId(this.currentImageId);
		
	},
	
	helpFieldFx: null,
	
	setHelpText: function(text) {
		
		if(this.helpFieldFx === null) {
			this.helpFieldFx = new Fx.Style(this.helpFieldContainer, 'opacity', {duration:500});
		}
		this.helpFieldFx.stop();		
		
		this.helpFieldFx.start(this.helpFieldContainer.getStyle('opacity'), 0.6);
		
		this.helpFieldContainer
		this.helpField.setText(text);
	},
	
	clearHelpText: function() {
		if(this.helpFieldFx === null) {
			this.helpFieldFx = new Fx.Style(this.helpFieldContainer, 'opacity', {duration:500});
		}
		this.helpFieldFx.stop();		

		this.helpField.setText('');	
		
		this.helpFieldFx.start(this.helpFieldContainer.getStyle('opacity'), 0);
		
	},
	
	largeImageMouseOverHandler: function(e, imageId) {
		var evt = new Event(e);		
		evt.stopPropagation();
			
	},
	
	zoomController: null,
	
	loadedZoomImage: function(imageId) {
		this.productImages[imageId]['zoomImage'].injectInside(this.zoomDisplay.getFirst());
		
		if(this.zoomController === null) {
		this.zoomController = new HKM.ProductZoomMapController(
								this.productImages[imageId]['largeImage'], 
								this.productImages[imageId]['zoomImage'], 
								this.zoomDisplay
								);
		}
		this.setHelpText('Beweeg over Afbeeling');
	},
	
	largeImageMouseLeaveHandler: function(e){
		
		var evt = new Event(e);
		evt.stopPropagation();
				
		this.hideZoomImage()
			
	},
	
	bottomContainer: null,
	
	zoomDisplay: null,
	
	zoomDisplayFx: null,
	
	zoomThumbs: null,
	
	setUpBottomContainer: function() {

		// Get bottom container
		var bottomContainer = $ES('.'+this.options.bottomContainerClass, this.productZoomContainer);
		if(!(bottomContainer.length > 0)) {
			return false;
		}
		this.bottomContainer = bottomContainer.pop();
		
		// Get zoom image
		var zoomDisplay = $ES('.'+this.options.zoomDisplayClass, this.bottomContainer);
		if(!(zoomDisplay.length > 0)) {
			return false;
		}
		this.zoomDisplay = zoomDisplay.pop();
		
		// Get thumbs container
		var zoomThumbs = $ES('.'+this.options.zoomThumbsClass, this.bottomContainer);
		if(!(zoomThumbs.length > 0)) {
			return false;
		}
		
		this.zoomThumbs = zoomThumbs.pop();
		

		// Setup FX for zoomDisplay

		this.zoomDisplay.setStyle('display', 'none');
		//this.zoomDisplayFx = new Fx.Slide(this.zoomDisplay, {duration:500});
		//this.zoomDisplayFx.hide();

		// 
		//this.zoomDisplay.addEvent('mouseover', this.hideZoomImage.bindAsEventListener(this));
		
	},

	thumbs: null,
	
	setUpThumbImages: function() {
		
		this.thumbs = new Array();
		
		var thumbs = this.zoomThumbs.getChildren();

		for(var i=0;i<thumbs.length;i++) {
			var thumb = thumbs[i];
			if(i!=thumbs.length-1) {
				thumb.setStyle('marginRight', 1);
			}
			thumb = new HKM.ProductThumbButton(thumb, this, {onZoomImage:this.loadNewImage.bindAsEventListener(this)});
			this.thumbs.push(thumb);
		}
		
	},
	
	loadNewImage: function() {
		
		var target		= arguments[0][0];
		var largeImage	= arguments[0][1];		
		var zoomImage	= arguments[0][2];		
		
		if(!$(this.productImages[target.getId()])) {
			
			var newImageProperties = {};
			newImageProperties['largePath'] = largeImage;
			newImageProperties['zoomPath'] = zoomImage;
			
			this.productImages[target.getId()] = newImageProperties;
			
			// Load large image
			this.productImages[target.getId()]['largeImage'] = new Asset.image(largeImage, {id: 'largeImage'+target.getId(), title: '', onload: this.loadedLargeImage.bind(this, [target.getId()])});

		}
		
	},
	
	loadedLargeImage: function(imageId) {
		this.largeImage.getFirst().replaceWith(this.productImages[imageId]['largeImage']);
		this.setZoomButtonId(imageId);
	},
	
	displayImages: function() {
		
	},
	
	showZoomImage: function() {
		
		if(this.zoomDisplayFx === null ) {
			this.zoomDisplayFx = new Fx.Slide(this.zoomDisplay, {duration:500});
			this.zoomDisplayFx.hide();
			this.zoomDisplay.setStyle('display', 'block');
		}
		//
		
		this.zoomDisplayFx.slideIn();
	},
	
	hideZoomImage: function() {
		
		if(this.zoomDisplayFx === null ) {
			return;
		}
		
		this.zoomDisplayFx.slideOut();
	}
	

});
HKM.ProductZoom.implement(new Options());
HKM.ProductZoom.implement(new Events());


/**
 * HKM.ProductZoomMapController
 *
 * @classDescription HKM.ProductZoomMapController
 */
HKM.ProductZoomMapController = new Class({

	/**
	 * Options
	 * 
	 * @type {Object}
	 */
	options: {
		bottomCorrection: 28
	},
	
	mainImage: null,
	
	zoomImage: null,
	
	displayframe: null,
	
	factor: 0,
	
	factor2: 0,
	
	/**
	 * HKM.ProductZoomMapController Constructor
	 * 
	 * @param {Object} arg
	 * @param {Object} options
	 */
	initialize: function(mainImage, zoomImage, displayframe, options) {

		this.setOptions(options);
		
		this.mainImage = $(mainImage);
		this.zoomImage = $(zoomImage);
		this.displayframe = $(displayframe);
		
		this.setUp();
	},	
	
	dragFrame: null,
	
	dragFx: null,
	
	setUp: function() {

		this.factor = this.mainImage.width/this.zoomImage.width;
		this.factor2 = this.zoomImage.width/this.mainImage.width;
		this.dragFrame = new Element('div');
		this.dragFrame.setStyles({
			'background-color': '#FFFFFF',
			'opacity': 0.4,
			'width': this.displayframe.getStyle('width').toInt()*this.factor,
			'height': this.displayframe.getStyle('height').toInt()*this.factor,
			'position':'absolute',
			'z-index':'1000',
			'display': 'block',
			'cursor': 'move',
			'border': '1px solid #000'
		});

		
		this.dragFrame.injectBefore(this.mainImage);
								
		// Make Draggable
		this.dragFx = new Drag.Move(this.dragFrame, {'container': this.mainImage.getParent(), onDrag:this.dragHandler.bindAsEventListener(this)});
		
		// Center the dragger
		this.dragFrame.setStyles({
			'left': ((this.mainImage.width/2) - (this.dragFrame.getStyle('width').toInt()/2)),
			'top': ((this.mainImage.height/2) - (this.dragFrame.getStyle('height').toInt()/2))
		});
		this.dragHandler(this.dragFrame);

		this.mainImage.addEvent("mousemove", this.handleMouseMove.bindAsEventListener(this));
		this.dragFrame.addEvent("mousemove", this.handleMouseMove.bindAsEventListener(this));

	},
	
	topcorrection: 35,
	
	hitsImage: function(e) {
				
		var imageDimensions = this.mainImage.getCoordinates();
		imageDimensions.top 
		var inX = false;
		var inFrameX = false;
		var inY = false;		
		var inFrameY = false;
		
		if(
			(imageDimensions.left+(this.dragFrame.getStyle('width').toInt()/2) < e.client.x) 
			&& 
			((imageDimensions.left+imageDimensions.width) - (this.dragFrame.getStyle('width').toInt()/2) > e.client.x)
			) {
			inX = true;
		}
		if(inX === true) {
			inFrameX = true;
		} else if(
			(imageDimensions.left < e.client.x) 
			&& 
			((imageDimensions.left+imageDimensions.width) > e.client.x)
			) {
			inFrameX = true;
		}
		
		if(
			(imageDimensions.top+(this.dragFrame.getStyle('height').toInt()/2) < e.client.y) 
			&& 
			(((imageDimensions.top+imageDimensions.height) - (this.dragFrame.getStyle('height').toInt()/2) - this.options.bottomCorrection) > e.client.y)
			) {
			inY = true;
		}
		if(inY === true) {
			inFrameY = true;
		} else if(
			(imageDimensions.top < e.client.y) 
			&& 
			((imageDimensions.top+imageDimensions.height) > e.client.y)){
			inFrameY = true;
		}
		
		return {inX:inX,
				inFrameX:inFrameX,
				inY:inY,
				inFrameY:inFrameY};
	},
	
	handleMouseMove: function(e) {
		
		var evt = new Event(e);
		var hits = this.hitsImage(evt);
		
		if(hits.inFrameX == true && hits.inFrameY === true) {
		
			if(hits.inX === true) {
			
				var cLeft = evt.client.x;
			
				var newLeft = (cLeft-(this.dragFrame.getStyle('width').toInt()/2));

				this.dragFrame.setStyles({'left': newLeft});
			}
		
			if(hits.inY === true) {

				var cTop = evt.client.y;
			

				var newTop = (cTop-(this.dragFrame.getStyle('height').toInt()/2));
			
				this.dragFrame.setStyles({'top':newTop});
			
			}
		
			this.dragHandler(this.dragFrame);
		
		}
	},
	
	dragHandler: function(frame) {
		
		var newLeft = frame.getStyle('left').toInt();
		var newTop = frame.getStyle('top').toInt()-this.topcorrection;
		
		this.displayframe.scrollTo((newLeft*this.factor2), (newTop*this.factor2));
		
	},
	
	destroy: function() {
		this.dragFx = null;

		this.mainImage.removeEvents('mousemove');
		this.dragFrame.removeEvents('mousemove');
		this.handleMouseMove = Class.empty;
		this.dragFrame.remove();
		this.dragFrame = null;
	}

});
HKM.ProductZoomMapController.implement(new Options());
HKM.ProductZoomMapController.implement(new Events());


HKM.sharedImageZoom = null;

HKM.getSharedImageZoom = function() {
	return HKM.sharedImageZoom;
}

HKM.initProducZoom = function() {
	HKM.sharedImageZoom = new HKM.ProductZoom('productZoom', {});
}

window.addEvent('load', HKM.initProducZoom);