/*********************************************************************/
/*********************************************************************/
// detect the url and open a project if one is in the url
var projectList = [];
var mainURL = "http://www.7squarefeet.com";

window.onload=function(){
  var loc= window.location.hash.toString();
  var lastIndex = loc.lastIndexOf("#");
  
  if(loc == "#login") {
		// do nothing
		$("#loginNav").show();
	}else {
		$("#loginNav").hide();
	}
	
  if (lastIndex > -1 && loc!=="#login") {
    var project = loc.slice(lastIndex+1,loc.length);
	openLoader(project);
	
  }
}
  $("#loadingBar").animate({ height:"0px"}, 0 );
  $("#loadingBar").hide();
  
  $(".closeBut").hide();


$(document).ready(function() {
	applyButtonAnimations();
	
	createProjects('js/projects.json');
	
  var toggle = 0;
  $.getScript('');
  var username;
  var password;
		
		$("#submit").click(function(){ 
  			username=$("#user").val();
  			password=$("#pass").val();
 			 $.post('userPassChecker.php',{user:username, pass:password},function(e){
 		if(e=="A username and password is required" || e=="A username is required" || e=="A password is required" || e=="Invalid username" || e=="Invalid password" || e=="Invalid username and password") {
   			 document.getElementById('error').innerHTML="<h6>"+e+"</h6>";
		}else {
  // window.location.href=e;
   

    $(".project").remove();
   createProjects(e);
    $("#loginNav").remove();
   closePanel();
   
		 }
		 
    });

  });
  
  
/*********************************************************************/
/*********************************************************************/
// populate the project divs

function createProjects(jSonURL) {

var mainURL = "www.7squarefeet.com";

  
  $.getJSON(jSonURL, function(data) {
    $.each(data, function(key, val) {
      projectList[key] = [];
      projectList[key]['title'] = val['title'];
      projectList[key]['client'] = val['client'];
      projectList[key]['thumb'] = val['thumb'];
      projectList[key]['image'] = val['image'];
	  projectList[key]['like'] = val['like'];
	  projectList[key]['color'] = val['color'];
      outputProject(key, projectList[key]);
    });

$('.project').hover(
function(){ $(this).children('.launch').children('.launchImg').stop(true,true).animate({ 'top':0},200); },
function(){ $(this).children('.launch').children('.launchImg').stop(true,true).animate({ 'top':-33},200); }
);
  });
}
});

/*********************************************************************/
/*********************************************************************/
// create the divs for the projects
var i=0;

function outputProject (key, project) {
  i++
 $('#content').append('<a href="#' + key + '\"><div class="project" onClick="openLoader(\'' + key + '\');"><div class="overlayButton"></div><div class="image"><img src="' + project['thumb'] + '" alt="' + project['title'] + '"/></div><h1>' + project['title'] + '</h1> <p>Category: ' + project['client'] + '</p><div class="launch"><img src=img/launchProjectButtonBOTH.png class="launchImg"/></div></div></a>');

}
/*********************************************************************/
/*********************************************************************/
// fade out panels at start

 $('.closeAboutGraphic').fadeOut(1, function() {});
 $('#projectShow').fadeOut(1, function() { });
 $('#aboutShow').fadeOut(1, function() { });
 $('#contactShow').fadeOut(1, function() { });
 $('#loginShow').fadeOut(1, function() { });
 
/*********************************************************************/
/*********************************************************************/
// close the sliding panels

function closePanel() {
  
  $('.likeButton').empty();
  
  var maxHeight=600;
  var diff=30;
  var easeAmount = 300;
  
  $(".closeBut").hide();
  
  $("#projectPanel").animate({ height:"0px"}, easeAmount );
  $('#projectShow').fadeOut(easeAmount, function() { });
  
  $("#aboutPanel").animate({ height:"0px"}, easeAmount );
  $('#aboutShow').fadeOut(easeAmount, function() { });
  
  
  $("#contactPanel").animate({ height:"0px"}, easeAmount );
  $('#contactShow').fadeOut(easeAmount, function() { });
  
  $("#loginPanel").animate({ height:"0px"}, easeAmount );
  $('#loginShow').fadeOut(easeAmount, function() { });
  
  
  $("#content").animate({ 'padding-top':diff}, easeAmount );
  
  $('#aboutNav').html('<img id="aboutNavImg" src="img/aboutBoth.png" alt="about"/>');
  $('#contactNav').html('<img id="contactNavImg" src="img/contactBoth.png" alt="about"/>');
  $('#loginNav').html('<img id="loginNavImg" src="img/loginBoth.png" alt="about"/>');
  applyButtonAnimations();
  
  
}
/*********************************************************************/

/*********************************************************************/
// open the contact panel
  
function contact() {
$("#loadingBar").hide();
$("#contactDiv").show();
  $(".closeBut").show();
  $('#aboutNav').html('<img id="aboutNavImg" src="img/aboutBoth.png"/>');
  $('#contactNav').html('<img src=img/contactBoth.png />');
  $('#loginNav').html('<img id="loginNavImg" src="img/loginBoth.png"/>');
  
  var projectHeight = $('#projectPanel').height();
  var aboutHeight = $('#aboutPanel').height();
  var contactHeight = $('#contactPanel').height();
  var loginHeight = $('#loginPanel').height();
  
  var maxHeight=1300;
  var diff=30;
  var easeAmount=300;
  
  if(projectHeight>100) {
    $("#projectPanel").animate({ height:"0px"},1);
    $('#projectShow').fadeOut(1, function() { });
  }
  
  if(aboutHeight>100) {
    $("#aboutPanel").animate({ height:"0px"}, 1 );
    $('#aboutShow').fadeOut(1, function() { });
  }
  if(loginHeight>100) {
    $("#loginPanel").animate({ height:"0px"}, 1 );
    $('#loginShow').fadeOut(1, function() { });

  }
  
  $("#contactPanel").animate({ height:maxHeight}, easeAmount );
  $('#contactShow').fadeIn(easeAmount, function() {});
  imageresize(); 
}  
  
  
/*********************************************************************/

/*********************************************************************/
// open the about panel
  
function about() {
$("#loadingBar").hide();
$("#aboutDiv").show();
  $(".closeBut").show();
  $('#aboutNav').html('<img  src="img/aboutBoth.png"/>');
  $('#contactNav').html('<img id="contactNavImg" src=img/contactBoth.png />');
  $('#loginNav').html('<img id="loginNavImg" src="img/loginBoth.png"/>');
  
  var projectHeight = $('#projectPanel').height();
  //var aboutHeight = $('#aboutPanel').height();
  var contactHeight = $('#contactPanel').height();
  var loginHeight = $('#loginPanel').height();
  
  var maxHeight=590;
  var diff=30;
  var easeAmount=300;
  
  if(projectHeight>100) {
    $("#projectPanel").animate({ height:"0px"},1);
    $('#projectShow').fadeOut(1, function() { });
  }
  
  if(contactHeight>100) {
    $("#contactPanel").animate({ height:"0px"}, 1 );
    $('#contactShow').fadeOut(1, function() { });
  }
  if(loginHeight>100) {
    $("#loginPanel").animate({ height:"0px"}, 1 );
    $('#loginShow').fadeOut(1, function() { });

  }
  
  $("#aboutPanel").animate({ height:maxHeight}, easeAmount );
  $('#aboutShow').fadeIn(easeAmount, function() {});
  imageresize(); 
}  
  
  
/*********************************************************************/

/*********************************************************************/
// open the login panel
 
 function login() {
$("#loadingBar").hide();
  $(".closeBut").show();
  $('#aboutNav').html('<img id="aboutNavImg" src="img/aboutBoth.png" alt="about"/>');
  $('#contactNav').html('<img id="contactNavImg" src="img/contactBoth.png" alt="about"/>');
  $('#loginNav').html('<img src=img/loginBoth.png />');
  
  var projectHeight = $('#projectPanel').height();
  var aboutHeight = $('#aboutPanel').height();
  var contactHeight = $('#contactPanel').height();
  var loginHeight = $('#loginPanel').height();
  
  var maxHeight=300;
  var diff=30;
  var easeAmount = 300;
  
  if(projectHeight>100) {
    $("#projectPanel").animate({ height:"0px"},1);
    $('#projectShow').fadeOut(1, function() { });
  }
  
  if(aboutHeight>100) {
    $("#aboutPanel").animate({ height:"0px"}, 1 );
    $('#aboutShow').fadeOut(1, function() { });
  }
  if(contactHeight>100) {
    $("#contactPanel").animate({ height:"0px"}, 1 );
    $('#contactShow').fadeOut(1, function() { });
  }
  
  $("#loginPanel").animate({ height:maxHeight}, easeAmount );
  $('#loginShow').fadeIn(easeAmount, function() {});
}  
  
/*********************************************************************/
/*********************************************************************/
// open the project panel
  
function updateProject(key,imageHeight) {
  
$("#loadingBar").hide();
$('#largeImage').show();
$(".closeBut").show();
imageresize(); 
var newHeight = $('#projectShow').height()+40;
  
  //var encodedURI = encodeURIComponent(mainURL+"#"+key);
    
  $("html, body").animate( { scrollTop: 0 }, 'slow' );
  
  var easeAmount = 1000;
  
  var maxHeight=600;
  var diff=30;
  
  var projectHeight = $('#projectPanel').height();
  var aboutHeight = $('#aboutPanel').height();
  var contactHeight = $('#contactPanel').height();
  var loginHeight = $('#loginPanel').height();
  
  if(contactHeight>100) {
    $("#contactPanel").animate({ height:"0px"}, 1 );
    $('#contactShow').fadeOut(1, function() { });
  }
  
  if(aboutHeight>100) {
    $("#aboutPanel").animate({ height:"0px"}, 1 );
    $('#aboutShow').fadeOut(1, function() { });
  }
  if(loginHeight>100) {
    $("#loginPanel").animate({ height:"0px"}, 1 );
    $('#loginShow').fadeOut(1, function() { });
  }
    
  $("#projectPanel").animate({ height:newHeight}, easeAmount );
  $('#projectShow').fadeIn(1, function() { });
}


/*********************************************************************/
/*********************************************************************/
// animate all buttons on the site

function applyButtonAnimations() {

$('#twitterButton').hover(
function(){ $(this).stop(true,true).animate({ 'padding-top':20},200); },
function(){ $(this).stop(true,true).animate({ 'padding-top':0},200); }
);

$('#aboutNavImg').hover(
function(){ $(this).stop(true,true).animate({ 'padding-top':33},200); },
function(){ $(this).stop(true,true).animate({ 'padding-top':0},200); }
);

$('#contactNavImg').hover(
function(){ $(this).stop(true,true).animate({ 'padding-top':33},200); },
function(){ $(this).stop(true,true).animate({ 'padding-top':0},200); }
);

$('#loginNavImg').hover(
function(){ $(this).stop(true,true).animate({ 'padding-top':33},200); },
function(){ $(this).stop(true,true).animate({ 'padding-top':0},200); }
);

}

$('.closeProjectGraphic').hover(
function(){ $(this).children('.closeBut').stop(true,true).animate({ 'padding-top':39},200); },
function(){ $(this).children('.closeBut').stop(true,true).animate({ 'padding-top':0},200); }
);

$('#mail').hover(
function(){ $(this).children('#contactEmail').stop(true,true).animate({ 'padding-top':23},200); },
function(){ $(this).children('#contactEmail').stop(true,true).animate({ 'padding-top':0},200); }
);



/*********************************************************************/
/*********************************************************************/
// resize the projects on window resize

var startWidth = $('#theImg').width();
var maxWidth = 1200;
var padding = 80;
var firstTime = 0

 function imageresize() {
 var windowSize = $(window).width();
  if ((windowSize) > maxWidth){
$('#theImg').width(1200);
$('#theImg2').width(1200);
$('#theImg3').width(1200);
if(firstTime==1 && $('#projectPanel').height()>200) {
	
 var projectHeight = $('#projectShow').height()+40;
	$("#projectPanel").height(projectHeight);
}
 } else {
  $('#theImg').width($(window).width()-padding);
  $('#theImg2').width($(window).width()-padding);
  $('#theImg3').width($(window).width()-padding);
if($('#theImg').height()>200) {
   projectHeight = $('#projectShow').height()+40;
	$("#projectPanel").height(projectHeight);
  }
if($('#theImg2').height()>200) {
	var aboutHeight = $('#aboutShow').height()+40;
	$("#aboutPanel").height(aboutHeight);
	}
if($('#theImg3').height()>200) {
	var contactHeight = $('#contactShow').height()+40;
	$("#contactPanel").height(contactHeight);
	}
 }
 firstTime=1;
 }
 imageresize();   
 $(window).bind("resize", function(){
 imageresize();
 });

/*********************************************************************/
/*********************************************************************/
// opne the project loader
function openLoader(key) {
	$("html, body").animate({ scrollTop: 0 }, "fast");
	closePanel()

	var easeAmount=500;
	 $("#loadingBar").show();
	   	$("#loadingBar").animate({ height:"50px"}, easeAmount );
			$("#bd").animate({ height:"50px"}, easeAmount );
		var img = new Image();
	 	 $(img).load(projectList[key]['image'], function(response, status, xhr) {
	if(status=="success") {
		 $('#largeImage').html('<img id="theImg" src='+projectList[key]['image']+' >')
		 
		 $('#projectPanel').css({backgroundColor: projectList[key]['color']})
		 
		 
		setTimeout('closeProjectLoader(\'' + key + '\')',1000)
		  }
	});
	loopLoadingBar()	  
}

 
 function closeProjectLoader(key) {
	 var easeAmount=300;
	 var imageHeight = document.getElementById('theImg').height;
	 $('#loadingBar').stop(true, true)
	 $("#loadingBar").animate({ height:"0px"}, easeAmount );
	 setTimeout('updateProject(\''+key+'\','+imageHeight+ '\)', 300)
	 
	
 }
 
/*********************************************************************/
/*********************************************************************/
// open the about loader
 
 function openAboutLoader(imgPath) {
	 var easeAmount=500;
	 closePanel();
	   $('#aboutNav').html('<img src=img/aboutBoth.png />');
 		 $('#contactNav').html('<img id="contactNavImg" src="img/contactBoth.png"/>');
  		$('#loginNav').html('<img id="loginNavImg" src="img/loginBoth.png" />');
	$("#loadingBar").show();
	   	$("#loadingBar").animate({ height:"50px"}, easeAmount );
		var img = new Image();
	 	 $(img).load(imgPath, function(response, status, xhr) {
	if(status=="success") {
		$('#aboutImage').html('<img id="theImg2" src="img/about.jpg">')
		 $('#aboutImage').show();
		  setTimeout('closeAboutLoader()',1000)
		  }
	});
	loopLoadingBar()	
		  
}
/*********************************************************************/
/*********************************************************************/
// cclose the about loader

 function closeAboutLoader() {
	 var easeAmount=300;
	 var imageHeight2 = document.getElementById('theImg2').height;
	 $('#loadingBar').stop(true, true)
	 $("#loadingBar").animate({ height:"0px"}, easeAmount );
	 setTimeout('about(\''+imageHeight2+ '\')',300)
	 
 }
 

 /*********************************************************************/
/*********************************************************************/
//  loop the loader animation
 function loopLoadingBar() {
	 	$('#loadingBar').animate({'backgroundPosition' : "+=900"}, 2000, 'linear');
        $('#loadingBar').animate({'backgroundPosition' : "+=900"}, 2000, 'linear',loopLoadingBar() );
 }
 
 $("#submit").click(function(){ 
  			username=$("#user").val();
  			password=$("#pass").val();
 			 $.post('userPassChecker.php',{user:username, pass:password},function(e){ 
    });

  });