var globals = {
	url : 'http://www.facedouble.com'
};

// load match into page
function loadMatch(match) {
	// load initial match
	$('#userImage').attr('src', match['userImage']);
	$('#actorImage').attr('src', match['actorImage']);
	$('#name').text(match['name']);
	$('#bio').text(match['bio']);
	$('#actorinput').attr('value', match['name']);
	$('#rating').text(match['rating']);
	$('#votes').text(match['votes']);
	$('#friendRating').text(match['friendRating']);
	$('#friendVotes').text(match['friendVotes']);
	$('#facedoubleId').attr('value', match['facedoubleId']);

	if (match['notpublic'] == 1) {
		$('#public').css('display', 'block');
	}
	else {
		$('#public').css('display', 'none');
	}

	if (match['friendVotes'] > 0) {
		$('#comments').css('visibility', 'visible');
	}
	else {
		$('#comments').css('visibility', 'hidden');
	}

}

function loadEmail(facedoubleId, matches) {
	if (matches == undefined) {
		matches = '';
	}
//	var msg = 'Send FaceDouble to friends.. they can agree, or pick a better match for you. This launches the Apple Mail app - you have full control over the message including who receives it.';
//	alert(msg);
	var href = '<a href="' + globals.url + '/docroot/pickbest.pl?facedoubleId=' + facedoubleId + '&matchIds=' + matches + '">';
	var actor = encodeURIComponent('Do I look like ' + $('#name').text() + '?');
	var body = encodeURIComponent('What celebrity do you think I look like?  Help me find my FaceDouble by picking a celebrity from link below:\n\n' + 
			href + 'CLICK HERE</a>\n\n' +
			href + '<img border="0" width="300" src="http://www.facedouble.com/iphoneDouble/'+ facedoubleId + '.jpg?matchIds=' + matches + '" /></a>'
	);
	window.location='/email?cc=FaceDouble Celebrity Look-alike <noreply@facedouble.com>&subject=' + actor + '&body=' + body + '#' + facedoubleId;
}


// scrolling globals

// Original X-coordinate
var oX = 0;
var lpos;
var offset;
var thumbsize;

// scrolling functions

function doShift(value) {
	var id = $('#scroll');
	if (navigator.userAgent.indexOf('iPhone') < 0 && navigator.userAgent.indexOf('Safari') < 0) {
		id.animate({left: value}, 500);
	}
	else {
		id.css('left', value);
	}
}

function flipLeft() {
	if (($('#scroll').offset().left + offset - lpos) > 0) {
		doShift(0);
	}
	else {
		doShift($('#scroll').offset().left + offset - lpos);
	}
}

function flipRight() {
	var x = $('#scroll').offset().left - lpos - offset;
			
	if ($('#scroll').offset().left - lpos - offset <  -$('#scroll').width() + offset) {
		doShift(-$('#scroll').width() + offset);
	}
	else {
		doShift($('#scroll').offset().left - offset - lpos);
	}
}



// The handler for all Apple iPhone Touch API events
function touchHandler(e) {
	// If the user has started a touch event
	if (e.type == "touchstart") {
		// If there's only one finger touching
		if (e.touches.length == 1) {
			var touch = e.touches[0];
			// The originating X-coord (point where finger first touched the screen)
			oX = touch.pageX;
		}
	}
	// If the user has touched the screen and moved the finger
	else if (e.type == "touchmove") {
		// Prevent the default scrolling behaviour (notice: This disables vertical scrolling as well)
		e.preventDefault();

		// If there's only one finger touching
		if (e.touches.length == 1) {
			var touch = e.touches[0];
			// The current X-coord of the users finger
			var nX = touch.pageX;
			var scrollX = oX - nX;
			if (scrollX < 25 || scrollX > 25) {
				// If the user moved the finger from the right to the left
				if (oX < nX) {
					// Find the scrolling distance
					flipLeft();
				}
				else {
					flipRight();
				}
			}
		}
	}
}

function loadThumbs() {
	// load up the 1st match
	if (ds) {
	  // delete any leftover thumbs
	  $('.thumb').remove();
	  $('#thumb').toggleClass('selected');
	  $('#thumb').toggleClass('thumb');
	  $('#thumb').removeAttr('src');
	  $('#actorImage').removeAttr('src');
	  $('#userImage').removeAttr('src');

	  // load thumbs
	  $.each(ds, function(i) {
		var thumb;
		if ($('#thumb').attr('src')) {
			thumb = $('#thumb').clone(true);
			$('#thumb').parent().append(thumb);
		}
		else {
			thumb = $('#thumb').get(0);
		}
		$(thumb).attr('src', this['thumb']);
		$(thumb).attr('i', i);
	  });

	  $('#scroll').css('left',  0);
    }
}


$(document).ready(function() {

	// update menubar
	$('.button').each(function() {
		var type = "normal";
		var id = $(this).attr('id');
		var jid = '#' + id;

		if (id == 'done' || id == 'back') {
			type = id;
		}
		$(this).addClass(type + "Button");

	});

	// after actor image has loaded, turn off spinning disk
	$('#userImage,#actorImage').bind('load', function() {
		$('#spinningDisk').css('display', 'none');
	});

	loadThumbs();	

	// thumb clicks
	$('.thumb').click(function() {
		if ($(this).hasClass('selected')) {
			return;
		}
		var i = $(this).attr('i');
		$.each([$('.selected'), $(this)], function() {
			$(this).toggleClass('selected');
			$(this).toggleClass('thumb');
		});

		// start loading immediately
		$('#spinningDisk').css('display', 'block');
		loadMatch(ds[i]);
	});

	$('#thumb').trigger('click');

	// ----------------------------
	// scrolling init 
	//

	$('#left').bind('click', flipLeft);
	$('#right').bind('click', flipRight);

	$('.touchable').each(function() {
		if (navigator.userAgent.indexOf('iPhone') > 0) {
			this.addEventListener('touchstart', touchHandler, false);
			this.addEventListener('touchmove', touchHandler, false);
		}
	});

	// clean out actor input text box
	$('#actorinput').click(function(e) {
		oAutoComp.alwaysShowContainer = false;
        $(this).attr('value', '');
	});

	// force user to chose an actor if they haven't yet
	$('#actorinput').keyup(function() {
		if ($(this).attr('value') == '') {
			oAutoComp.alwaysShowContainer = false;
		}
		else {
			oAutoComp.alwaysShowContainer = true;
		}
	});


});


// calculate size of scroll window, with display showing
$(window).bind('load', function() {
	$(document.body).css('display', 'block');
	lpos = $('#scroll').offset().left;
	thumbsize = $('#thumb').width() + 12;
//	offset = $('#scroll').parent().width();
	offset = 3 * thumbsize + 2;
});