Imagini.People = {
	"init" : function(container, type) {
		Imagini.People.container = $('#people');
		Imagini.People.form = $('#discoverForm');
		Imagini.People.formHolder = $('#peopleLeft');
		Imagini.People.type = type;
		Imagini.People.typeHolder = $('#displayType');
		Imagini.People.details = $('#peopleDetails');
		Imagini.People.page = $('#discoverPage');
		Imagini.People.pages = $('.pagination');
		Imagini.People.peopleData = null;

		Imagini.People.timeout = null;

		Imagini.People.container.addClass(Imagini.People.type);
		Imagini.People.typeHolder.find('#' + Imagini.People.type).addClass('on');
		Imagini.People.details.addClass(Imagini.People.type);
		Imagini.People.typeHolder.find('a').click(function() {
			Imagini.People.typeHolder.find('#' + Imagini.People.type).removeClass('on');
			Imagini.People.container.removeClass(Imagini.People.type);
			Imagini.People.container.addClass($(this).attr('id'));
			Imagini.People.details.removeClass(Imagini.People.type);
			Imagini.People.details.addClass($(this).attr('id'));
			Imagini.People.typeHolder.find('#' + $(this).attr('id')).addClass('on');
			Imagini.People.type = $(this).attr('id');
			Imagini.People.loadPeople(Imagini.People.peopleData);
		});

		// default request
		Imagini.People.busy(true);
		Imagini.People.form.submit();
	}, 
	"show" : function(result) { 
		if (Imagini.People.timeout)
			clearTimeout(Imagini.People.timeout);
		Imagini.People.timeout = setTimeout('Imagini.People.checkDetails();', 200);

		Imagini.People.pages.empty();

		prev = null;

		if (result.page > 1) Imagini.People.pages.append('<a href="javascript:;" onclick="return Imagini.People.back();" title="Back one page">&lt;&lt; Back</a>');
			else Imagini.People.pages.append('<a href="javascript:;" onclick="return false;" class="disabled" title="Back one page">&lt;&lt; Back</a>');

		page = parseInt(result.page);

		fromPage = page - 3;
		toPage = page + 3;
		if (toPage > result.maxPage) {
			toPage = result.maxPage;
			fromPage = toPage - 6;
		}

		if (fromPage < 1)
			fromPage = 1;
		for (var i = fromPage; i <= toPage; i++) {
			Imagini.People.pages.append(' <span class="separator">|</span> ');
			if (i == result.page) Imagini.People.pages.append('<span>' + i + '</span>');
				else Imagini.People.pages.append('<a href="javascript:;" onclick="return Imagini.People.setPage(' + i + ');">' + i + '</a>');
		}

		Imagini.People.pages.append('<span> | </span>');

		if (result.page < result.maxPage) Imagini.People.pages.append('<a href="javascript:;" onclick="return Imagini.People.more();" title="Next page">More &gt;&gt;</a>');
			else Imagini.People.pages.append('<a href="javascript:;" onclick="return false;" class="disabled" title="Next page">More &gt;&gt;</a>');

		Imagini.People.loadPeople(result.people);

		count = parseInt(result.count);
		if (count == 0)
		{
			$('#peopleCount').html('0');
			document.location.hash = '#page-1';
			Imagini.People.lastHash = '#page-1';
		} else {
			document.location.hash = '#page-' + parseInt(page);
			Imagini.People.lastHash = document.location.hash;

			maxCount = parseInt(result.maxUsers);
			start = (page - 1) * maxCount + 1;
			end = start + count - 1;
			$('#peopleCount').html(start + '-' + end + ' of ' + result.total);
		}

		Imagini.People.busy(false);
	}, 
	"loadPeople" : function(people) {
		Imagini.People.container.empty();
		Imagini.People.peopleData = people;
		for (var i in people) {
			var userData = people[i];
			var userContent = '<div class="user">'
							+ '	<div class="userMain">'
							+ '		<a href="' + userData.url + '" class="imageFrame small" title="' + userData.name + '">'
							+ '			<img src="' + userData.image + '" onerror="this.src=\'' + Imagini.skinImagePath + 'icons/user.jpg\';" />'
							+ '		</a>'
							+ '	</div>'
							+ '	<div class="moreDetails">'
							+ '		<h4>'
							+ '			<a href="' + userData.url + '" title="' + userData.name + '">'
							+ '				<strong>' + userData.name + '</strong>'
							+ '			</a>'
							+ '		</h4>'
							+ '		<div class="main progressBar q0">'
							+ '			<div class="progressLeft"></div>'
							+ '			<div class="progressMiddle" style="width: ' + (userData.percent < 3 ? 3 : userData.percent) + '%;"></div>'
							+ '			<div class="progressRight"></div>'
							+ '		</div>'
							+ '		<div class="mainPercent">' + userData.percent + '%</div>'
							+ '		<div class="userInfo">' + userData.info + '</div>';

			for (var j in userData.quizzes) {
				var quizData = userData.quizzes[j];
				userContent += '<div class="quizContent">'
								+ '<a href="' + quizData.url + '" class="' + quizData.cssClass + '" title="' + quizData.title + '">'
								+ '<img src="' + quizData.image + '" class="quizImage" />'
								+ '	<div class="progressBar ' + quizData.cssClass + '">'
								+ '		<div class="progressLeft"></div>';
				if (quizData.active) {
					userContent += '		<div class="progressMiddle" style="width: ' + (quizData.percent < 3 ? 3 : quizData.percent) + '%;"></div>'
								+ '		<div class="progressRight"></div>'
								+ '	</div>'
								+ '	<div class="quizPercent">' + quizData.percent + '%</div>'
				} else {
					userContent += '		<div class="progressMiddle" style="width: 5%;"></div>'
								+ '		<div class="progressRight"></div>'
								+ '	</div>'
								+ '	<div class="quizPercent"> ? </div>'
				}
				userContent += '</a>'
							+ '</div>';
			}

			userContent += '	</div>'
						+ '</div>';

			user = $(userContent);
			Imagini.People.container.append(user);
			Imagini.bindEvents(user);

			user.hover(
				function() {
					if (Imagini.People.timeout)
						clearTimeout(Imagini.People.timeout);

					if (Imagini.People.details.offset().left != $(this).offset().left) {
						Imagini.People.details.stop()
											.hide();
					}

					Imagini.People.container.find('.user.over').removeClass('over');
					$(this).addClass('over');

					Imagini.People.timeout = setTimeout('Imagini.People.updateDetails();', 1000);
//					Imagini.People.updateDetails($(this));
				}, 
				function() {
					if (Imagini.People.timeout)
						clearTimeout(Imagini.People.timeout);
					Imagini.People.timeout = setTimeout('Imagini.People.checkDetails();', 100);
				}
			);
		}
	}, 
	"updateDetails" : function() {
		user = Imagini.People.container.find('.user.over');
		Imagini.People.details.empty();
		Imagini.People.details.append(user.find('.moreDetails').clone(true));

		Imagini.People.details.unbind('mouseover')
							.bind('mouseover', function(e) {
								if (Imagini.People.timeout)
									clearTimeout(Imagini.People.timeout);
							});

		Imagini.People.details.unbind('mouseout')
							.bind('mouseout', function(e) {
								if (Imagini.People.timeout)
									clearTimeout(Imagini.People.timeout);
								Imagini.People.timeout = setTimeout('Imagini.People.checkDetails();', 200);
							});

		offset = user.offset();
		uleft = offset.left;
		utop = parseInt(offset.top) + parseInt(user.height());
		dwidth = parseInt(Imagini.People.details.width());
		cleft = parseInt(Imagini.People.container.offset().left);
		cwidth = parseInt(Imagini.People.container.width());

		if (uleft + dwidth > cleft + cwidth) {
			uleft += parseInt(user.width()) - dwidth;
		}
		if (Imagini.People.type == 'full') uleft += parseInt(user.width()) - dwidth - 4;
			else uleft += 2;

		Imagini.People.details
						.css('opacity', 0)
						.css('left', uleft)
						.css('top', utop)
						.show()
						.animate({opacity: 1, left: uleft, top: utop}, 200);
	}, 
	"setPage" : function(page) {
		Imagini.People.page.val(page);
		Imagini.People.busy(true);
		$('#discoverForm').submit();
	}, 
	"more" : function() {
		Imagini.People.page.val(parseInt(Imagini.People.page.val()) + 1);
		Imagini.People.busy(true);
		$('#discoverForm').submit();
	}, 
	"back" : function() {
		Imagini.People.page.val(parseInt(Imagini.People.page.val()) - 1);
		Imagini.People.busy(true);
		$('#discoverForm').submit();
	}, 
	"checkDetails" : function() {
		Imagini.People.details.stop().animate({opacity: 0}, 200, function() {
			$(this).hide();
			Imagini.People.container.find('.user.over').removeClass('over');
		});
	}, 
	"busy" : function(flag) {
		mainHolder = $('#mainContent');
		if (flag) {
			mainHolder.busy(true);
		} else {
			mainHolder.busy(false);
		}
	}
};

$(function() {
	$('.filterTrigger').change(function() {
		Imagini.People.page.val(1);
	});

	$('.quizTrigger').change(function() {
		moduleName = $(this).val();
		if (Imagini.moduleSegments[moduleName]) {
			segments = '';
			for (var i in Imagini.moduleSegments[moduleName])
				segments += '<option value="' + i + '">' + Imagini.moduleSegments[moduleName][i] + '</option>';
			$('.segmentHolder').empty()
							.append(segments)
							.attr('disabled', false);
		} else {
			$('.segmentHolder').empty()
							.append('<option value="">Personality type</option>')
							.attr('disabled', true);
		}
	});

	if (document.location.hash.indexOf('#page-') != -1)
	{
		var pageMatch = new RegExp(/page-(\d+)/);
		if (pageMatch.length == 2) {
			Imagini.People.page.val(pageMatch[1]);
			Imagini.People.busy(true);
			$('#discoverForm').submit();
		}
	}

	Imagini.People.lastHash = document.location.hash;

	Imagini.People.checkHash = function() {
		if(Imagini.People.lastHash !== document.location.hash) {
			if (document.location.hash.indexOf('#page-') != -1)
			{
				var pageMatch = new RegExp(/page-(\d+)/);
				page = pageMatch.exec(document.location.hash);
				if (page.length == 2) {
					Imagini.People.page.val(page[1]);
					Imagini.People.busy(true);
					$('#discoverForm').submit();
				}
			}
			Imagini.People.lastHash = document.location.hash;
		}
		setTimeout('Imagini.People.checkHash();', 100);
	}

	Imagini.People.checkHash();
});