/**
 * Namespace "StuffBrowser"
 * @class View
 * @author jorn@info.nl
 * 
 * @desc All view related methods and variables are stored here
 * 
 * - Defines the default html markup for items
 * - Stores the currently selected view for each tab
 * - Binds events to view slide buttons
 * 
 */
StuffBrowser.View = function($){
	var Obj;
	var viewbuttons_leftpos = [];
	var currentView = [0, 0, 0];
	
	/**
	 * View properties
	 */
	var view = {
		0 : { // Kwicks view
			name: 'Kwicks',
			max_items: 4,
			item_container: $('<ul class="itemlist"></ul>'),
			item_html: $('\
<li class="item">\
	<div>\
		<div class="image">\
			<a href="">\
				<img src="" alt="" />\
			</a>\
		</div>\
		<div class="data">\
			<p><a class="name"></a></p>\
			<span class="date"></span>\
			<div>\
				<p><span class="inlinesprite icon-review dark"></span><span class="reviews"></span>&nbsp;reviews</p>\
				<div class="hr"><hr /></div>\
				<p><div class="cms-meanrating"></div><span class="votes"></span>&nbsp;votes</p>\
				<div class="hr"><hr /></div>\
				<p><span class="inlinesprite icon-have dark"></span><span class="have"></span>&nbsp;have it</p>\
				<p><span class="inlinesprite icon-want dark"></span><span class="want"></span>&nbsp;wish it</p>\
			</div>\
		</div>\
	</div>\
</li>')
		},
		
		1 : { // List view
			name: 'List',
			max_items: 10,
			item_container: $('<ul class="itemlist"></ul>'),
			item_html: $('\
<li class="item" id="">\
	<div class="nr"></div>\
	<div class="cat"></div>\
	<p class="name"><a href="#"></a></p>\
</li>')
		},
		
		2 : { // Thumbnail view
			name: 'Thumbnail',
			max_items: 27,
			item_container: $('<ul class="itemlist"></ul>'),
			item_html: $('\
<li class="item" id="">\
	<a href="#">\
		<img src="" alt="" />\
	</a>\
</li>')
		}
	};
	
	/**
	 * Change and reload view
	 * 
	 * @param {int} view_id
	 */
	function changeView(view_id)
	{
		if( !StuffBrowser.tabClicked && view_id == Obj.getCurrent() ) return false;
		
		var tab = setViewClass(view_id);
		$('.card-holder', tab).empty();
		
		StuffBrowser.Paginate.reload();
		StuffBrowser.Card.load(StuffBrowser.Paginate.getCurrentCard(), 1);
	}
	
	/**
	 * Sets view# classname on tab content div and stores active card for 
	 * the 'old' view.
	 * 
	 * @param {int} view
	 * @return {Object} tab The active tab
	 */
	function setViewClass(view_id){
		var tab = $(StuffBrowser.getCurrentTab());
		tab.removeClass('view0 view1 view2').addClass('view'+ view_id);
		
		currentView[StuffBrowser.getCurrentTab(true)] = view_id; // Save previous view
		return tab;
	}
	
	/**
	 * Bind events to view buttons.
	 * The click event is also triggered when changing tabs
	 */
	function initSelectViewButtons()
	{
		$('#stuff-browser > .select-view').each(function(i, elem){
			var elem = $(elem);
			viewbuttons_leftpos[i] = [elem.width() - 8, elem.width() - 4]; // selected and non selected left pos
			
			// bind events
			elem.bind('click.StuffBrowser.View', function(){
				$('#stuff-browser > .select-view.selected').removeClass('selected').triggerHandler('mouseleave');
				elem.addClass('selected');
				changeView($(this).attr('href').substr(1));
				
				if( StuffBrowser.tabClicked ) // move in selected position if tab is clicked
					elem.animate({left: -viewbuttons_leftpos[i][0]}, 150);
					
				return false;
			})
			.bind('mouseenter.StuffBrowser.View', function(){
				elem.stop().animate({left: 0}, 150);
			})
			.bind('mouseleave.StuffBrowser.View', function(){
				elem.stop().animate({left: -(elem.hasClass('selected')? viewbuttons_leftpos[i][0]: viewbuttons_leftpos[i][1])}, 300);
			});
			
			// on startup
			if( i == Obj.getCurrent() ) elem.addClass('selected');
			
			setTimeout(function(){
				elem.animate({left: -(elem.hasClass('selected')? viewbuttons_leftpos[i][0]: viewbuttons_leftpos[i][1])}, 350);
			}, 200 + i*100);
		});
	}
	
	
	return {
		/**
		 * Retrieve the current active view for the current active tab
		 */
		getCurrent: function(){
			return currentView[StuffBrowser.getCurrentTab(true)];
		},
		
		/**
		 * Get view data for parsing in StuffBrowser.Card
		 * 
		 * @param {int} id
		 */
		getViewData: function(id){
			return view[id];
		},
		
		/**
		 * Public shortcut function to private method
		 */
		setViewClass: function(){
			setViewClass(Obj.getCurrent());
		},
		
		/**
		 * Creates html for mean rating
		 * 
		 * @return string
		 */
		generateMeanRating: function(rating){
			var container = $('<div />');
			var snippet = $('<span class="jive-icon-med" />');
			var rating = Math.floor(rating / .5);
			
			for( var i = 0; i < 5; i++, rating = rating - 2 ){
				if( rating >= 2 )
					snippet.clone().addClass('jive-icon-rate-avg-on').appendTo(container);
				else if( rating == 1 )
					snippet.clone().addClass('jive-icon-rate-avg-half').appendTo(container);
				else
					snippet.clone().addClass('jive-icon-rate-avg-off').appendTo(container);
			}
			return container.html();
		},
		
		/**
		 * Initialize this Class
		 */
		init: function(){
			Obj = StuffBrowser.View; // Create shortcut
			initSelectViewButtons();
		}
	};
}(jQuery);