var SlideShowItem = new Class({
	
	Implements: Options,
	
	options: {
		'hideTypeAndCaption': false,
		'onClick': $empty
	},
	
	initialize: function(oParent, oData, options){
		this.moParent = oParent;
		this.moData = oData;
		
		this.mbInjected = false;
		this.mbLoaded = false;
		this.mbActive = false;
		
		this.setOptions(options);
		
		this.build();
	},
	
	build: function(){
		// prepare DOM element
		this.moElement = new Element('div', {
			'class': 'ffp_ItemContainer'
		});
	},
	
	inject: function(oContainer){
		this.moElement.removeClass('hidden');
		if (this.mbInjected === true){
			return;
		}
		
		// add mouseover actions
		this.moElement.addEvent('mouseenter', (function(){
			this.moElement.imageElement.removeClass('passive').addClass('active');
			this.moElement.labelElement.removeClass('passive').addClass('active');
		}).bind(this)).addEvent('mouseleave', (function(){
			if (this.mbActive === true){
				return;
			}
			
			this.moElement.imageElement.removeClass('active').addClass('passive');
			this.moElement.labelElement.removeClass('active').addClass('passive');
		}).bind(this));
		
		// prepare image element
		this.moElement.imageElement = new Element('div', {
			'class': 'ffp_ItemImage loading passive'
		});
		$A(['clt', 'crt', 'crb', 'clb', 'lntop', 'lnbot', 'lnleft', 'lnright']).each(function(sClass){
			var o_el = new Element('div', {
				'class': sClass
			});
			o_el.inject(this.moElement.imageElement);
		}, this);
		this.moElement.imageElement.addEvent('click', (this.showContent).bind(this)).inject(this.moElement);
		
		// prepare label
		this.moElement.labelElement = new Element('div', {
			'class': 'ffp_ItemLabel passive'
		});
		
		if (this.options.hideTypeAndCaption === false){
			(new Element('div', {
				'class': 'ffp_ItemLabelType ' + ($type(this.moData.type) ? this.moData.type : 'profile')
			})).inject(this.moElement.labelElement);
			(new Element('a', {
				'href': '/' + this.moData.username,
				'class': this.mapStatus(this.moData.status),
				'text': this.moData.username
			})).inject(this.moElement.labelElement);
			this.moElement.labelElement.inject(this.moElement);
		}
		
		// inject & finish
		this.moElement.inject(oContainer);
		this.mbInjected = true;
	},
	
	load: function(){
		if (this.mbLoaded === true){
			return;
		}
		
		var o_image = new GayImage({
			'imageSource': this.moData.image,
			'container': this.moElement.imageElement,
			'onComplete': (function(){
				this.moElement.removeClass('loading');
				this.mbLoaded = true;
			}).bind(this)
		});
		o_image.load();
	},
	
	showContent: function(){
		if (this.moData.type == 'video'){
			this.moParent.showVideo(this.moData.original, ($type(this.moData.text) ? this.moData.text : this.moData.username));
		} else {
			this.moParent.showPhoto(this.moData.index);
		}
		
		this.options.onClick(this.moData, this);
	},
	
	mapStatus: function(iStatus){
		switch (iStatus){
			case '1':
			case 1:
				return 'online';
				
			case '2':
			case 2:
				return 'away';
				
			default:
				return 'offline';
		}
	}
});

var SlideShow = new Class({
	
	Implements: Options,
	
	miOffset: 0,
	
	
	options: {
		'url': false,
		'numVisible': 5,
		'hideTypeAndCaption': false,
		'onClick': $empty
	},
	
	initialize: function(oContainer, options){
		this.moContainer = $(oContainer);
		
		this.moContent = $A([]);
		
		this.setOptions(options);
		
		this.build();
	},
	
	build: function(){
		if ($type(this.moContainer) === false){
			return;
		}
		
		// prepare container
		this.moContainer.addClass('ffp_Container loading');
		
		// inject buttons
		this.prevButton = Element('div', {
			'class': 'ffp_Previous hidden'
		}).addEvent('click', (this.showPrevious).bind(this)).inject(this.moContainer);
		this.nextButton = Element('div', {
			'class': 'ffp_Next hidden'
		}).addEvent('click', (this.showNext).bind(this)).inject(this.moContainer);
		
		// prepare video
		this.moVideo = new Element('div', {
			'class': 'ffp_Video'
		}).set('tween', {
			'duration': 'normal', 
			'transition': Fx.Transitions.Expo.easeOut
		}).inject(this.moContainer, 'after');
		
		// get data
		this.fetchList();
	},
	
	fetchList: function(){
		if (this.options.url === false){
			return;
		}
		
		var o_req = new Request.JSON({
			'url': this.options.url,
			'method': 'get',
			'onComplete': (function(oResponse){
				if ($type(oResponse) === false){
					return;
				}
				
				this.maData = oResponse;
				
				this.prepareItems();
				
				this.setItems();
			}).bind(this)
		});
		o_req.send();
	},
	
	prepareItems: function(){
		this.maData.each(function(oItem, iIndex){
			oItem.index = iIndex;
			this.maData[iIndex] = new SlideShowItem(this, oItem, {
				'hideTypeAndCaption': this.options.hideTypeAndCaption,
				'onClick': this.options.onClick
			});
			this.moContent[iIndex] = [oItem.original, ($type(oItem.text) ? oItem.text : oItem.username)];
		}, this);
		
		this.quickbox = new QuickBox(this.moContent);
		this.setButtons();
	},
	
	getContent: function(){
		return this.moContent;
	},
	
	setItems: function(){
		// reset visibility of all items
		this.moContainer.getElements('div.ffp_ItemContainer').each(function(oEl){
			oEl.addClass('hidden');
		});
		
		// get right items
		var self = this;
		var o_subset = this.maData.filter(function(oEl, iIndex){
			return (iIndex >= self.miOffset && iIndex < (self.miOffset + self.options.numVisible));
		});
		
		this.moContainer.removeClass('loading');
		
		o_subset.each(function(oEl){
			oEl.inject(self.moContainer);
			oEl.load();
		});
	},
	
	setButtons: function(){
		// prev
		if (this.miOffset > 0){
			this.prevButton.removeClass('hidden');
		} else {
			this.prevButton.addClass('hidden');
		}
		
		// next
		if (this.maData.length > this.options.numVisible && (this.miOffset + this.options.numVisible) < this.maData.length){
			this.nextButton.removeClass('hidden');
		} else {
			this.nextButton.addClass('hidden');
		}
	},
	
	showNext: function(){
		if ((this.miOffset + this.options.numVisible) >= this.maData.length){
			return;
		}
		
		this.miOffset += this.options.numVisible;
		this.setItems();
		this.setButtons();
	},
	
	showPrevious: function(){
		if (this.miOffset <= 0){
			this.miOffset = 0;
			return;
		}
		
		this.miOffset -= this.options.numVisible;
		this.setItems();
		this.setButtons();
	},
	
	showPhoto: function(iIndex){
		this.hideVideo();
		
		this.quickbox.open(iIndex);
	},
	
	showVideo: function(sURL, sTitle){
		if ($('explicit_video_text')){
			$('explicit_video_text').addClass('hidden');
		}
		// check if video is explicit
		if (sURL.match(/\/explicit\/[^\.]+\.jpg$/)){
			if (!$('messengerStatus')){
				// not logged in -> show erotic message
				if ($('explicit_video_text')){
					$('explicit_video_text').removeClass('hidden');
				}
			} else if ($('messengerStatus') && $('messengerStatus').hasClass('goldmember')){
				// user aint gold -> redirect to /eroticcontent/ 
				location = '/eroticcontent/';
				return;
			}
		}
		

		var self = this;
		this.moVideo.get('tween').removeEvents().addEvent('complete', function(){
			var swf = new Swiff('/assets/swf/player.swf',{
				id:'flvPlayerSWF',
				container: self.moVideo,
				width:390,
				height:350,
				vars: {
					skin:'/assets/swf/skin.swf',
					fullscreen:true, 
					logo:'/assets/images/movie_watermark.png',
					file: sURL,
					autostart:true,
					title: sTitle
				},
				params: {
					allowFullScreen:true
				},
				properties: {name:'flvPlayerSWF'}
			});
		});
		this.moVideo.tween('height', '365px');
	},
	
	hideVideo: function(){
		if ($('explicit_video_text')){
			$('explicit_video_text').addClass('hidden');
		}
		this.moVideo.empty();
		this.moVideo.setStyle('height', 0);
	}
});