// whats the userAgent?
var userAgent = navigator.userAgent.toLowerCase();

// is it iPhone?
var isiPhone = (userAgent.indexOf('iphone') != -1 || userAgent.indexOf('ipod') != -1) ? true : false;

// should we use tap (iPhone) click (everything else)
var clickEvent = isiPhone ? 'tap' : 'click';

// page ready
$(function(){

	// call back event for BOOTH section
	$('#booth').bind('pageAnimationEnd', function(e, info){
		
		// load remote content (first time only)
		if (!$(this).data('loaded')) {
			
			// store reference to div
			var booth = $(this);
			
			// add the loading class
			booth.addClass('loading');
			
			// load content
			$.ajax({
				url: "ajax/photoset.php?tag=booth",
				success: function(html){
					
					// append html to div
					booth.append(html);
					
					// remove the loading class
					booth.removeClass('loading');
					
					// Set the 'loaded' var to true so we 
					// know not to re-load the content next time
					booth.data('loaded', true);
					
					// setup serialScroll
					scrollerInit('#booth');
				}
			});
		}
		// subsequent views
		else {
			
			//  reset scroller to the first item
			scrollerReset('#booth');
		}
	});
	
	// call back event for BRAIN section
	$('#brain').bind('pageAnimationEnd', function(e, info){
		
		// load remote content (first time only)
		if (!$(this).data('loaded')) {
			
			// store reference to div
			var brain = $(this);
			
			// add the loading class
			brain.addClass('loading');
			
			// load content
			$.ajax({
				url: "ajax/photoset.php?tag=brain",
				success: function(html){
					
					// append html to div
					brain.append(html);
					
					// remove the loading class
					brain.removeClass('loading');
					
					// Set the 'loaded' var to true so we 
					// know not to re-load the content next time
					brain.data('loaded', true);
					
					// setup serialScroll
					scrollerInit('#brain');
				}
			});
		}
		// subsequent views reset scroller to the first item
		else {
		
			scrollerReset('#brain');
		}
	});
	
	
});

// init serialScroll and bind tap/click event
function scrollerInit(page) {
	
	// setup serialScroll
	var scroller = $(page+' div.images').serialScroll({
			items:'li',
			duration:400,
			cycle:true,
			constant: false
	});
	
	// bind the tap/click event to images
	$(page+' li a').bind(clickEvent, function(){

		// on tap/click scroll to next image
        scroller.trigger('next');
   	});
};

// reset scroller to first item
function scrollerReset(page) {
	$(page+' div.images').trigger( 'goto', [ 0 ] );
}