$(function() {
  $(window)
    .resize(function() {
  	  setMapCanvasSize();
  	  setHomeContentPosition();
    })
    .load(function() {
      getProjectInfo();
  	  setHomeContentPosition();
    });
  
  $("#logo, #home_tab").live("click", function () {
    $("#main_body > div").hide(500);
    $("#home").show(1000);
  });

  $("#portfolio_tab, #home_content_1 .green").live("click", function () {
    $("#main_body > div").hide();
    //$("#portfolio").show();
    $("#portfolio").show().css({"opacity": 0}).animate({"opacity":1}, 500);
  });

  $("#playground_tab").live("click", function () {
    $("#main_body > div").hide(500);
    $("#playground").show(1000);
  });
  
  
  $("#about_us_tab, #home_content_2").live("click", function () {
    $("#main_body > div").hide(500);
    $("#about_us").show(1000);
    
    setMapCanvasSize();
	
	var latlng = new google.maps.LatLng(22.287962231754904, 114.14830327033997);
    var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
       
    var marker = new google.maps.Marker({
        position: latlng,
        icon:"img/zmarker.png"
    });
  
    marker.setMap(map); 
    
  });

  $(".showcase").click(function() {
    var project_info = $(this).find("img").data("project_info");
    if (project_info != undefined){
      $("#project_name").html(project_info["project_name"]);
      $("#project_date").html(project_info["project_date"]);
      $("#project_url").find("a").attr("href", project_info["url"]).html(project_info["url"]);
      
      $("#used_langs div").each(function() {
        $(this).removeClass("used_langs_highlight");
      });
      var used_langs = project_info["used_langs"].split(",");
      var used_langs_count = used_langs.length;
      for (var i = 0; i < used_langs_count; ++i) {
        $("#used_langs_" + used_langs[i]).addClass("used_langs_highlight");
      }
      
      $(".showcase").each(function() {
        $(this).removeClass("showcase_shadow");
      });
      $(this).addClass("showcase_shadow");
    }        
  }/*,
  function(){
    $(this).removeClass("showcase_shadow");    
  }*/);
  $("#contactUsForm").submit(function(){
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();
    
    if (name == ""){
      alert("Hello, Stranger! May I know what's your name? Thank you for trying to contact us!");
      $("#name").focus();
    }
    else if (email == "") {
      alert("Hello, " + name + "!, what's your email? I won't spam you! :p");
      $("#email").focus();
    }
    else if (message == "") {
      alert("Hello, "+ name + "! Sorry I can't hear you, can you enter your message again?");
      $("#message").focus();
    }
    else {
      $.post("ajax/contactUs.php", {
        name: $("#name").val(),
        email: $("#email").val(),
        message: $("#message").val()
      },
      function(msg) {
        if (msg == "1") {
          alert("Thank you for contacting us!");
          $("#name").val("");
          $("#email").val("");
          $("#message").val("");
        }
      },
      "text"
      );
    }

    return false;
  });
});


function setMapCanvasSize() {
    $("#map_canvas").width($("#main_body").width()*0.5)
					.height($("#main_body").height()*0.5);
}

function getProjectInfo() {
  $.get("ajax/project_info.ajax.php", function(data) {
    projects = $.parseJSON(data);
    var numOfProjects = projects.length;
    for (var i = 0; i < numOfProjects; ++i) {
      var img_names = projects[i]["img_names"];
      img_names = img_names.split(",");
      numOfImages = img_names.length;
      /*for (var j = 0; j < numOfImages; ++j) {
        img_names[j];
      }*/
      $("#showcase" + (i + 1)).attr("src", "img/project_img/" + img_names[0])
                              .data("project_info", projects[i]);
    }
  });
}

function setHomeContentPosition() {
  if ($("#home_content").position().top < 0) {
    $("#home_content").css({"top": "0%", "bottom": "10%"});
  }
  else {
    $("#home_content").css({"top": "auto", "bottom": "10%"});
  }
}