var Folk = {

  init: function() {
    
    // Main website navigation
    $('#introduction').localScroll();
    $('#remember').localScroll();
    $('#main-navigation').localScroll();
    $('#complementary-navigation').localScroll();
    
    // Align logo and navigation elements
    this.alignElements();
    
    // All the funky animations that depend on user scrolling
    this.funkyAnimations();
    
    // The team 
    this.teamSlider();
    
    // projects
    this.caseListSlider();
    this.projectsWindow();
    
    // Social media popup
    this.socialPopup();
    
    // Some IE fixes...
    this.ieFixes();
  },
  
  ieFixes: function() {
    if( jQuery.support.opacity == false ) {
      $('.arrow-nav .prev').css('opacity', 0.2 );
    }
  },
  
  socialPopup: function() {
    
    var $socialBadges = $('#social-badges');
    var $closeElement = $socialBadges.find('.close');
    
    $closeElement.click( function(e) {
      e.preventDefault();
      $socialBadges.dialog('close');
    });
    
    $('.showSocialOverlay').click( function(e) {
      e.preventDefault();
      
      $socialBadges.dialog({
        'closeText' : 'Sulje',
        'modal' : true,
        'width' : 510,
        'height': 'auto',
        'resizable' : false,
        'draggable' : false
      });
      
    });
    
  },
  
  alignElements: function() {
  
    var $logo = $('.folk-logo');
    var $complementaryNav = $('#complementary-navigation');
    var $newsAside = $('#introduction aside');
    var $pageWrapper = $('.page-wrapper');
    
    // Reset elements at the beginning
    // Fix Folk logo positioning
    $logo
      .css('top', $pageWrapper.offset().top + 15 )
      .css('left', $pageWrapper.offset().left + 15 );
    
    // Fix the news related content
    if( $newsAside.length > 0 ) {
      $newsAside.css('right', $(window).width() - ($pageWrapper.offset().left + $pageWrapper.width()) + 50 );
    }
    
    // Fix the navigation positioning
    var complementaryNavOffsetRight = $(window).width() - ($pageWrapper.offset().left + $pageWrapper.width()) + 20;
    
    $complementaryNav
      .css('top', $pageWrapper.offset().top + 100 )
      .css('right', complementaryNavOffsetRight );
    
    $(window).resize( function(e) {
      // Fix Folk logo positioning
      $logo
        .css('top', $pageWrapper.offset().top + 15 )
        .css('left', $pageWrapper.offset().left + 15 );
      
      // Offset base
      var offsetBase = $(window).width() - ($pageWrapper.offset().left + $pageWrapper.width());
      
      // Fix the navigation positioning
      $complementaryNav
        .css('top', $pageWrapper.offset().top + 100 )
        .css('right', offsetBase + 20 );
      
      // Fix the news related content
      if( $newsAside.length > 0 ) {
        $newsAside.css('right', offsetBase + 50 );
      }
      
    });
    
  },
  
  projectsWindow: function() {
  
    var _self = this;
    var $caseWindow = $('#projects .projects-window');
    
    $('.project a').click( function(e) {
      e.preventDefault();
      
      $('#single-case-details-placeholder').html( $(this).parent().find('.project-details').html() );
      $caseWindow.fadeIn();
      _self.caseContentSlider();
    });
    
    $caseWindow.find('.close').click( function(e) {
      e.preventDefault();
      $caseWindow.fadeOut('normal', function() {
        $('#single-case-details-placeholder').html('');
      });
    });
    
  },
  
  caseContentSlider: function() {
    
    var _self = this;
    
    var $caseWindow = $('#projects .projects-window');
    var $projectSlider = $caseWindow.find('.single-case .slides-wrapper');
    var $projectSlides = $projectSlider.find('.slide');
    var $projectSlidesArrowNav = $caseWindow.find('.arrow-nav');
    var $thumbnailsNav = $caseWindow.find('.thumbnails-nav');
    
    var slidesCount = $projectSlides.length;
    var slideWidth = $projectSlides.width();
    
    var currentSlide = 0;
    
    if( $projectSlides.length > 1 ) {
      $projectSlidesArrowNav.find('.next').css('visibility','visible');
    }
    
    $thumbnailsNav.find('a').click( function(e) {
      e.preventDefault();
      
      currentSlide = ( $(this).attr('href').split('-')[1] ) - 1;
      
      // Check arrow visibility
      _self.determineCaseArrowVisibility( currentSlide, slidesCount, $projectSlidesArrowNav );
      
      // Animate the slider
      $projectSlider.animate({ 'left' : (slideWidth * currentSlide) * -1 });
            
      // Highlight current thumbnail nav element
      $thumbnailsNav.find('a').removeClass('selected');
      $(this).addClass('selected');
      
    });
    
    $projectSlidesArrowNav.find('a').click( function(e) {
      e.preventDefault();
      
      // Handle "previous" arrow
      if( $(this).hasClass('prev') ) {
        if( currentSlide <= 0 ) { return false; }
        currentSlide--;
      }
      
      // Handle "next" arrow
      if( $(this).hasClass('next') ) {
        if( currentSlide + 1 >= slidesCount ) { return false; }
        currentSlide++;
      }
      
      // Check arrow visibility
      _self.determineCaseArrowVisibility( currentSlide, slidesCount, $projectSlidesArrowNav );
            
      // Animate the slider
      $projectSlider.animate({ 'left' : (slideWidth * currentSlide) * -1 });
      
      // Highlight current thumbnail nav element
      $thumbnailsNav.find('a').removeClass('selected');
      $thumbnailsNav.find('a[href="#' + $($projectSlides[currentSlide]).data('attachment_id') + '"]').addClass('selected');
    });
    
  },
  
  caseListSlider: function() {
  
    var _self = this;
    var slidesCount = $('.projects-slide').length;
    var $projectsSlideWrapper = $('.projects-list-slides');
    var $caseListNav = $('.case-list-nav');
    var currentSlide = 0;
    
    if( slidesCount > 1 ) {
      $caseListNav.find('.next').css('visibility','visible');
    }
  
    $caseListNav.find('a').click( function(e) {
      e.preventDefault();
      
      var slideWidth = $('.projects-slide').width();
      
      // Handle "previous" arrow
      if( $(this).hasClass('prev') ) {
        if( currentSlide <= 0 ) { return false; }
        currentSlide--;
      }
      
      // Handle "next" arrow
      if( $(this).hasClass('next') ) {
        if( currentSlide + 1 >= slidesCount ) { return false; }
        currentSlide++;
      }
      
      // Check arrow visibility
      _self.determineCaseArrowVisibility( currentSlide, slidesCount, $caseListNav );
            
      // Animate the slider
      $projectsSlideWrapper.animate({ 'left' : (slideWidth * currentSlide) * -1 });
    
    });

  },
  
  determineCaseArrowVisibility: function( currentSlide, slidesCount, $sliderNav) {
    // Check if "next" arrow should be visible
    if( currentSlide + 1 >= slidesCount ) {
      $sliderNav.find('.next').css('opacity','0.2');
    } else {
      $sliderNav.find('.next').css('opacity','1');
    }
    
    // Check if "prev" arrow should be visible
    if( currentSlide <= 0 ) {
      $sliderNav.find('.prev').css('opacity','0.2');
    } else {
      $sliderNav.find('.prev').css('opacity','1');
    }
  },
  
  funkyAnimations: function() {
  
    // Setup
    var magicOffsetTreshold = 900;
    var _self = this;
    
    // Postman photograph
    var $postman      = $('#looking-good');
    var $postmanTxt   = $postman.find('h2');
    var $innerPostmanLayer = $postman.find('.inner-layer');
    
    // Two men photograph
    var $twoMen       = $('#prospering');
    var $twoMenTxt    = $twoMen.find('h2');
    
    // Women photograph - Stand out
    var $women      = $('#stand-out');
    var $womenTxt   = $women.find('h2');
    var $innerWomenLayer = $women.find('.inner-layer');
    
    // Women photograph - remember
    var $womenRemember = $('#remember');
    var $womenRememberTxt = $womenRemember.find('h2');
    
    
    var lastScrollTop = 0;
    
    $(window).scroll(function(e) {
    
      // Current scroll position
      var currScroll = $(this).scrollTop();
      
      // Postman slider
      if( currScroll + magicOffsetTreshold >= $postman.offset().top ) {
       
        var postmanOffsetTop = $postman.offset().top;
        
        _self.animatePhoto( currScroll, postmanOffsetTop, $innerPostmanLayer, '25%', 200, 50);
        _self.animateText( currScroll, lastScrollTop, $postmanTxt, $postman.offset().top );
                
      }
      
      // Two men sitting
      if( currScroll + magicOffsetTreshold >= $twoMen.offset().top) {
        _self.animateText( currScroll, lastScrollTop, $twoMenTxt, $twoMen.offset().top );
      }
      
      // Women slide - bottom of the page
      if( currScroll + magicOffsetTreshold >= $women.offset().top ) {
      
        var womenOffsetTop = $women.offset().top;
        
        _self.animatePhoto( currScroll, womenOffsetTop, $innerWomenLayer, '50%', 300, 50);
        _self.animateText( currScroll, lastScrollTop, $womenTxt, womenOffsetTop);
        
      }
      
      // Women in store 
      if( currScroll + magicOffsetTreshold >= $womenRemember.offset().top) {
        _self.animateText( currScroll, lastScrollTop, $womenRememberTxt, $womenRemember.offset().top );
      }
      
      lastScrollTop = currScroll;
      
    });
    
  },
  
  animatePhoto: function( currScroll, $offsetTop, $photoLayer, bgPosX, borderTop, borderBottom ) {
    var photoLayerPos = $offsetTop - currScroll;
    
    if( photoLayerPos < borderTop  && photoLayerPos > borderBottom ) {
      $photoLayer.css('backgroundPosition', bgPosX + '' + parseInt((photoLayerPos / 2) + 100) + 'px');
    }
  },
  
  animateText: function( currScroll, lastScrollTop, $textElem, $offsetTop ) {
  
    // Top entry point
    if( currScroll > ($offsetTop - 500) && currScroll < ($offsetTop - 300) ) {
      if( currScroll > lastScrollTop ) {
        if( $textElem.css('display') == 'none' ) { $textElem.fadeIn(); }
      } else {
        if( $textElem.css('display') == 'block' ) { $textElem.fadeOut(); }
      }
    }
    
    // Bottom entry point
    if( currScroll > $offsetTop && currScroll < ($offsetTop + 200) ) {
      if( currScroll > lastScrollTop ) { 
        if( $textElem.css('display') == 'block' ) { $textElem.fadeOut(); }
      } else {
        if( $textElem.css('display') == 'none' ) { $textElem.fadeIn(); }
      }
    }    
  },
  
  teamSlider: function() {
    
    var _self = this;
    
    var $theTeam = $('#the-team');
    var $slidesWrapper = $theTeam.find('.slides-wrapper');
    var $personListWide = $theTeam.find('.person-list ul');
    var $personListNarrow = $theTeam.find('.person-list select');
    var $sliderNav = $theTeam.find('.slider-nav');
    
    var currentSlide = $personListWide.find('.selected').attr('href');
    
    // Bind the names on the list (<ul>)
    $personListWide.find('a').click( function(e) {
      e.preventDefault();
      
      // Setup the classes
      $theTeam.find('.person-list ul a').removeClass('selected');
      $(this).addClass('selected');
      
      // Set current slide
      currentSlide = $(this).attr('href');
      
      // Check if we need to hide any nav arrow
      _self.determineTeamArrowVisibility( currentSlide, $sliderNav );
      
      // Update the dropdown for narrower screen
      $personListNarrow.find('option[value="'+ currentSlide +'"]').attr('selected','selected');
      
      // ... and animate
      $slidesWrapper.animate({ 'left' : $slidesWrapper.find( currentSlide ).position().left * -1 });
    });
    
    
    // <select> element
    $personListNarrow.change( function(e) {
      e.preventDefault();
      
      // Set current slide
      currentSlide = $(this).val();
      
      // Highlight the new person
      $personListWide.find('a').removeClass('selected');
      $personListWide.find('a[href="'+ currentSlide +'"]').addClass('selected');
      
      // Check if we need to hide any nav arrow
      _self.determineTeamArrowVisibility( currentSlide, $sliderNav );
      
      // ... and animate      
      $slidesWrapper.animate({ 'left' : $slidesWrapper.find( currentSlide ).position().left * -1 });
    });
    
    
    // Arrow navigation
    $sliderNav.find('a').click( function(e) {
      e.preventDefault();
      
      var $newItem = false;
      
      // Handle "previous" arrow
      if( $(this).hasClass('prev') ) {
        if( $(currentSlide).prev().length == 0 ) { return false; }
        $newItem = $(currentSlide).prev();
      }
      
      // Handle "next" arrow
      if( $(this).hasClass('next') ) {
        if( $(currentSlide).next().length == 0 ) { return false; }
        $newItem = $(currentSlide).next();
      }
      
      // Set new "current item"
      currentSlide = '#' + $newItem.attr('id');
      
      // Highlight the new person
      $personListWide.find('a').removeClass('selected');
      $personListWide.find('a[href="'+ currentSlide +'"]').addClass('selected');
      
      // Update the dropdown for narrower screen
      $personListNarrow.find('option[value="'+ currentSlide +'"]').attr('selected','selected');
      
      // Check if we need to hide any nav arrow
      _self.determineTeamArrowVisibility( currentSlide, $sliderNav );
      
      // ... and animate
      $slidesWrapper.animate({ 'left' : $slidesWrapper.find( currentSlide ).position().left * -1 });
    });
    
  },

  determineTeamArrowVisibility: function( currentSlide, $sliderNav ) {
    
    if( $(currentSlide).next().length <= 0 ) {
      $sliderNav.find('.next').css('opacity','0.2');
    } else {
      $sliderNav.find('.next').css('opacity','1');
    }
    
    
    if( $(currentSlide).prev().length <= 0 ) {
      $sliderNav.find('.prev').css('opacity','0.2');
    } else {
      $sliderNav.find('.prev').css('opacity','1');
    }
  
  }
    
}     
  
$(document).ready(function() {
  Folk.init();
});