var PortfolioClients = {
	el_container: null,
	el_clients: null,
	
	containerWidth:0,
	
	contentLeft:0,
	contentWidth:0,
	
	el_template: null,
	itemWidth:0,
	itemHeight:0,
	
	selected: null,
	selectedData: null,
	
	limitLeft:0,
	limitRight:0,
	mouseWheelDirection:0,
	
	options: {
		onScroll: null,
		scrollDuration: 300,
		onChange: null,
		onReset: null,
		imgPath: '/portfolio/images/thumbnails/',
		imgWidth:105
	},
	
	init: function(options) {
		// Save pointers to elements
		PC.el_container = jQuery('#clientlist')
			.mousewheel(PC.onMousewheel)
			;
			PC.containerWidth = PC.el_container[0].offsetWidth;
		PC.el_clients = PC.el_container.find('.clients');
		
		// Save the template client item
		PC.el_template = PC.el_clients.find('.client');
			PC.itemWidth = PC.el_template[0].offsetWidth;
			PC.itemHeight= PC.el_template[0].offsetHeight;
			PC.el_template.remove();
		
		// Save options
		jQuery.extend(PC.options, options);
	},
	
	load: function(clients) {
		jQuery.each(clients, function(key, val) {
			var obj = PC.el_template.clone()
				.attr('titleslide', val.titleImage ? val.titleImage : 'none')
				.attr('name', val.code)
				.attr('title', val.title)
				.css('display', 'none')
				.find('img')
					.attr('src', PC.options.imgPath + val.thumbnail)
					.end()
				.click(PC.onClick)
				.appendTo(PC.el_clients)
			;
			obj[0].spdata = val;
		});
		
		PC.reset();
		PC.el_clients.css('width', PC.contentWidth + 1000);
	},
	
	reset: function(numClients, resetPosition) {
		if (arguments.length == 1) resetPosition = true;
		
		if (!numClients) numClients = PC.el_clients.children().size();
		var w = numClients * PC.itemWidth;
		PC.contentWidth = w;
		
		// Unselect any selected clients
		// if (PC.selected) PC.selectClient('');
		
		// Reset the position back to zero
		if (resetPosition) PC.setPos(0);
		
		// Set limits for scrolling
		PC.limitRight = -1 * PC.contentWidth + PC.containerWidth;
		if (PC.limitRight > 0) PC.limitRight = 0;
		
		// If a listener is set, trigger it
		if (PC.options.onReset) PC.options.onReset(PC.needsScrollbar());
	},
	
	filter: function(filters, clientIdToSelect) {
		if (PC.options.onChange) PC.options.onChange(null);
		
		var animDuration = 300;
		
		//var filter = filters=='all' ? '' : '[categories*='+filters+'#]';
		//var items = PC.el_clients.find('.client'+filter);
		
		// Sort items
		var itemelements = [];
		jQuery.each(filters, function() { itemelements.push(PC.el_clients.find('.client[name='+this+']')); });
/*
		for (var i = 0;  i < items.length;  i++) { itemelements.push(items[i]); }
		
		if (filters == 'all') {
			itemelements.sort(function(a, b) {
				var oa = a.getAttribute('priority') * 1;
				var ob = b.getAttribute('priority') * 1;
				return oa < ob ? -1 : oa > ob ? 1 : 0;
			});
		}
		else {
			var rxp = new RegExp(filters+"#(\\d+)");
			itemelements.sort(function(a, b) {
				var oa = a.getAttribute('categories').match(rxp)[1] * 1;
				var ob = b.getAttribute('categories').match(rxp)[1] * 1;
				return oa < ob ? -1 : oa > ob ? 1 : 0;
			});
		}
*/

		var itemToSelect = jQuery(itemelements[0]);
		if (clientIdToSelect) {
			var temp = PC.el_clients.find('.client[name='+clientIdToSelect+']');
			if (temp.size() > 0) itemToSelect = temp;
		}
		
		var showFn = function() {
			// Show clients in the filter
			jQuery.each(itemelements, function() {
				PC.el_clients.append(this);
				jQuery(this).css('display', '').animate({opacity:1}, {duration:300});
			});
//			items.css('display', '').animate({opacity:1}, {duration:300});
			itemToSelect.trigger('click');
		};
		
		// Hide clients not in the filter
		var vc = PC.el_clients.find('.client:visible');
		PC.reset(itemelements.length, false);
//		PC.reset(items.size());
		vc.animate({opacity:0}, {duration:300, complete:function() { this.style.display='none'; PC.setPos(0); }});
		if (vc.size() == 0) showFn();
		else setTimeout(showFn, 400);
	},
	
	selectClient: function(clientId) {
		var item = PC.el_clients.find('.client[name='+clientId+']');
		
		if (PC.selected) {
			PC.selected.removeClass('active');
		}
		if (item.size()) {
			PC.selected = item;
			PC.selectedData = item[0].spdata;
			PC.selected.addClass('active');
			
			// If client is out of view, scroll it into view
			var itemL = PC.selected[0].offsetLeft;
			var itemW = PC.itemWidth;
			
			var limitL = -1 * PC.contentLeft + itemW;
			var limitR = limitL + PC.containerWidth - itemW * 2;
			
			if (itemL < limitL) {
				var pct = (itemL - itemW) / PC.limitRight * -1;
				PC.scrollTo(pct);
				if (PC.needsScrollbar()  &&  PC.options.onScroll) PC.options.onScroll(pct);
			}
			else if ((itemL + itemW) > limitR) {
				var nx = itemL - PC.containerWidth + itemW * 2;
				var pct = nx / PC.limitRight * -1;
				PC.scrollTo(pct);
				if (PC.needsScrollbar()  &&  PC.options.onScroll) PC.options.onScroll(pct);
			}
		}
		else {
			PC.selected = null;
			PC.selectedData = null;
		}
		
		if (PC.options.onChange)
			PC.options.onChange(PC.selectedData);
	},
	
	onClick: function() {
		PC.selectClient(this.getAttribute('name'));
		return false;
	},
	
	needsScrollbar: function() {
		return PC.contentWidth > PC.containerWidth;
	},
	
	setPos: function(pct) {
		if (pct < 0) pct = 0; else if (pct > 1) pct = 1;
		PC.contentLeft = PC._fixContentPos(PC.limitRight*pct);
		PC.el_clients.css('left', PC.contentLeft);
	},
	
	scrollTo: function(pct) {
		PC.stopScroll();
		if (pct < 0) pct = 0; else if (pct > 1) pct = 1;
		PC.contentLeft = PC.limitRight*pct;
		PC.el_clients.animate({left:PC.contentLeft}, PC.options.scrollDuration);
	},
	
	stopScroll: function() {
		PC.el_clients.stop();
	},
	
	onMousewheel: function(ev, dir) {
		var amt = dir < 0 ? PC.itemWidth : PC.itemWidth*-1;
		var pct = (PC.contentLeft + amt) / PC.limitRight;
		PC.scrollTo(pct);
		if (PC.options.onScroll) PC.options.onScroll(pct);

		return false;
	},
	
	_fixContentPos: function(nx) {
		if (nx > PC.limitLeft) nx = PC.limitLeft;
		else if (nx < PC.limitRight) nx = PC.limitRight;
		return nx;
	}
};

var PC = PortfolioClients;
Portfolio.Clients = PC;