if ('undefined' === typeof(window.App)) {
  window.App = {};
}

App.isDef = function(value){ return (typeof value !== 'undefined'); };

App.bodyClass = App.bodyClasses = function(klasses, fn){
   if(klasses.indexOf(' ') >= 0){
    klasses = klasses.split(/\s+/);
  }

  $(function(){
    var $body = $('body');
    if(klasses.join){
      if($body.is('.' + klasses.join(',.'))){ fn(); }
    }else{
      if($body.hasClass(klasses)){ fn(); }
    }
  });
};

// Generic carousel 
App.GenericCarousel = function($holder){
  this.$holder = $holder;
  this.$ul = $('ul', $holder);
  this.items = $("li", $holder);
  
  if(this.items.length > 1){
    // Create the carousel if there is more than 1 item in the <ul>
    this.$carousel = $holder.jcarousel({
      auto: 0,
      wrap: 'last',
      scroll: 1,
      animation: 1000, 
      itemVisibleInCallback: $.proxy(function(carousel, li, index, state) {
        $('span.images-current', this.$holder).text(index);
      }, this)
    });
    console.log("this.$carousel init ");
    console.log( this.$carousel );
    // Set the total
    $('span.images-total', this.$holder).text(this.items.length);
    // Reasign the display for the next and previous buttons to inlinew
    // because JCarousel sets them to block
    $('.jcarousel-prev, .jcarousel-next', $holder).css('display', 'inline');
    $('.indicator', this.$holder).fadeIn();
  } else {
    // Hide the next and prev buttons if there's only 1 item in the <ul>
    $('.indicator', $holder).css('display', 'none');
  }
  //set the right width on the <ul>, to fix webkit issue
  $("img", this.items[0]).bind("load", $.proxy(function(){
    this.$ul.css("width", $(this.items[0]).width()*this.items.length+"px");
  }, this));
};

App.HomePageCarousel = function($holder, $indicators) {
  this.$carousel = $holder;
  this.$container = $('.hero-container', this.$carousel);
  this.$ul = $('ul', $holder);
  // Map the indicators so we don't need to wrap al the time
  this.$indicators = $.map($indicators, function(n, i) {
    return $(n);
  });
  // Map the carousel items so we don't need to wrap al the time
  this.$items = $.map($('li', this.$carousel), function(n, i) {
    return $(n);
  });
  this.cWidth = this.$container.width();
  this.cIndex = -1;
  this.rotateInterval = 0;
  // Only do all this if there's more than one carousel item
  if(this.$items.length > 1) {
    // Adjust the left position of each item in the carousel
    for(var i = 0; i < this.$items.length; i++) {
      this.$items[i].css({
        left: this.cWidth * i,
        opacity: 0.15
      });
    }
    // Listen for clicks on side items
    $('a', this.$ul).click($.proxy(function(e) {
      var index = parseInt($(e.currentTarget).attr('id').replace('carousel-link-', '')) - 1;
      if(index != this.cIndex) {
        e.preventDefault();
        this.stopAutoAndGoto(index);
      }
    }, this));
    // Next button click handler
    $('.next-btn', this.$carousel).click($.proxy(function(event) {
      this.stopAutoAndGoto(this.cIndex + 1);
    }, this));
    // Prev button click handler
    $('.prev-btn', this.$carousel).click($.proxy(function(event) {
      this.stopAutoAndGoto(this.cIndex - 1);
    }, this));
    // Setup auto rotate interval
    this.rotateInterval = setInterval($.proxy(function() {
      this.gotoItem(this.cIndex + 1);
    }, this), 6000);
  }
  // Setup window resizing functionality
  $(window).resize($.proxy(function(e) {
    this.resize();
  }, this));
  this.resize();
  // Goto the first item and fade in
  this.gotoItem(0, false);
  this.$carousel.animate({opacity:1}, 500);
}

App.HomePageCarousel.prototype = {
  resize: function() {
    var w = $(window).width();
    if( w < 1300) {
      this.$container.css('left', 0 - Math.round((1300 - w) / 2));
    } else {
      this.$container.css('left', 0);
    }
  },
  stopAutoAndGoto: function(index) {
    clearInterval(this.rotateInterval);
    this.gotoItem(index);
  },
  gotoItem: function(index, animate) {
    // Adjust the index if its out of range
    index = (index >= this.$items.length) ? 0 : index;
    index = (index < 0) ? this.$items.length - 1 : index;
    if(index === this.cIndex) return;
    // Calculate desired left position and animation duration
    var dL = -index * this.cWidth;
    var d = (!App.isDef(animate) || animate) ? 750 : 0;
    // Move things into place
    try {
      this.$items[this.cIndex].animate({opacity:0.15}, d);
      this.$indicators[this.cIndex].animate({opacity:0}, d);
    } catch(e) {}
    this.cIndex = index;
    this.$items[this.cIndex].animate({opacity:1}, d);
    this.$indicators[this.cIndex].animate({opacity:1}, d);
    this.$ul.animate({left:(dL)+'px'}, d);
  }
}

App.AboutPageCarousel = function($holder) {
  this.$ul = $('ul', $holder);
  this.cIndex = 0;
  this.gWidth = $holder.width();
  this.items = $('li', $holder);
  // Adjust the positions of the items
  for(var i = 0; i < this.items.length; i++) {
    $(this.items[i]).css('left', (i*this.gWidth)+'px');
  }
  // Setup the next and prev buttons
  $('.next-btn', $holder).click($.proxy(function(e) {
    this.gotoItem(this.cIndex+1);
  }, this));
  $('.prev-btn', $holder).click($.proxy(function(e) {
    this.gotoItem(this.cIndex-1);
  }, this));
}

App.AboutPageCarousel.prototype = {
  gotoItem: function(index) {
    // Adjust the index if its out of range
    index = (index >= this.items.length) ? 0 : index;
    index = (index < 0) ? this.items.length - 1 : index;
    if(index === this.cIndex) return;
    var dX = -this.gWidth*index;
    this.$ul.animate({left:dX}, 500);
    this.cIndex = index;
  } 
}

// about page Modals
App.AboutPageModals = function($holder)
{  
  $('.boxed', $holder).click( function (e)
  {
      e.preventDefault();
		
      //Get the A tag
      var id = $(this).attr('modal_id');
      //console.log(  );
      //Get the screen height and width
      var maskHeight = $(document).height();
      var maskWidth = $(window).width();

      //Set heigth and width to mask to fill up the whole screen
      $('.mask').css({'width':maskWidth,'height':maskHeight});
      
      //transition effect		
      $('.mask').fadeIn(1000);	
      $('.mask').fadeTo("slow",0.8);
      $('.close').fadeIn(2000);	

      //Get the window height and width
      var winH = $(window).height();
      var winW = $(window).width();
    
      //Set the popup window to center
      $(id).css('top',  winH/2-$(id).height()/2 + $(window).scrollTop());
      $(id).css('left', winW/2-$(id).width()/2);

      //transition effect
      $(id).fadeIn(2000); 
  } );
  
  $('.mask').click(function ()
  {
      $(this).hide();
      $('.modals').hide();
      $('.close').hide();
  });
  
  //if close button is clicked
  $('.close').click(function (e) {
          //Cancel the link behavior
          e.preventDefault();
          
          $('.mask').hide();
          $('.modals').hide();
          $(this).hide();
  });		
}

App.AboutModalsCarousel = function($holder) {
  this.$ul = $('ul', $holder);
  this.mIndex = 0;
  this.gWidth = $holder.width();
  this.modelItems = $('li', $holder);
  // Adjust the positions of the items
  for(var i = 0; i < this.modelItems.length; i++) {
    $(this.modelItems[i]).css('left', (i*this.gWidth)+'px');
  }
  // Setup the next and prev buttons
  $('.next-btn', $holder).click($.proxy(function(e) {
    this.gotoItem(this.mIndex+1);
  }, this));
  $('.prev-btn', $holder).click($.proxy(function(e) {
    this.gotoItem(this.mIndex-1);
  }, this));
}

App.AboutModalsCarousel.prototype = {
  gotoItem: function(index) {
    // Adjust the index if its out of range
    index = (index >= this.modelItems.length) ? 0 : index;
    index = (index < 0) ? this.modelItems.length - 1 : index;
    if(index === this.mIndex) return;
    var dX = -this.gWidth*index;
    this.$ul.animate({left:dX}, 500);
    this.mIndex = index;
  } 
}
 
// Job flipper for contact page
App.JobFlipper = function($holder) {
  this.$ul = $('ul.job-list', $holder);
  this.buttons = $('li', this.$ul);
  this.arrows = $('img', this.$ul);
  this.items = $('.job-details div', $holder);
  this.jobIndex = -1;
  // add click handlers to butons
  for(var i = 0; i < this.buttons.length; i++) {
    $(this.buttons[i]).click($.proxy(function(e) {
      var i = parseInt($(event.currentTarget).attr('class').replace(/item-/g, ''));
      this.showJob(i-1);
    }, this));
  }
  this.showJob(0);
}

App.JobFlipper.prototype = {
  showJob: function(index) {
    if(index === this.jobIndex) return;
    try {
      $(this.items[this.jobIndex]).css('display', 'none');
      $(this.buttons[this.jobIndex]).removeClass('selected').addClass('unselected');
      $(this.arrows[this.jobIndex]).removeClass('selected').addClass('unselected');
    } catch(e) {}
    this.jobIndex = index;
    $(this.items[this.jobIndex]).fadeIn(200);
    $(this.buttons[this.jobIndex]).removeClass('unselected').addClass('selected');
    $(this.arrows[this.jobIndex]).removeClass('unselected').addClass('selected');
  }
}