// base vars
var modalBuilt = false;
var popCount = 0;

var baseUrl,
  modalObj,
  modalCloseObj,
  modalContentObj,
  lightsObj,
  modalNavObj,
  modalPrevBtnObj,
  modalNextBtnObj,
  project1,
  project2,
  project3;

// slider vars
var prevExist;
var nextExist;

var workCurrPos;
var workPrev;
var workNext;

var projectWidth = 940;

var buildModal = function(){
  lightsObj = $('<div class="lights"></div>').appendTo('body').hide();

  modalObj = $('<div class="modal"></div>').appendTo('body').hide();
  modalCatNavObj = $('<nav class="catnav"></nav>').appendTo(modalObj);
  modalCloseObj = $('<div class="close"></div>').appendTo(modalObj);
  modalCloseBtnObj = $('<a class="png" href="#">Close</a>').appendTo(modalCloseObj);
  modalContentObj = $('<div class="modal-content"></div>').appendTo(modalObj);

  project1 = $('<div class="project"></div>').appendTo(modalContentObj);
  project2 = $('<div class="project"></div>').appendTo(modalContentObj);
  project3 = $('<div class="project"></div>').appendTo(modalContentObj);
  modalNavObj = $('<div class="projectnav"></div>').appendTo(modalObj);

  modalPrevBtnObj = $('<div class="previous"><a href="#"></a></div>').appendTo(modalNavObj).hide();
  modalNextBtnObj = $('<div class="next"><a href="#"></a></div>').appendTo(modalNavObj).hide();
  
	
  // reset positions
  $('.modal-content div.project:nth-child(1)').css('left', 0);
  $('.modal-content div.project:nth-child(2)').css('left', 940);
  $('.modal-content div.project:nth-child(3)').css('left', 1880);
  
  // close event
  lightsObj.bind('click', function(e) {
    e.preventDefault();
    closeModal();
  });
  
  modalCloseBtnObj.bind('click', function(e) {
    e.preventDefault();
    closeModal();
  });
  
  $(document).keyup(function(e) {
    //close on escape key
    if (e.keyCode == 27) { 
      closeModal();
    }
  });
  
  updateModalPosition();
  $(window).bind("resize", updateModalPosition);
  
  // listeners for nav buttons

  // PREV click
  prevFlag = true;
  modalPrevBtnObj.find('a').bind('click', function(e) {
    e.preventDefault();
    
    mahButton = $(this);
    
    // update current entry id variable
    workCurr = parseInt($(e.target).attr('name'));
    
    if (!prevFlag) return;
    
    prevFlag = false;
    mahButton.addClass('active');
    
    modalContentObj.animate({"left": "+="+projectWidth+"px"}, 400, 'galleria', function() {
	
      // if starting on last item, we already have what we need for the previous two, so don't do anything
      if (work[workCurrPos+2] || popCount > 2) {
        $('.modal-content div.project:nth-child(3)').prependTo(modalContentObj);
      }
      
      //reset positions
      $('.modal-content div.project:nth-child(1)').css('left', 0);
      $('.modal-content div.project:nth-child(2)').css('left', 940);
      $('.modal-content div.project:nth-child(3)').css('left', 1880);
      
      // if starting on last item, we already have what we need for the previous two, so don't do anything
      if (work[workCurrPos+2] || popCount > 2) {
        $(this).css("left", "-"+projectWidth+"px");
        getModalContent($('.modal-content div.project:nth-child(1)'), baseUrl+workPrev);
      }
      
      prevFlag = true;
      mahButton.removeClass('active');
      
    });
    
    updateNav();
  });
  
  // NEXT click
  nextFlag = true;
  modalNextBtnObj.find('a').bind('click', function(e) {
    e.preventDefault();
    mahButton = $(this);
    
    if (!nextFlag) return;
    
    nextFlag = false;
    mahButton.addClass('active');
    
    // update current entry id variable
    workCurr = parseInt($(e.target).attr('name'));

	//console.log(workCurr);
    
    modalContentObj.animate({"left": "-="+projectWidth+"px"}, 400, 'galleria', function() {
      // if starting on first item, we already have what we need for the next two, so don't do anything
      if (work[workCurrPos-2] || popCount > 2) {
        $('.modal-content div.project:nth-child(1)').appendTo(modalContentObj);
      }
      
      //reset positions
      $('.modal-content div.project:nth-child(1)').css('left', 0);
      $('.modal-content div.project:nth-child(2)').css('left', 940);
      $('.modal-content div.project:nth-child(3)').css('left', 1880);
      
      // if starting on first item, we already have what we need for the next two, so don't do anything
      if (work[workCurrPos-2] || popCount > 2) {
        $(this).css("left", "-"+projectWidth+"px");
        getModalContent($('.modal-content div.project:nth-child(3)'), baseUrl+workNext);
      };
      
      nextFlag = true;
      mahButton.removeClass('active');

  	var updated = jQuery.Event("updated");
	$(document.body).trigger(updated);
      
    });
    
    updateNav();
  });
  
  modalContentObj.css('width', projectWidth*3);
  modalBuilt = true;
}

var prevProjectObj = function(obj){
  obj = obj || project1;
  return obj;
}

var activeProjectObj = function(obj){
  obj = obj || project2;
  return obj;
}

var nextProjectObj = function(obj){
  obj = obj || project3;
  return obj;
}


var populate = function(projectID){
  if (workPrev && workNext) {
    modalContentObj.css('left', -projectWidth);
    getModalContent(activeProjectObj(), baseUrl+projectID);
    getModalContent(nextProjectObj(), baseUrl+workNext);
    getModalContent(prevProjectObj(), baseUrl+workPrev);
    
  }else if (workPrev == undefined) {
    modalContentObj.css('left', 0);
    getModalContent(activeProjectObj(project1), baseUrl+projectID);
    getModalContent(nextProjectObj(project2), baseUrl+workNext);
    getModalContent(nextProjectObj(project3), baseUrl+work[workCurrPos+2]);
    
  }else if (workNext == undefined) {
    modalContentObj.css('left', -(projectWidth*2));
    getModalContent(activeProjectObj(project3), baseUrl+projectID);
    getModalContent(prevProjectObj(project2), baseUrl+workPrev);
    getModalContent(prevProjectObj(project1), baseUrl+work[workCurrPos-2]);
  };
  
  updateNav(); 
}

var proximity = function(){
  workCurrPos = $.inArray(workCurr, work); //returns position in array ... workCurr set in work index file and on navigation buttons
  workPrev = work[workCurrPos-1];
  workNext = work[workCurrPos+1];
}

var updateNav = function(){
  prevExist = false;
  nextExist = false;
  
  popCount++;
  
  proximity();
  
  if(workPrev > -1){
    prevExist = true;
    modalPrevBtnObj.find('a').attr({
      href: baseUrl+workPrev,
      name: workPrev
    });
  }
  
  if(workNext > -1){
    nextExist = true;
    modalNextBtnObj.find('a').attr({
      href: baseUrl+workNext,
      name: workNext
    });
  }

  if (!prevExist) {
    modalPrevBtnObj.fadeOut(200);
  }else{
    modalPrevBtnObj.fadeIn(200);
  };
  
  if (!nextExist) {
    modalNextBtnObj.fadeOut(200);
  }else{
    modalNextBtnObj.fadeIn(200);
  };

  //console.log($(document.body));
}

var openModal = function(url, projectID, section){	

  buildModal();
  
  popCount = 0;
  workCurr = projectID;

  //if (section) modalObj.initSection = section;
  
  //prev and next exist?
  proximity();
  
  //set the baseUrl so we have it available for the future
  baseUrl = url;
  
  //update UI
  lightsObj.delay(100).fadeIn(50);
  modalObj.delay(200).fadeIn(200);
  updateModalPosition();
  
  populate(projectID);

  return modalObj;
}

var closeModal = function(){
  lightsObj.fadeOut(200);
  modalObj.fadeOut(150);
  
  lightsObj.remove().delay(200);
  modalObj.remove().delay(200);
}

var updateModalPosition = function(){
  lightsObj.width($(window).width());
  lightsObj.height($.getDocHeight());
  modalObj.css('top',( ($(window).height())/2) - modalObj.height()/2 + $(window).scrollTop());
  if ($(document.body).hasClass('mobile')) {
    modalObj.css('top',( ($(window).height())/2) - modalObj.height()/2 + $(window).scrollTop() + 35);
  }
  modalObj.css('left',( ($(window).width())/2) - modalObj.width()/2);
}

var getModalContent = function(el, url){
  $.ajax({
    url: url,
    beforeSend: function(){
      el.html('<div class="loader"><div class="dot"></div></div>');
    },
    success: function(data) {
      el.html(data);
	  //console.log(data);
    }
  });
}