var Spotlight = new Class({
	
	Implements: Options,
	
	options: {
		'url': false,
		'itemsPerRow': 3
	},
	
	initialize: function(oContainer, options){
		this.moContainer = $(oContainer);
		this.setOptions(options);
		
		this.build();
	},
	
	build: function(){
		if (!$type(this.moContainer) || this.options.url === false){
			return;
		}
		
		this.maItems = $A([]);
		this.maItemContainers = $A([]);
		this.moCurrentItem = false;
		
		this.buildBody();
	},
	
	buildBody: function(){
		// previous button
		this.moPrevious = new Element('div', {
			'class': 'spPrevious hidden'
		}).inject(this.moContainer);
		
		// next button
		this.moNext = new Element('div', {
			'class': 'spNext hidden'
		}).inject(this.moContainer);
		
		// preview container
		var o_preview_container = new Element('div', {
			'class': 'spPreview'
		});
		$A(['lt', 'rt', 'rb', 'lb']).each(function(sPos){
			(new Element('div', {
				'class': 'corner ' + sPos
			})).inject(o_preview_container);
		}, this);
		
		this.moPreview = new Element('div', {
			'class': 'spPreviewImage'
		});
		this.moPreview.inject(o_preview_container);
		o_preview_container.inject(this.moContainer);
		this.moPreview.addEvent('click', (function(oEvent){
			if (this.moPreview.hasClass('loading') || this.moCurrentItem === false){
				return;
			}
			
			if ((Browser.Platform.mac === true && oEvent.meta === true) || (!Browser.Platform.mac && oEvent.control === true)){
				window.open('/' + this.moCurrentItem.data.username);
			} else {
				top.location = '/' + this.moCurrentItem.data.username;
			}
		}).bind(this));
		
		// caption container
		var o_caption_cont = new Element('div', {
			'class': 'spCaption'
		}).inject(this.moContainer);
		this.moCaption = new Element('a').inject(o_caption_cont);
		
		// create item container
		var o_items = new Element('div', {
			'class': 'spItems'
		}).inject(this.moContainer);
		this.maItemContainers.include(o_items);
		
		// create more items container
		this.moMoreItems = new Element('div', {
			'class': 'spMoreItems'
		}).inject(this.moContainer);
		
		this.loadData();
		
		// fancy open all items in new windows
		try {
			this.moContainer.getNext('div.spBottom').addEvent('dblclick', (function(){
				this.moContainer.getElements('div.spItem').each(function(oItem){
					window.open('/' + oItem.data.username);
				});
			}).bind(this));
		} catch (x){}
	},
	
	loadData: function(){
		(new Request.JSON({
			'url': this.options.url,
			'method': 'get',
			'onComplete': (function(oResponse){
				if ($type(oResponse) === false){
					return;
				}
				
				this.moContainer.removeClass('loading');
				
				oResponse = $A(oResponse);
				// no response
				if (oResponse.length === 0){
					this.moCaption.getParent().removeClass('spCaption');
					return;
				}
				
				this.moPreview.addClass('loading');
				oResponse.each((this.addItem).bind(this));
			}).bind(this)
		})).send();
		return true;
	},
	
	addItem: function(oData, iIndex){
		var o_item = new Element('div', {
			'class': 'spItem'
		});
		
		$A(['corner lt', 'border top', 'corner rt', 'border left', 
			'border right', 'corner lb', 'border bottom', 
			'corner rb']).each(function(sExtra)
			{
				(new Element('div', {
					'class': sExtra
				})).inject(o_item);
			}, this);
		
		if (iIndex == (this.options.itemsPerRow - 1)){
			this.showNextButton();
		}
		
		// determine right item container
		var i_container_index = Math.floor(iIndex / this.options.itemsPerRow);
		if (this.maItemContainers.length < (i_container_index + 1)){
			// add more button
			if (!$type(this.moMoreButton)){
				this.addMoreButton();
			}
			
			var o_container = new Element('div', {
				'class': 'spItems' + (i_container_index == 1 ? ' border' : '')
			}).inject(this.moMoreItems);
			this.maItemContainers.include(o_container);
		}
		
		o_item.inject(this.maItemContainers[i_container_index]);
		o_item.data = oData;
		o_item.index = iIndex;
		o_item.image = new GayImage({
			'imageSource': oData.image,
			'container': o_item,
			'valign': 'face',
			'width': 45,
			'height': 30,
			'nudgeLeft': 3,
			'onComplete': (function(){
				if (iIndex !== 0){
					return;
				}
				
				// set first thumb in preview
				this.showItem(o_item);
			}).bind(this)
		});
		o_item.image.load();
		
		var o_this = this;
		// add mouse over effect
		o_item.addEvent('mouseenter', function(){
			this.addClass('active');
		}).addEvent('mouseleave', function(){
			if (o_this.moCurrentItem == this){
				return;
			}
			
			this.removeClass('active');
		}).addEvent('click', function(){
			o_this.showItem(this);
		});
		
		this.maItems.include(o_item);
	},
	
	showItem: function(oItem){
		// hide last item
		this.moPreview.addClass('loading');
		this.moPreview.empty();
		
		// load new item
		var o_image = new GayImage({
			'imageSource': oItem.data.original,
			'container': this.moPreview,
			'valign': 'face',
			'width': 154,
			'height': 101,
			'onComplete': (function(){
				
				if (oItem.index > (this.options.itemsPerRow - 1)){
					this.showMoreItems();
				}
				
				if (this.moCurrentItem !== false){
					this.moCurrentItem.removeClass('active');
				}
				
				this.moCurrentItem = oItem;
				
				// show new item
				this.moPreview.removeClass('loading');
				oItem.addClass('active');
				this.moCaption.set('text', oItem.data.username);
				this.moCaption.set('href', '/' + oItem.data.username);
				
				// set buttons
				if (oItem.index > 0){
					this.showPreviousButton();
				}
				
				if (oItem.index < (this.maItems.length - 1)){
					this.showNextButton();
				}
				
				if (oItem.index >= (this.maItems.length - 1)){
					this.hideNextButton();
				}
				
				if (oItem.index === 0){
					this.hidePreviousButton();
				}
				
			}).bind(this)
		});
		o_image.load();
	},
	
	showNextButton: function(){
		this.moNext.removeClass('hidden');
		this.moNext.removeEvents();
		this.moNext.addEvent('click', (this.showNext).bind(this));
	},
	
	showPreviousButton: function(){
		this.moPrevious.removeClass('hidden');
		this.moPrevious.removeEvents();
		this.moPrevious.addEvent('click', (this.showPrevious).bind(this));
	},
	
	hideNextButton: function(){
		this.moNext.addClass('hidden');
		this.moNext.removeEvents();
	},
	
	hidePreviousButton: function(){
		this.moPrevious.addClass('hidden');
		this.moPrevious.removeEvents();
	},
	
	addMoreButton: function(){
		this.moMoreButton = new Element('div', {
			'class': 'spMore'
		});
		this.moMoreButton.addEvent('click', (function(){
			this.toggleMoreItems();
		}).bind(this)).inject(this.moMoreItems, 'before');
	},
	
	showMoreItems: function(){
		this.moContainer.addClass('more');
		this.moMoreButton.addClass('less');
	},
	
	toggleMoreItems: function(){
		if (this.moMoreButton.hasClass('less')){
			this.moMoreButton.removeClass('less');
			this.moContainer.removeClass('more');
			if (this.moCurrentItem.index > (this.options.itemsPerRow - 1)){
				this.showItem(this.maItems[(this.options.itemsPerRow - 1)]);
			}
		} else {
			this.moMoreButton.addClass('less');
			this.moContainer.addClass('more');
		}
	},
	
	showNext: function(){
		if (!$type(this.maItems[(this.moCurrentItem.index + 1)])){
			return;
		}
		
		var o_item = this.maItems[(this.moCurrentItem.index + 1)];
		
		this.showItem(o_item);
	},
	
	showPrevious: function(){
		if (!$type(this.maItems[(this.moCurrentItem.index - 1)])){
			return;
		}
		
		var o_item = this.maItems[(this.moCurrentItem.index - 1)];
		
		this.showItem(o_item);
	}
});