/*Slideshow.Content = Slideshow.Extended.extend({
	options: {
		dumpControls		: function(slide) {
			var _html = [];
			_html.push('<span id="slideshow-controls-previous" onclick="Slideshow.instances[\''+this.identifier+'\'].previousSlide();" style=\"cursor:pointer\">&laquo; Προηγούμενη&nbsp;</span> - ');
			_html.push('<span id="slideshow-controls-next" onclick="Slideshow.instances[\''+this.identifier+'\'].nextSlide()" style=\"cursor:pointer\">&nbsp;Επόμενη&nbsp;&raquo;</span>');
			return _html.join('');	
		}
	},
	initialize : function() {		
		this.parent.parent.apply(this, arguments);		
		this.controls = $C('div',{
			'styles' : {
				'padding'	: '10px 0',
				'background'	: 'black',
				'margin'	: '0',
				'opacity'	: 0.8,
				'text-align' 	: 'center',
				'line-height'	: 'normal',
				'color'		: 'white',
				'z-index'	: '99999999',
				'position'	: 'relative',
				'width'		: this.placeholder.offsetWidth
			}
		}).setClass('slideshow-controls').makeUnselectable().
		injectIn(this.placeholder);
		this.controls.setHTML(this.options.dumpControls());

	//	this.preload(slides);
		return this;			
		
	},
	
	addSlide : function(slide, index) {
		this.parent.parent.apply(this, arguments);		
		//return this;
		$C('p').setHTML(slide.caption).injectIn(slide.element).
		setStyles({
			'text-align'	: 'center',
			'margin'	: 0,
			'padding'	: 0,
			'position'	: 'relative',
			'background' 	: '#fff',
			'width'		: '100%',
			'height'	: 30,
			'opacity'	: 0.5
		});

	}
});
*/

Slideshow.Collection = Slideshow.Fade.extend({			
	options: {
		dumpControls: function(slide) {
			var html = [], instance = 'Slideshow.instances[\''+this.identifier+'\']';
			html.push('<span id="slideshow-controls-previous" onmousedown="$E(event).stop();'+instance+'.previousSlide();">&laquo;</span>\n');
			html.push('<span id="slideshow-controls-play" onmousedown="$E(event).stop();'+instance+'.togglePlay(this)">&gt;</span>\n');
			html.push('<span id="slideshow-controls-next" onmousedown="$E(event).stop();'+instance+'.nextSlide()">&raquo;</span>');
			return html.join('');	
		},
		
		height: 300,
		autoPlay: true,
		leaveDelay: 800,
		enterDelay: 100,
		fitImg: false,
		interval: 4000,
		
		// Events
		onPlay: function(mode) 			{ $('slideshow-controls-play').addClass('paused');	},
		onStop: function(mode)		 	{ $('slideshow-controls-play').removeClass('paused');	},
		onLoadProgress: function(index) 			{ this.overlay.show();},		
		onChange: function(index, slide) 	{
			if(this.counter) {
				this.counter.setHTML( index + ' / ' + this.slides.length  + '');	
			}
		}
	},
	
	initialize : function(options) {
	
		this.setOptions(options);		
		//this.collectionId = collectionId; TODO: needed?

		// Create a placeholder TODO: needed?
		//document.write('<div id="slideshow-' + $uniqueID(this) + '" style="height: '+this.options.height+'px; background: #6f6f6f;border: 1px solid #333;overflow: hidden; position: relative; margin: 10px 0;"></div>');
		
		// Fetch stuff
		//return this.fetch(); TODO: needed?
		
		return this.process(document.slides);
	},

	fetch: function() {
		new Ajax.RPC({}).send('media.GetCollection', this.collectionId, false, 1, 50, true).
		chain(this.process.bind(this));
		
		return this;
	},
	
	process: function(slides) {
		this.items = slides;
		
		this.slidesFromMedia= [];
		this.items.each(function(item, index) {
			this.slidesFromMedia.push($merge(item, {
				'img'	: item.img,
				'width'	: item.width,
				'height': item.height
			}));
		}, this);
				
		window.addEvent('DOMContentLoaded', this.loaded.bind(this) );
	},
	
	// To be called when DOM is ready
	// Practically replaces initialize
	loaded: function() {	
		// Call the initialize.parent to initialize
		this.initialize.parent.call(this, this.slidesFromMedia, $('slideshow'));	
		
		// this.overlay
		this.overlay  = $C('div', {
			'id'		: 'slideshow-overlay',
			'styles' 	: {
				'background' : 'url('+Core.path  + 'assets/css/slideshow/slideshow-collection-overlay.png)',
				'position'	 : 'absolute',
				'left'		: 0,
				'width' 	: '100%',
				'z-index'	: '9999999',
				'color'		: 'white',
				'padding'	: '10px 0',
				'margin'	: '10px 0 0 0'				
			}
		}).makeUnselectable();

		// this.controls
		this.controls = $C('div',{
			'id'		: 'slideshow-controls',
			'styles' 	: {
				'color'		: 'white',
				'z-index'	: '9999999'
			}
		}).
		setHTML(this.options.dumpControls()).
		makeUnselectable().
		injectIn(this.overlay);
		
		// this.counter
		this.counter= $C('div', {
			'id'		: 'slideshow-counter',
			'styles'	: {
				
			}
		}).
		setHTML('1 / '+this.slides.length).
		injectIn(this.overlay);
		
		// Handle spans
		this.controls.getElements('span').
		setOpacity(.5).
		addEvents({
			'mouseenter' : function() {
				this.setOpacity(.9);	
			},
			
			'mouseleave' : function() {
				this.setOpacity(.5);
			}
		});
		
		this.overlay.injectIn(this.element);
		this.overlay.hide().setBlockStyles();
		var bottom = -this.overlay.offsetHeight;
		this.overlay.restoreBlockStyles().setStyle('bottom', bottom );
		
	
		this.timerBounds 	= null;
		this.bound 			= {
			'mouseleave'	: function(event) {
				if(this.isPreloading) return this;

				$clear(this.timerBounds);
				this.timerBounds = this.controlsFx.start.bind(this.controlsFx, -this.overlay.offsetHeight).delay(this.options.leaveDelay);
			}.bind(this),
			
			'mouseenter'	: function(event) {
				if(this.isPreloading) return this;				
				$clear(this.timerBounds);
				this.timerBounds  = this.controlsFx.start.bind(this.controlsFx, 0).delay(this.options.enterDelay);
			}.bind(this)
		}
		
		// Not for now
		if(this.options.useWheel) {
			this.bound.mousewheel = function(event){
				if(this.isPreloading) {
					return this;								
				}
				event.stop();
				return this[(event.wheel < 0 ? 'next' : 'previous') + 'Slide']();
			}.bind(this)
		}

		
		this.controlsFx = new Fx.Style(this.overlay, 'bottom', {
			'duration'		: 700,
			'transition'	: Fx.Transitions.Quart.easeOut   
		});		
		
	//	this.element.addEvents(this.bound);		
		
		PNGFix.fix(this.overlay);
	
		return this;				
	}

});