JS_PATH = '/media/js/';

require([

// Libs
JS_PATH+'jquery.js', JS_PATH+'jquery-ui.js', JS_PATH+'jquery.transform-0.8.0.min.js', 

// App
JS_PATH+'utils.js', JS_PATH+'grid.js', JS_PATH+'detail.js'], 

function() {
  $(function(){

    // Adjust height to be 100%
    $('#map').height($(window).height());

    // Controller
    $("#controls .inner div.title a").click(function(e) {
        e.preventDefault();
        $(this).parent('div').children('div').toggle();
    });

    // Pages
    $("#credits").click(function() {
      $(this).fadeOut();
    });
    $('#credits_link').click(function(e){
      e.preventDefault();
      $(".page").hide();
      $("#credits").fadeIn();
    });

    $("#about").click(function() {
      $(this).fadeOut();
    });
    $('#about_link').click(function(e){
      e.preventDefault();
      $(".page").hide();
      $("#about").fadeIn();
    });

    $('#contact_link').click(function(e) {
      e.preventDefault();
      $(".page").hide();
      $("#contact").fadeIn();
    });
    $("#contact form").submit(function(e) {
    
      $form = $(this);
      e.preventDefault();
      $form.find("input[type=submit]").val('Sending')
      $form.addClass('sending');
      $.post('/contact/',{
        'name': $("#contact_name").val(),
        'email': $("#contact_email").val(),
        'message': $("#contact_message").val()
      }, function(res) {
        $form.removeClass('sending');
        $form.find("input[type=submit]").val('Sent!')
        $("#contact").fadeOut();
      });
    });
    $("#contact_hide, #contact .close").click(function(e) {
      e.preventDefault();
      $("#contact").fadeOut();
    });
    $("#contact_inquire .close").click(function(e) {
      e.preventDefault();
      $("#contact_inquire").hide();
    });

    $("#controls .inner div.title div a").click(function(e) {
        e.preventDefault();
        if ($(this).children('img').attr('src')) {
          $('#color_list .seld').each(function(e) {
            file = $(this).children('img').attr('src').split('/').reverse()[0];
            $(this).children('img').attr('src', "/media/images/colors/"+file);
          });
          $("#color_list .seld").removeClass('seld');

          file = $(this).children('img').attr('src').split('/').reverse()[0];
          $(this).children('img').attr('src', "/media/images/colors-on/"+file);
        }

        if (!$(this).hasClass('seld')) {
          $('#'+$(this).parent('div').attr('id')+" a").removeClass('seld');
          $(this).addClass('seld');
        } else {
          $(this).removeClass('seld');
        }
        Grid.build();
    });

    $("#reset_filters").click(function(e) {
      e.preventDefault();
      $(".seld").removeClass('seld');
      Grid.build();
    });
    
    // Grid

    // Set bounds
    Grid.bounds.x = $('#map').width();
    Grid.bounds.y = $('#map').height();

    $("#content").draggable({
      stack: "img",
      stop: function() {
        Grid.show_visible();  
      }
    });
    
    $("#slider").slider({
      min: 0.2,
      max: 3,
      step: 0.1,
      value: 1,
      stop: Grid.resize
    });

    Grid.init();

    // Detail Viewer
    Detail.init({
      self_selector: "#blackout",
      image_selector: "#blackout .frame img",
      close_selector: "#blackout a.close",
      slider_selector: "div#detail_slider",
      frame_selector: "#blackout div.frame",
    });

    // Center Welcome Text
    var scrolledX = document.body.scrollLeft || document.documentElement.scrollLeft || self.pageXOffset;
    var scrolledY = document.body.scrollTop || document.documentElement.scrollTop || self.pageYOffset;

    var screenWidth = document.body.clientWidth || document.documentElement.clientWidth || self.innerWidth;
    var screenHeight = document.body.clientHeight || document.documentElement.clientHeight || self.innerHeight;

    var left = scrolledX + (screenWidth - $("#welcome").width())/2;
    var top = scrolledY + (screenHeight - $("#welcome").height())/2;

    $("#welcome").css({
        "position": "absolute",
        "top": top,
        "left": left
    }).click(function(e) {
      $("#welcome").hide();
    });

  });

});