var content,
	ios = (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/iPad/i)),
	drawTimer,
	positions = [],
	offsets = {
		slideshow: 110,
		showroom: 140,
		products: 140,
		partners: 140
	};

function draw() {
	var pos, nav = $("nav#primary"), min, current;
	
	
	//
	// iOS
	//
	if(ios) {
		var landscape = window.orientation == -90 || window.orientation == 90;
		
		// portrait vs landscape
		if(landscape) {
			$("html")
				.addClass("landscape")
				.removeClass("portrait");
		}
		else {
			$("html")
				.removeClass("landscape")
				.addClass("portrait");
		}
		
		// primary nav positioning
		pos = -$("#content").offset().top;
	}
	
	//
	// Desktop
	//
	else {
		pos = $(document).scrollTop();
	}
	
	//find closest section
	$("section").each(function() {
		var dist = Math.abs(pos - positions[$(this).attr("id")]);
		if(min === undefined || dist < min ) {
			min = dist;
			if($(this).attr("id") != current) {
				current = $(this).attr("id");
				$("nav#primary .active").removeClass("active");
				$("nav#primary ." + current).addClass("active");
			}
		}
	});
	
	
	
	
}

function startDrawing() {
	drawTimer = setInterval(draw, 20);
	setTimeout(stopDrawing, 200);
}

function stopDrawing() {
	draw();
	clearInterval(drawTimer);
}

function navigate(e) {
	var button = $(e.currentTarget),
		section = button.text(),
		top;
	
	if(ios) {
		top = $("section#" + section)[0].offsetTop - offsets[section];
		if(top < 0) top = 0;
		content.scrollTo(0, -top, '200ms');
		startDrawing();
		$(document).bind("webkitTransitionEnd", stopDrawing);
	}
	else {
		top = $("section#" + section).offset().top - offsets[section];
		if(top < 0) top = 0;
		$(document).scrollTo(top, 200);
	}
}


$(function() {
	
	//
	// init
	//
	if(ios) { 
		$("#content_wrapper").css("overflow", "hidden");
		$("html").addClass("ios");
		
		content = new iScroll("content"); 
		$(document).bind("orientationchange", draw);
		$("#content").bind("touchmove", function(e) { draw(); });
	}
	else {
		$("html").addClass("no-ios");
		$(document).scrollTop(0);
		$(window).bind("resize", draw);
		$(document).bind("scroll", draw);
	}
	
	// storing the top offset when the app starts as 
	// iScroll changes this value... why?? I have no idea.
	$("section").each(function() { positions[$(this).attr("id")] = $(this).offset().top; });
	
	draw();
	
	
	//
	// navigation events
	//
	$("nav#primary li").bind("click", navigate);
	$(".next").bind("click", navigate);
	
	
	//
	// slideshow
	//
	var i = 0,
		timer;
	function next() {
		if(++i > 2) i=0;
		$($("#slideshow nav div")[i]).click();
		timer = setTimeout(next, 10000);
	}
	
	$("#slideshow img.slide.active").css("display", "block");
	$("#slideshow nav div").bind("click", function(e) {
		var img = $(this).attr("class");
		
		// image
		if(!ios) {
			$("#slideshow img.slide.active").fadeOut(150).removeClass("active");
			$("#slideshow img.slide." + img).delay(200).fadeIn(250).addClass("active");
		}
		else {
			$("#slideshow img.slide.active").hide().removeClass("active");
			$("#slideshow img.slide." + img).show().addClass("active");
		}
		
		// thumbnail 
		$("#slideshow img.thumb.active").removeClass("active");
		$("img", this).addClass("active");
		
		clearTimeout(timer);
		timer = setTimeout(next, 10000);
	});
	
	timer = setTimeout(next, 10000);
	
	
	
	
});