if(!$chk(karw)) {
	var karw = {};
}

karw.CalloutController = new Class({

	options: {
		appearDuration: 500,
		disappearDuration: 200,
		calloutStyles: {
							'background-color': '#FFF',
							'display': 'block',
							'color': '#404b4c',
							'opacity': '0.9',
							'width': '200px',
							'font-family': 'Arial, Helvetica, Verdana',
							'font-size': 12
						},
		imageSubPath: '/static',
		bottomImagePath: '/images/slideshow/callout/callout_bottom.png'
	},
	
	target: null,
	
	callouts: null,
	
	calloutContainers: null,
	
	controller: null,
	
	appearFx: null,
	
	disappearFx: null,
	
	currentCalloutIndex: null,
	
	initialize: function( target, callouts, controller, options) {
		this.setOptions(options);
		this.target = target;
		this.controller = controller;
		this.callouts = callouts;
		
		this.setup();
	},
	
	setup: function() {
		
		this.createCallOuts();

		// this.target.addEvent('onNext', this.calloutHandler.bind(this, true));
		// this.target.addEvent('onPrevious', this.calloutHandler.bind(this, false));
		
		this.controller.addEvent('onDidHoverOnIndex', this.calloutIndexHandler.bind(this));
		this.controller.addEvent('onShouldCancelIndex', this.hideCalloutIndexHandler.bind(this));
		
		//this.calloutHandler();
	},
	
	createCallOuts: function() {
		
		this.calloutContainers = [];
		
		for(var i=0;i<this.callouts.length;i++) {
			var callout = false;
			if($chk(this.callouts[i])) {
				callout = new Element('div');
				callout.setStyles(this.options.calloutStyles);
				
				var calloutBackground = new Element('div');
				calloutBackground.setStyles({
											'background-color': callout.getStyle('background-color'),
											'opacity': callout.getStyle('opacity'),
											'height': '30px',
											'width': '100%',
											'position': 'absolute',
											'left': 0,
											'top': 0,
											'z-index': 0
											});
											
				calloutBackground.addClass('slco-background')
				
				callout.setStyles({
										'background-color': 'transparent',
										'opacity': 1
								  });

				calloutBackground.inject(callout);
				
				var textContainer = new Element('span');
				textContainer.set('html', this.callouts[i]);
				textContainer.setStyles({
										'z-index': 1,
										'display': 'block',
										'position': 'absolute',
										'margin': 10
									});

				textContainer.inject(callout);
				
				// Add bottom
				var bottom = new Element('div');
				bottom.setStyles({
									'display': 'block',
									'position': 'absolute',
									'bottom': 0,
									'left': 0,
									'background-repeat': 'no-repeat',
									'width': '100%',
									'height': 8,
									'background-color': 'transparent'
								});
				
				var bgImagePath = karw.context + this.options.imageSubPath + this.options.bottomImagePath								
				if(Browser.Engine.trident  && Browser.Engine.version <= IE_VERSION_7) {								
					bottom.setStyle('filter', 'progid:dximagetransform.microsoft.alphaimageloader(src=\''+bgImagePath+'\', sizingmethod=\'image\')');
				} else {
					bottom.setStyle('background-image', 'url('+bgImagePath+')');
				}
				bottom.inject(callout);
				
			}
			this.calloutContainers[i] = callout;
		}
		
	},
	
	cancelFx: function() {

		if($chk(this.appearFx)) {
			
			var ato		= this.appearFx.to;
			var aelm	= this.appearFx.element;
			this.appearFx.cancel();

			for(var e in ato) {
				aelm.setStyle(e, ato[e][0].value);
			}
		}
		
		if($chk(this.disappearFx)) {
			
			var dto		= this.disappearFx.to;
			var delm	= this.disappearFx.element;
			this.disappearFx.cancel();
			
			for(var e in dto) {
				delm.setStyle(e, dto[e][0].value);
			}
		}
		
	},
	
	calloutHandler: function(isNext) {
		this.cancelFx();
		this.hideCurrentCallout();
		this.showCalloutAtIndex(this.target.getCurrentIndex());
	},
	
	calloutHandlerAtIndex: function(index, x, y, isNext) {
		this.cancelFx();
			if(this.currentCalloutIndex !== index) {
				this.hideCurrentCallout();
			}
		this.showCalloutAtIndex(index, x, y);
	},
	
	hideCurrentCallout: function() {
		if(!this.calloutContainers[this.currentCalloutIndex] || !$chk(this.currentCalloutIndex)) {
			return;
		}
		
		var currentContainer = this.calloutContainers[this.currentCalloutIndex];

		if($chk(this.disappearFx)) {
			this.disappearFx.cancel();
		}
		this.disappearFx = new Fx.Morph(currentContainer, {duration:this.options.disappearDuration, onComplete:this.hideCalloutComplete.bind(this, currentContainer)});
		this.disappearFx.start({
							// 'top': -(currentContainer.getSize().y),
							'opacity': 0
							});
	},
	
	showCalloutAtIndex: function(index, x, y) {

		if(!this.calloutContainers[index]) {
			return;
		}
		
		var currentContainer = this.calloutContainers[index];
		
		if(this.currentCalloutIndex != index){
			currentContainer.setStyles({
										'position': 'absolute',
										'left': this.target.getSize().x,
										'opacity' : 0.0
										});
		}
		
		currentContainer.injectInside(this.target.getTarget());

		currentContainer.setStyle('height', (currentContainer.getElement('span').getScrollSize().y + currentContainer.getElement('span').getStyle('margin-top').toInt() + currentContainer.getElement('span').getStyle('margin-bottom').toInt()) + 8);
		currentContainer.setStyle('width', (currentContainer.getElement('span').getScrollSize().x + currentContainer.getElement('span').getStyle('margin-left').toInt() + currentContainer.getElement('span').getStyle('margin-right').toInt()));
		
		currentContainer.getElement('.slco-background').setStyle('height', currentContainer.getElement('span').getSize().y + currentContainer.getElement('span').getStyle('margin-top').toInt() + currentContainer.getElement('span').getStyle('margin-bottom').toInt());


		var top = $chk(y) ? (y - currentContainer.getSize().y - 20)  : 20;
			if(Browser.Engine.trident) {
				top -= 10;
			}
		
		
		var newX = ($chk(x) ? (x - 31) : 20) + 8;
		var newY = top + 8;
		
		newX -= this.target.getPosition().x;
		newY -= this.target.getPosition().y;
		
		currentContainer.setStyles({		
			'left': newX,
			'top': newY
		});
		
		if($chk(this.appearFx)) {
			this.appearFx.cancel();
		}

		this.appearFx = new Fx.Morph(currentContainer, {duration:this.options.appearDuration});
		// this.appearFx.start({
		// 					'left': $chk(x) ? (x - 31) : 20,
		// 					'top': top,
		// 					'opacity': 1
		// 					});

		this.appearFx.start({
							'left': newX,
							'top': newY,
							'opacity': 1
							});

		
		this.currentCalloutIndex = index;
		
	},
	
	showCalloutComplete: function(callout) {
		
	},
	
	hideCalloutComplete: function(callout) {
		callout.dispose();
	},
	
	calloutIndexHandler: function(controller, indexElement, index) {
		this.calloutHandlerAtIndex(index, indexElement.getPosition().x, indexElement.getPosition().y);
	},
	
	hideCalloutIndexHandler: function(controller, indexElement, index) {
		if(index == this.currentCalloutIndex) {
			this.hideCurrentCallout();
		}
	}

});
karw.CalloutController.implement(new Options);
karw.CalloutController.implement(new Events);