var zIndexMax = 1;
var listWidth = 0;
var windowWidth = 0;
var windowHeight = 0;
var scroll = 0;
var mouseX = 0;
var mouseY = 0;
var bufferX = 0;
var projectListLocked = false;
var projects = null;
var currentProject = -1;
var page = 'home';
var projectArrowVisible = false;
var prevNav = null;
var iOS = false;
var iPhone = false;

function onLoad ()
{}

$(document).ready(function (){
	var device = navigator.userAgent.toLowerCase();
	iOS = device.match(/(iphone|ipod|ipad)/);
//	iOS = true;
	
	$(document).mousemove(function(ev) 
	{
		mouseX = ev.pageX;
		mouseY = ev.pageY;
	});
	
	$("#projectsAll a").click(function(){
		loadProjects ('');
		navClick(this);
		return false;
	});
	$("#projectsResidential a").click(function(){
		loadProjects ('residential');
		navClick(this);
		return false;
	});
	$("#projectsPublications a").click(function(){
		loadProjects ('publication');
		navClick(this);
		return false;
	});
	$("#projectsCommercial a").click(function(){
		loadProjects ('commercial');
		navClick(this);
		return false;
	});
	$("#projectsPublic a").click(function(){
		loadProjects ('public');
		navClick(this);
		return false;
	});
	$("#projectsSmall a").click(function(){
		loadProjects ('small');
		navClick(this);
		return false;
	});
	$("#projectsAward a").click(function(){
		loadProjects ('award');
		navClick(this);
		return false;
	});
	$("#about a").click(function(){
		loadContent(this,'/about');
		return false;
	});
	$("#projectsGardens a").click(function(){
		loadContent(this,'/projects/project/id/52');
		return false;
	});

	$(window).resize(function(){
		resize();
	});

	resize ();
	
	$('#wrapperProjectDetail').hide();
	
	if (iOS)
	{
		$('BODY').addClass('iOS');
		listScroller = new iScroll ('wrapper',{
			onScrollStart:function (v1,v2,v3)
			{

				$('#arrowRight').fadeOut();
			
			},
			onScrollEnd:function (v1,v2,v3)
			{
				if(this.x==0)
					$('#arrowRight').fadeIn();
			}
		});
		projectScroller = new iScroll ('wrapperProjectDetail',{
			onScrollStart:function (v1,v2,v3)
			{
				$('#projectDownArrow').fadeOut();
			
			},
			onScrollEnd:function (v1,v2,v3)
			{
				if(this.y==0)
					$('#projectDownArrow').fadeIn();
			}
		});
		
		$('#close').click(projectClose);
	} else 
	{
		setInterval (update,10);	
	}
});

function homeLoaded() 
{
	$('#homeImage img').fadeIn ();
}

function loadContent (el, url)
{
	$('#home').hide();
	projectHide();
	projectListLocked = false;
	$('#loading').fadeIn();
	$('#list').empty();
	$('#list').css({left:0});
	$('#projectDetail').html("");
	$('#loading').show();
	$.get(url,{},projectShow);
	navClick(el);
	page = "content";
}

function onContentLoaded ()
{
	$('#wrapperProjectDetail').fadeIn();
	$('#loading').fadeOut();
	resize ();
	
	if (iOS)
		wrapperProject.refresh();
}

function navClick (item)
{
	if (prevNav!=null)
		$(prevNav).removeClass('selected');

	prevNav = item;
	$(prevNav).addClass('selected');
}

function loadProjects (cat)
{
	page = 'projects';
	$('#homeImage').hide();
	$('#home').hide();
	
	projectHide();
	projectListLocked = false;
	$('#loading').fadeIn();
	$('#list').empty();
	$('#list').css({left:0});
	$.getJSON('/projects/index/category/'+cat,{},projectsLoaded);
}

function projectsLoaded (projectsJson)
{
	$('#loading').fadeOut();
	var xOffset = 237;
	projects = new Array();
	
	$(projectsJson).each (function(i)
	{
		
		var imgOrig = $('<img src="'+this.img+'" alt="'+this.name+'" class="original" />');
		var imgDesat = $('<img src="'+this.img+'" alt="'+this.alt+'" class="desat" />');
		var img = $('<div class="listItem"></div>');
		var alt = $('<div class="listAlt">'+this.name+'<br /><span class="cat">'+this.category+'</span></div>');
		
		imgDesat.load(function (){
			$(this).pixastic("desaturate");			
		})
		
		$('#wrapper').show();
		$('#list').append(img);
		$('#list').append(alt);
		img.append(imgOrig);
		img.append(imgDesat);

		alt.css({
			position:'absolute',
			top:188,
			left:xOffset+(i*253),
			display:'block'
		})
		.hide();
		
		
		img.css({
			position:'absolute',
			top:0,
			left:xOffset+(i*253),
			clip:'rect(24px 257px 144px 24px)',
			zIndex:1,
			display:'block'
		})
		.hover (function (){
			if (projectListLocked)
				return;
			zIndexMax++;
			img.stop(true,true).css({zIndex:zIndexMax}).animate({
				clip:'rect(0px 281px 168px 0px)'
			},'fast');
			alt.stop(true,true).fadeIn('fast');	
			$(this).find('CANVAS').fadeOut();
		}, function() {
			if (projectListLocked)
				return;
			img.stop(true,true).css({zIndex:1}).animate({
				clip:'rect(24px 257px 144px 24px)'
			},'fast');
			alt.stop(true,true).fadeOut('fast');
			$(this).find('CANVAS').fadeIn();
		})
		.click(function(){
			projectClicked(i);
			return false;
		});

		var project = {
    		img:$(img),
    		alt:$(alt),
    		i:i,
    		project:this
		};
		projects.push(project);
	});	

	if (iOS) {
		listWidth = (projects.length+1)*253;
		$('#list').css({width:listWidth});
		listScroller.refresh();
		$('#arrowRight').show();
	} else 
	{
		listWidth = (projects.length*253);	
		$('#list').css({width:listWidth});
	}
}    


function projectClicked (i)
{
	var delay = 0;
	if (projectListLocked)
	{
		projectHide();
		delay = 250;
	}
	projectListLocked = true;
	setTimeout('listExpand('+i+')',delay);
	delay+=250;
	setTimeout('projectLoad('+projects[i].project.id+')',delay);
}

function projectLoad (id)
{
	$('#loading').show();
	$.get('/projects/project/id/'+id,{},projectShow);
}

function projectShow (data)
{
	page = "content";
	$('#wrapperProjectDetail').show();
	$('#loading').hide();
	$('#projectDownArrow').stop(true,true).fadeIn();
	projectArrowVisible = true;
	$('#projectDetail').html(data);
	$('#projectDetail').css({top:0});
	$('#projectDetail').fadeIn();
	
	$('#projectDetail img').load (lastImageLoaded);
	
	if (iOS)
	{
		$('#close').show();
		$('#arrowRight').hide();
		projectScroller.scrollTo(0,0,0);
		navClick(null);
	} else
		$(document).click(projectClose);
	
	setTimeout (resize,10);
	
}

function lastImageLoaded ()
{
	if (iOS)
		projectScroller.refresh();
}

function projectClose ()
{
	projectHide();
	page = "projects";
	setTimeout(listContract,500);
		
	$(document).unbind('click',projectClose);
	if (listWidth < 230)
	{
		// closing about
		$('#homeImage').fadeIn();
		$('#home').fadeIn();
	}
}

function projectHide ()
{
	
	$('#close').hide();
	$('#projectDetail').stop(true,true);
	$('#projectDownArrow').stop(true,true).fadeOut ();
	$('#wrapperProjectDetail').stop(true,true).fadeOut();
	projectArrowVisible = false;
	
	return false;
}

function listExpand(i)
{
	if (currentProject > -1)
	{
		if (projects[currentProject].img)
			projects[currentProject].img.show().css({
				clip:'rect(24px 257px 144px 24px)'
			});
	}
	
    var left = 0-(i*253)-24;

	if (!iOS)
		$('#list').animate({left:(left)},'fast');
	
	for (var j=0;j<projects.length;j++)
	{
		if (j<=i)
			projects[j].img.animate ({left:237+(j*253)},'fast');
		else
			projects[j].img.animate ({left:237+((j-1)*253)+726+24},'fast');
	}
	currentProject = i;

	projects[currentProject].img
		.hide()
		.css({
		clip:'rect(24px 257px 144px 24px)'
	});
	projects[currentProject].img.find('.desat').show();
	projects[currentProject].alt.hide();
}

function listContract()
{
	for (var j=0;j<projects.length;j++)
	{
		projects[j].img.animate ({left:237+(j*253)},'fast');
	}
	projects[currentProject].img.show();
	
	var left = (0-(currentProject*253))+363;
	

	if (left < -(listWidth-windowWidth))
		left = -(listWidth-windowWidth);
	
	if (left > 0)
		left = 0;		
	
	if (!iOS)
		$('#list').animate({left:(left)},'fast');

	$('#projectDownArrow').stop(true,true).hide();
	if (iOS) {
		$('#arrowRight').show();
	}
	
	setTimeout (listContractDone,500);
}

function listContractDone()
{
	projectListLocked = false;
}

function resize ()
{
	windowWidth = $(window).width();
	windowHeight = $(window).height();
    bufferX = (windowWidth/3);
    bufferY = (windowHeight/3);

	if (iOS)
		var projHeight = ((windowHeight/2)-70)-22-65;
	else
		var projHeight = ((windowHeight/2)-70)-22-28;
		
	var listTop = (windowHeight/2)-70;
	
	$('#arrowRight').css({
    	top:((windowHeight)/2)-20
     });
	
	var projectTextHeight = $('#projectDetailProgram').height();
	
	c("projectTextHeight "+projectTextHeight);
	
	if (!iOS && projectTextHeight < projHeight) {
		$('#projectDetailText').css({
	    	height:projHeight,
	    	overflow:'hidden'
	     });
	}
    
	$('#list').css({top:listTop});
    
	$('#loading').css({top:(windowHeight/2)});
	
	if (page == 'home')
	{
		var homeWidth = windowWidth - 238;
		var homeHeight = windowHeight;
		var homeWindowWidth = windowWidth - 238 - 20;
		var homeWindowHeight = windowHeight - 40;
		var imageWidth = 1200;
		var imageHeight = 800;
		
		var modX = homeWidth / imageWidth;
		var modY = homeHeight / imageHeight;
		
		var mod = modX > modY ? modX : modY;
		
		$('#homeImage img').css({
			position:'absolute',
			top:((homeWindowHeight-(imageHeight*mod))/2),
			left:((homeWindowWidth-(imageWidth*mod))/2),
			width:(imageWidth*mod),
			height:(imageHeight*mod)
			});
		$('#homeImage').css({
			position:'absolute',
			width:homeWindowWidth,
			height:homeWindowHeight
			});
	}
} 


function update () 
{
	if (iOS)
		return;
	
	if (page == "projects") // actually projects list - viewing a project is 'content'
	{
	    if (!projectListLocked)
	    {
		    if (listWidth > windowWidth)
		    {
				if (mouseX > windowWidth - bufferX)
				{
					var mod = (mouseX-(windowWidth - bufferX));
					mod = mod / 100;
					
					var off = $('#list').offset();
					var left = off.left-mod;
						
					
					if (left < -(listWidth-windowWidth))
						left = -(listWidth-windowWidth);
		
					$('#list').css({left:(left)});
					
				} else if (mouseX < bufferX)
				{
					var mod = (mouseX-bufferX);
					mod = mod*-1;
					mod = mod / 100;
					
					var off = $('#list').offset();
					var left = off.left+mod;
		
					if (left > 0)
						left = 0;
					$('#list').css({left:left});
				}
		    }
	    }
	} else if (page == "home")
	{
	
	}
	else if (page == "content")
	{
		var off = $('#projectDetail').offset();
		var projectHeight = $('#projectDetail').height();
		projectHeight = $('#projectDetail').height();
		var top = 10;
    	if (mouseY > windowHeight - bufferY)
		{
			var mod = (mouseY-(windowHeight - bufferY));
			mod = mod / 25;
			
			top = off.top-mod;
			
			if (top < -(projectHeight-windowHeight))
				top = -(projectHeight-windowHeight);

			if (top > 0)
				top = 0;
			
			$('#projectDetail').css({top:(top)});
			
		} else if (mouseY < bufferY)
		{
			var mod = (mouseY-bufferY);
			mod = mod*-1;
			mod = mod / 25;
			
			top = off.top+mod;

			if (top > 0)
				top = 0;
			
			$('#projectDetail').css({top:(top)})
		}

		if (projectHeight > windowHeight)
		{
	    	var op = $('#projectDownArrow').css('opacity');
			if (top == 0 && projectArrowVisible == false)
			{
				$('#projectDownArrow').stop(true,true).fadeIn();
				projectArrowVisible = true;
			} else if (top < 0 && projectArrowVisible == true)
			{
				$('#projectDownArrow').stop(true,true).fadeOut ();
				projectArrowVisible = false;
			}
		} else 
		{
			$('#projectDownArrow').stop(true,true).hide ();
		}
	}
}


// @brief jQuery css clip animation support
// @author hon2a
// @version 1.0.0
 
// inspired by Jim Palmer's plugin jquery.animate.clip
// Released under the MIT license.
// 
(function(jQuery){
	jQuery.fx.step.clip = function (fx) {
		if ($(fx.elem).is(':visible')) {
			if (fx.start == 0) {
				var emCoef = ( parseInt($(fx.elem).css('fontSize')) * 1.333 ),
					horizontalPercentCoef = $(fx.elem).width() / 100,
					verticalPercentCoef = $(fx.elem).height() / 100,
					regExp = {
						parseSize: /^(\d{1,}(\.\d+)?)(px|em|%)$/,
						stripRect: /rect\(([^)]*)\)/,
						splitRect: /[,\s]\s*/,
						matchAuto: /^auto$/
					},
					autoSizes = ['0px', '101%', '105%', '0px'];
				var parseClipRect = function (rectStr) {
					var rect = ((typeof rectStr != 'string') || (rectStr == '') || (rectStr == 'auto'))
						? ['auto', 'auto', 'auto', 'auto']
						: rectStr.replace(regExp.stripRect, '$1').split(regExp.splitRect);
					$.each(rect, function (i, size) {
						var matches = regExp.parseSize.exec(size.replace(regExp.matchAuto, autoSizes[i]));
						rect[i] = parseFloat(matches[1]);
						switch (matches[3]) {
							case 'em':
								rect[i] *= emCoef;
								break;
							case '%':
								rect[i] *= ((i % 2) ? horizontalPercentCoef : verticalPercentCoef);
								break;
						}
					});
					return rect;
				};

				fx.start = parseClipRect(fx.elem.style.clip);
				fx.end = parseClipRect(fx.end);
			}

			var currentRect = [];
			for (var i = 0; i < 4; ++i) {
				currentRect.push((fx.pos * (fx.end[i] - fx.start[i])) + fx.start[i]);
			}
			fx.elem.style.clip = 'rect(' + currentRect.join('px ') + 'px)';
		} else {
			fx.elem.style.clip = 'auto';
		}
	}
})(jQuery);