var K_ImageGallery = new Class({

	Implements: [Options,Events],

	options: {
		'captions': false,
		'captionsContainer': '',
		'controller': false,
		'delay': 2500,
		'duration': 1250,
		'fx': function(p){return -(Math.cos(Math.PI * p) - 1) / 2;},
		'height': 0,
		'indicators': true,
		'loop': true,
		'navigation': true,
		'path': '',
		'paused': false,
		'random': false,
		'type': '',
		'width': 0
	},

	initialize: function (container, images, options) {
		if (!document.id(container)) {
			return false;
		}

		this.setOptions(options);

		if (this.options.captions == true && !document.id(this.options.captionsContainer)) {
			return false;
		}

		this.images = [];
		this.captions = [];
		this.container = document.id(container);

		if (this.options.captions == true) {
			this._buildCaption(document.id(this.options.captionsContainer));
		}

		$each(images, function (caption, image) {
			this.images.push(image)
			this.captions.push(caption.caption)
		}.bind(this));

		var options = {
			'center': false,
			'color': '#000',
			'controller': this.options.controller,
			'delay': this.options.delay,
			'duration': this.options.duration,
			'height': this.options.height,
			'loader': {'animate': [this.options.path + '/css/slideshow2/loader-#.png', 12]},
			'loop': this.options.loop,
			'onComplete': this._complete.bind(this),
			'onStart': this._start.bind(this),
			'paused': this.options.paused,
			'random': this.options.random,
			'resize': false,
			'titles': false,
			'transition': this.options.fx,
			'width': this.options.width
		};

		if (this.options.type == 'Random') {
			this.options.type = ['KenBurns', 'Push', 'Flash', 'Fold', ''].getRandom();
		}

		switch (this.options.type) {
			case 'KenBurns':
				this.slideshow = new Slideshow.KenBurns(container, images, options);
				break;

			case 'Push':
				this.slideshow = new Slideshow.Push(container, images, options);
				break;

			case 'Flash':
				this.slideshow = new Slideshow.Flash(container, images, options);
				break;

			case 'Fold':
				this.slideshow = new Slideshow.Fold(container, images, options);
				break;

			default:
				this.slideshow = new Slideshow(container, images, options);
		}

		if (this.options.indicators == true) {
			this._buildIndicators();

			if (this.options.navigation == true) {
				this._buildNavigation();
			}
		}
	},

	_buildIndicators: function () {

		var boundingContainer = new Element('div', {
			'styles': {
				'height': '10px',
				'margin-top': '6px',
				'width': this.options.width
			}
		}).inject(this.container);

		this.navigationContainer = new Element('div', {
			'styles': {
				'float': 'left',
				'height': '12px'
			}
		}).inject(boundingContainer);

		this.indicators = [];
		this.images.each(function (image, index) {

			 var indicator = new Element('div', {
				'styles': {
					/* 'background': '#787878', */
					'cursor': 'pointer',
					'color': '#666',
					'font-family': 'Verdana',
					'font-size': '11px',
					'float': 'left',
					'margin': '2px 0 2px 4px'
				},
				'text': index + 1
			}).addEvents({
				'click': this._go.pass([index], this)
			}).inject(this.navigationContainer);
				
			this.indicators.push(indicator);

		}.bind(this));
	},

	_buildNavigation: function () {
		new Element('div', {
			'styles': {
				'background': 'url('+ this.options.path +'/images/misc/arrowLeft.png) 0 60% no-repeat',
				'cursor': 'pointer',
				'padding': '0 0 0 10px'
			},
			'text': 'Previous'
		}).addEvents({
			'click': this._previous.pass([], this)
		}).inject(document.id('navConLeft'));

		new Element('div', {
			'styles': {
				'background': 'url('+ this.options.path +'/images/misc/arrowRight.png) 100% 60% no-repeat',
				'cursor': 'pointer',
				'padding': '0 10px 0 0'
			},
			'text': 'Next'
		}).addEvents({
			'click': this._next.pass([], this)
		}).inject(document.id('navConRight'));
		
		this.pauseUnpause = new Element('div', {
			'styles': {
				'background': 'url('+ this.options.path +'/images/misc/arrowRight.png) 100% 60% no-repeat',
				'cursor': 'pointer',
				'padding': '0 10px 0 0'
			},
			'text': 'Stop Slideshow'
		}).addEvents({
			'click': this._togglePause.pass([], this)
		}).inject(document.id('navConPause'));		
	},

	_togglePause: function () {
		if (this.paused == true) {
			this.paused = false;
			this.pauseUnpause.set('text', 'Stop Slideshow');
			
			this._pause();
			return this;
		}
		
		this.pauseUnpause.set('text', 'Start Slideshow');
		this.paused = true;
		this._unpause();
		
		return this;
	},
	
	_buildCaption: function (captionsContainer) {
		captionsContainer.empty();

		this.captionsContainer = new Element('div', {
		}).inject(captionsContainer);
	},

	_changeCaption: function (caption) {
		this.captionsContainer.setOpacity(0).set('html', caption);
		this.captionsContainer.fade(1);
	},

	_markIndicator: function (indicator) {
		this.indicators.each(function (indicator) {
			indicator.setStyle('color', '#666');
		});

		indicator.setStyle('color', '#fff');
	},

	_go: function (n) {
		this.slideshow.go(n);
	},

	_previous: function () {
		this.slideshow.prev();
	},

	_next: function () {
		this.slideshow.next();
	},

	_start: function (n) {
		if (this.options.indicators == true) {
			this._markIndicator(this.indicators[n]);
		}
			
		if (this.options.captions == true) {
			this._changeCaption(this.captions[n]);
		}
	},
	
	_pause: function () {
		this.slideshow.pause(false);
	},
	
	_unpause: function () {
		this.slideshow.pause(true);
	},

	_complete: function (n)	{
	}
});