var Spotlight = new Class({
	
	Implements: Options,
	
	options: {
		'url': false,
		'itemsPerRow': 8,
		'walkDelay': 5000
	},
	
	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.maItemIndex = $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'
		});
		
		o_preview_container.addEvent('mouseenter', (this.stopWalking).bind(this));
		o_preview_container.addEvent('mouseleave', (this.startWalking).bind(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(o_preview_container);
		
		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 item index (sub)container
		var o_indexContainer = new Element('div', {
			'class': 'spItemIndexContainer'
		}).inject(this.moContainer);
		
		this.moIndexSubContainer = new Element('div', {
			'class': 'spItemIndexSubContainer'
		}).setStyle('width', 14).inject(o_indexContainer);

		var o_item_index = new Element('div', {
			'class': 'spItemIndex active'
		}).addEvent('click', (function(){
			this.showItem(this.maItems[0]);
		}).bind(this)).inject(this.moIndexSubContainer);
		
		this.maItemIndex.include(o_item_index);
		// get spotlight
		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'
		});
		
		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 item containers
			var o_container = new Element('div', {
				'class': 'spItems' + (i_container_index > 0 ? ' hidden' : '')
			}).inject(this.maItemContainers[0], 'after');
			this.maItemContainers.include(o_container);

			var o_item_index = new Element('div', {
				'class': 'spItemIndex' + (i_container_index === 0 ? ' active' : '')
			}).addEvent('click', (function(){
				this.showItem(this.maItems[((i_container_index)*this.options.itemsPerRow)]);
			}).bind(this)).inject(this.moIndexSubContainer);
			
			this.moIndexSubContainer.setStyle('width', 
				(this.moIndexSubContainer.getStyle('width').toInt() + 14));
			
			this.maItemIndex.include(o_item_index);
		}
		
		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': 38,
			'height': 38,
			'nudgeLeft': 3,
			'onComplete': (function(){
				if (iIndex !== 0){
					return;
				}
				
				// set first thumb in preview
				this.showNext();
				// start walking...
				this.startWalking();
			}).bind(this)
		});
		o_item.image.load();
		
		var o_this = this;
		// add mouse over effect
		o_item.addEvent('mouseenter', function(){
			this.addClass('active');
			o_this.stopWalking();
		}).addEvent('mouseleave', function(){
			o_this.startWalking();
			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': 232,
			'height': 140,
			'onComplete': (function(){
				
				if (Math.floor(oItem.index/this.options.itemsPerRow) !== this.miContainerCounter){
					this.miContainerCounter = Math.floor(oItem.index/this.options.itemsPerRow);
					this.maItemContainers.each((this.hideItemContainer).bind(this));
					this.showItemContainer();
				}
				
				if (this.moCurrentItem !== false){
					this.moCurrentItem.removeClass('active');
				}
				
				this.moCurrentItem = oItem;
				this.miItemCounter = oItem.index;
				
				// 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
				this.showPreviousButton();
				this.showNextButton();
				
			}).bind(this)
		});
		o_image.load();
	},
	
	showNextButton: function(){
		this.moNext.removeClass('hidden');
		this.moNext.removeEvents();
		this.moNext.addEvent('click', (this.showNext).bind(this));
		this.moNext.addEvent('mouseenter', (this.stopWalking).bind(this));
		this.moNext.addEvent('mouseleave', (this.startWalking).bind(this));
	},
	
	showPreviousButton: function(){
		this.moPrevious.removeClass('hidden');
		this.moPrevious.removeEvents();
		this.moPrevious.addEvent('click', (this.showPrevious).bind(this));
		this.moPrevious.addEvent('mouseenter', (this.stopWalking).bind(this));
		this.moPrevious.addEvent('mouseleave', (this.startWalking).bind(this));
	},
	
	hideNextButton: function(){
		this.moNext.addClass('hidden');
		this.moNext.removeEvents();
	},
	
	hidePreviousButton: function(){
		this.moPrevious.addClass('hidden');
		this.moPrevious.removeEvents();
	},
	
	showItemContainer: function(){
		this.maItemContainers[this.miContainerCounter].removeClass('hidden');
		this.maItemIndex[this.miContainerCounter].addClass('active');
	},
	
	hideItemContainer: function(oContainer, iIndex){
		if (iIndex !== this.miContainerCounter){
			oContainer.addClass('hidden');
			if (this.maItemIndex[iIndex]){
				this.maItemIndex[iIndex].removeClass('active');
			}
		}
	},
	
	showNext: function(){
		if ($type(this.miContainerCounter) === false 
			|| this.miContainerCounter === this.maItemContainers.length)
		{
			this.miContainerCounter = 0;
		}
		
		if ($type(this.miItemCounter) === false 
			|| this.miItemCounter === (this.maItems.length - 1))
		{
			this.miItemCounter = -1;
		}
		
		if (!$type(this.maItems[(this.miItemCounter+1)])){
			return;
		}

		var o_item = this.maItems[(this.miItemCounter+1)];
		this.showItem(o_item);
	},
	
	showPrevious: function(){
		if (this.miItemCounter === 0){
			this.miItemCounter = this.maItems.length;
		}
		
		if (!$type(this.maItems[(this.miItemCounter-1)])){
			return;
		}
		
		var o_item = this.maItems[(this.miItemCounter-1)];
		this.showItem(o_item);
	},
	
	startWalking: function(){
		this.moWalkEvent = this.showNext.periodical(this.options.walkDelay, this);
	},
	
	stopWalking: function(){
		$clear(this.moWalkEvent);
	}
});