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



karw.PlaybackController = new Class({

	options: {
		controllerSize: 0.9,
		backgroundOpacity: 0.85,
		controllerHeight: 32,
		controllerBottomMargin: 20,
		appearDuration: 200,
		disappearDuration: 1000,
		controllerHideDelayTime: 2000,
		initialcontrollerHideDelayTime: 4000,
		slideCallOutHideDelay: 800
	},
	
	target: null,
	
	controllTarget: null,
	
	disappearTimer: null,
	
	appearFx: null,
	
	buttonsContainer: null,
	
	indexContainer: null,
	
	currentButtonIndex: 0,
	
	slideCallOutHideTimer: null,
	
	playButton: null,
	
	pauseButton: null,
	
	initialize: function(target, controllTarget, options) {
		this.setOptions(options);
		this.target	= $(target);
		this.controllTarget = controllTarget;
		
		this.setup();
	},
	
	setup: function() {
		
		if(this.controllTarget.getNumberOfSlides() < 2) {
			this.target.destroy();
			return;
		} 
		
		this.controllTarget.getTarget().adopt(this.target);

		var newBackgroundElement = new Element('div');
		newBackgroundElement.addClass('pbc-ignore-size');
		newBackgroundElement.setStyles({
										'background-color':this.target.getStyle('background-color'),
										'width': '100%',
										'height': '100%',
										'opacity': this.options.backgroundOpacity,
										'position': 'absolute',
										'left': 0,
										'top': 0,
										'z-index': 1
										});
		
		
		this.buttonsContainer = new Element('div');
		var buttons = this.target.getElements('div');
		var numberOfButtons = buttons.length;
		var buttonWidth = this.getControllerSize().x / numberOfButtons;

		for(var i=0;i<buttons.length;i++) {
			
			var buttonTitle = buttons[i].get('text');
			
			// Clear the button
			buttons[i].empty();
			buttons[i].setStyles({
									'cursor': 'pointer',
									'margin-right': 11
								});

			buttons[i].addEvent('click', this.handleClick.bindWithEvent(this));
			
			buttons[i].inject(this.buttonsContainer);
			
			if(buttons[i].hasClass('pbc-pauze')) {
				this.pauseButton = buttons[i];
			}
			if(buttons[i].hasClass('pbc-play')) {
				this.playButton = buttons[i];
				this.playButton.setStyle('display', 'none');
			}
		}
		
		this.buttonsContainer.setStyles({
									'display': 'block',
									'float': 'left',
									'position': 'absolute',
									'z-index': 110,
									'left': 10,
									'top': 6,
									'border-right': '1px solid #697471',
									'height': 20
									});

		this.buttonsContainer.inject(this.target);
		
		// Add the slide control numbers
		var numberOfSlides = this.controllTarget.getNumberOfSlides();
		var displayIndex = 1;
		this.indexContainer = new Element('div');

		for(var i=0;i<numberOfSlides;i++) {
			
			var slideIndexDisplay = new Element('div');
			var slideIndexDisplayInner = new Element('span');
			
			slideIndexDisplay.setStyles({'cursor': 'pointer'});
			slideIndexDisplay.addClass('pbc-section-button');
			
			slideIndexDisplayInner.set('text', displayIndex);
			slideIndexDisplay.addEvent('click', this.controllTarget.displaySlideAtIndex.bind(this.controllTarget, i));
			
			slideIndexDisplayInner.inject(slideIndexDisplay);
			slideIndexDisplay.inject(this.indexContainer);
			
			slideIndexDisplay.addEvent('mouseenter', this.slideIndexMouseOverHandler.bindWithEvent(this, [slideIndexDisplay, i]));
			slideIndexDisplay.addEvent('mouseleave', this.slideIndexMouseOutHandler.bindWithEvent(this, [slideIndexDisplay, i]));	
			
			displayIndex++;
		}
		
		this.indexContainer.setStyles({
									'position': 'absolute',
									'display': 'block',
									'z-index': 999,
									'float': 'left',
									'left': 57,
									'top': 6,
									'margin-right': 6,
									'margin-top': 2
								});
								
		this.indexContainer.inject(this.target);
				
		this.target.setStyles({
								'background-color': 'transparent',
								'display': 'block',
								'height': this.getControllerSize().y,
								'position': 'absolute',
								'top': this.getControllerMargin().y,
								'left': this.getControllerMargin().x
								});
																		
		newBackgroundElement.injectInside(this.target);
		
		
		// Calculate sizes
		var slideControllLength = 0;
		var indexControllers = this.indexContainer.getChildren();
		for(var i=0;i<indexControllers.length;i++) {
			
			slideControllLength += indexControllers[i].getSize().x;
			slideControllLength += indexControllers[i].getStyle('margin-left').toInt();
			slideControllLength += indexControllers[i].getStyle('margin-right').toInt();

		}
		
		// Correct pixel bug for IE6
		if(Browser.Engine.trident && Browser.Engine.version == IE_VERSION_6 && indexControllers.length > 0) {
			this.indexContainer.setStyle('padding', 0);
		}
		
		this.indexContainer.setStyle('width', slideControllLength);
		// this.indexContainer.setStyle('border', '1px solid #F09');
		
		// Set final target dimension
		var sizeElms = this.target.getChildren();
		var fullSize = 0;
		var biggestPositionSize = 0;
		for(var i=0;i<sizeElms.length;i++) {
			if(sizeElms[i].hasClass('pbc-ignore-size')) {
				continue;
			}

			var elementFullSize  = sizeElms[i].getSize().x;
			elementFullSize += sizeElms[i].getStyle('margin-left').toInt();
			elementFullSize += sizeElms[i].getStyle('margin-right').toInt();
			elementFullSize += sizeElms[i].getStyle('left').toInt();
			
			if(Browser.Engine.trident && Browser.Engine.version == IE_VERSION_6) {
				elementFullSize += sizeElms[i].getStyle('padding-left').toInt();
				elementFullSize += sizeElms[i].getStyle('padding-right').toInt();
			}
			
			fullSize = Math.max(fullSize, elementFullSize);
		}
		this.target.setStyles({
								'width': fullSize,
								'left': ((this.controllTarget.getSize().x / 2) - (fullSize / 2))
							  });
		
		
		//
		this.controllTarget.addEvent('onMouseEnter', this.targetMouseEnterHandler.bind(this));
		this.controllTarget.addEvent('onMouseLeave', this.targetMouseLeaveHandler.bind(this));
		this.controllTarget.addEvent('onStart', this.playHandler.bind(this));
		this.controllTarget.addEvent('onPauze', this.pauseHandler.bind(this));
		this.controllTarget.addEvent('onNext', this.nextHandler.bind(this));
		this.controllTarget.addEvent('onPrevious', this.previousHandler.bind(this));
		this.controllTarget.addEvent('onChangedSlide', this.changedHandler.bind(this));		
		
		this.disappearTimer = this.startHide.delay(this.options.initialcontrollerHideDelayTime, this);
		this.controllTarget.fireEvent('changedSlide');
	},
	
	handleClick: function(e) {
		var evt = new Event(e);
		var targetClass = evt.target.get('class');
		
		switch(targetClass) {
			case 'pbc-previous':
				this.controllTarget.previous();
				break;
			case 'pbc-play':
				this.controllTarget.startSlideShow();				
				break;
			case 'pbc-pauze':
				this.controllTarget.pauzeSlideShow();
				break;
			case 'pbc-next':
				this.controllTarget.next();
				break;
		}
	},
	
	getControllerSize: function() {
		return {'x': (this.controllTarget.getSize().x * this.options.controllerSize), 'y':this.options.controllerHeight};
	},
	
	getControllerMargin: function() {
		var rest = ((this.controllTarget.getSize().x - this.getControllerSize().x) / 2);
		return {'x':rest, 'y':(this.controllTarget.getSize().y - this.getControllerSize().y - this.options.controllerBottomMargin)};
	},
	
	targetMouseEnterHandler: function() {
		$clear(this.disappearTimer);
		this.startAppear();
	},
	
	targetMouseLeaveHandler: function() {
		this.disappearTimer = this.startHide.delay(this.options.controllerHideDelayTime, this);
	},
	
	startHide: function() {
		if($chk(this.appearFx)) {
			this.appearFx.cancel();
		}
		// this.appearFx = new Fx.Morph(this.target, {duration: this.options.disappearDuration, transition: Fx.Transitions.Sine.easeOut})
		// this.appearFx.start({'opacity': 0.6});
	},
	
	startAppear: function() {
		if($chk(this.appearFx)) {
			this.appearFx.cancel();
		}
		// this.appearFx = new Fx.Morph(this.target, {duration: this.options.appearDuration, transition: Fx.Transitions.Sine.easeOut})
		// this.appearFx.start({'opacity': 1});
	},
	
	playHandler: function() {
		if($chk(this.pauseButton)) {
			this.playButton.setStyle('display', 'none');
			this.pauseButton.setStyle('display', 'block');
		}
	},
	
	pauseHandler: function() {
		if($chk(this.pauseButton)) {
			this.pauseButton.setStyle('display', 'none');
			this.playButton.setStyle('display', 'block');
		}
	},
	
	nextHandler: function() {

	},
	
	previousHandler: function() {

	},
	
	changedHandler: function() {
		
		var buttonIndex = this.controllTarget.getCurrentIndex();
		var targetButtons = this.indexContainer.getChildren();
		
		var currentButton = targetButtons[this.currentButtonIndex];
		var targetButton = targetButtons[buttonIndex];
		
		this.currentButtonIndex = buttonIndex;
		
		currentButton.removeClass('selected');
		targetButton.addClass('selected');

	},
	
	slideIndexMouseOverHandler: function(e, indexDisplay, index) {
		this.fireEvent('onDidHoverOnIndex', [this, indexDisplay, index]);
	},
	
	slideIndexMouseOutHandler: function(e, indexDisplay, index) {
		if($chk(this.slideCallOutHideTimer)) {
			$clear(this.slideCallOutHideTimer);
		}
		this.slideCallOutHideTimer = this.fireEvent.delay(this.options.slideCallOutHideDelay, this, ['onShouldCancelIndex', [this, indexDisplay, index]]);
	}
});
karw.PlaybackController.implement(new Options);
karw.PlaybackController.implement(new Events);