$(function() {

/*-----------------------------------------------------------------------------------*/
/* indicate which section you're in 
/*-----------------------------------------------------------------------------------*/
    
  $(window).scroll(function(){

    function checkSectionBoundaries(container,selectedClass) {
      if  ( $(window).scrollTop() >= ($(container).offset().top - 110) &&  
          $(window).scrollTop() <= ($(container).offset().top + $(container).height()) )
      {
        //console.log('company - top')
        $(selectedClass).css('background-position-x','right');
      } else {
        $(selectedClass).css('background-position-x','left');
      }
    }
  
    checkSectionBoundaries('#accueil','.accueil-tag');
    checkSectionBoundaries('#graphisme','.graphisme-tag');
    checkSectionBoundaries('#web','.web-tag');
    checkSectionBoundaries('#print','.print-tag');
    checkSectionBoundaries('#galerie','.galerie-tag');
   
  });
  
  
/*-----------------------------------------------------------------------------------*/
/*  scroll to section  
/*-----------------------------------------------------------------------------------*/


  $('header nav').delegate('a','click',function(event){
  
  	var $anchor = $(this);
  	var parentTag = $anchor.parent().get(0).tagName;
  	
  	$('header nav a').removeClass('active');
  	
  	if (parentTag != "H1"){
  	 $anchor.addClass('active');
  	}
  	
  	$('html, body').stop().animate({
  		scrollTop: $($anchor.attr('href')).offset().top - 78
  	}, 1200,'easeInOutQuad');
  	
  	event.preventDefault();
  });


/*-----------------------------------------------------------------------------------*/
/*  dropcap
/*-----------------------------------------------------------------------------------*/

  var dropcap = $('#company div p strong')[0];
  var text = dropcap.firstChild.nodeValue;
  var dropcap_letter = text.substr(0,1);
  dropcap.firstChild.nodeValue = text.slice(1);
  $('<span>'+ dropcap_letter +'</span>').prependTo( dropcap );
  
  
/*-----------------------------------------------------------------------------------*/
/*  style brackets around work message
/*-----------------------------------------------------------------------------------*/

  $('#services .desc').prepend('<span class="l-bracket">{</span>').append('<span class="r-bracket">}</span>');
  

/*-----------------------------------------------------------------------------------*/
/*  control padding on work li tags
/*-----------------------------------------------------------------------------------*/

  $('#work-samples ul li:even,#social .col-2 dd:even').css('float','right');
  $('#social p a:last-child').css('margin-right','0');
  
  
/*-----------------------------------------------------------------------------------*/
/*  pull in twitter feed  
/*-----------------------------------------------------------------------------------*/

  getTwitters('tweets', { 
    id: 'kitchensinkinc', 
    count: 3, 
    enableLinks: true, 
    ignoreReplies: true, 
    clearContents: true,
    newwindow: true,
    template: '%text% - <a href="http://twitter.com/%user_screen_name%/statuses/%id_str%/">%time%</a>'
  });


/*-----------------------------------------------------------------------------------*/
/*  pull in flickr feed  
/*-----------------------------------------------------------------------------------*/

  $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=65879391@N04&format=json&jsoncallback=?", function(data){
    $.each(data.items, function(i,item){
      if (i < 5 ) {
        $("<img/>").attr({
          "src": item.media.m,
          "width" : 80,
          "height" : 60
          })
          .appendTo("#flickr-feed dd")
          .wrap("<a href='" + item.link + "'></a>");
      }
      
    });
  });
  
  
  $('.join-us').wrapInner('<div />');  
  $('#work-sample-container').prepend('<div id="image-loader" />');


/*-----------------------------------------------------------------------------------*/
/*  work section
/*-----------------------------------------------------------------------------------*/
  
  var $width = $('#image-samples ul').outerWidth();
  var widthPos = $width/2;
  var animType = 'easeInOutQuint';
  var animSpeed = 1500;
  var animDelay = 230;
  var $selectedImage;
  var first;
  var second;
  var third;
  var fourth;
  
  //hide inner project nav buttons
  $('#prev-inner,#next-inner').hide();
  
  // hide detail nav to start
  $('#project-detail-nav').css('opacity','0.0');
    
  $("#image-samples").cycle({
  	fx: 'scrollHorz',
  	timeout: 0,
  	nowrap: 1,
  	prev: '#prev',
  	next: '#next',
  	easing: 'easeInOutQuint',
  	pager: '#project-overview-nav nav'
  }); 

  function openSamples(e) {
  
    e.preventDefault();
    
    $('#prev,#next').hide();
    $('#prev-inner,#next-inner').show();
    
    //animate and fade out project nav
    //$('#project-overview-nav').delay(800).animate({ opacity: 0, top:'+=30'},{duration: 1000,easing: 'easeOutExpo'});
    toggleProjectNav($('#project-overview-nav'),800,0,'+=30',1000);
    
    $selectedImage = $(this);
    
    first  = '#' + $selectedImage.parents('ul:first').attr('id') + " .first";
    second = '#' + $selectedImage.parents('ul:first').attr('id') + " .second";
    third  = '#' + $selectedImage.parents('ul:first').attr('id') + " .third";
    fourth = '#' + $selectedImage.parents('ul:first').attr('id') + " .fourth";
    
    $(first).animate({left: '-'+ widthPos +'px'},{duration: animSpeed, easing: animType });
    $(second).animate({right: -widthPos},{duration: animSpeed, easing: animType });
    $(third).delay(animDelay).animate({left: '-'+ widthPos +'px'},{duration: animSpeed, easing: animType, complete: loadContent });
    $(fourth).delay(animDelay).animate({right: -widthPos},{duration: animSpeed, easing: animType  });
    
  }; 

  function loadContent() {
    
    //have to hide element for IE - BOOOOOOO!!!
    $selectedImage.parents('ul:first').hide();
    
    // get the href value to pull the correct project
    var list = $selectedImage.attr('href').replace(/#/g, '');
    
    // hide the loader, when contents loads, fade in loader
    $('#image-loader').hide().load('work.php #' + list, function () {

      $('#work-sample-container').removeClass('loading');

      // Set Project Heading
      var projectTitle = $selectedImage.next().text();
      $('#project-detail-nav h3').text(projectTitle);
      
      // Set Project Description
      var projectDesc = $("#image-loader div").attr('title');
      $('#project-detail-nav p').text(projectDesc);


      $("#image-loader div.project-box").cycle({
      	fx: 'fade',
      	timeout: 0,
      	prev: '#prev-inner',
      	next: '#next-inner',
      	pager: '#project-detail-nav nav',
      	before: function () {
      	  $('#image-loader').fadeIn(1000);  
      	}
      });  
      
      //$('#project-detail-nav').animate({ opacity: 1, top:'-=30' },{duration: 500,easing: 'easeOutExpo'});
      toggleProjectNav($('#project-detail-nav'),0,1,'-=30',500);
      
      if (navigator.appName == 'Microsoft Internet Explorer') {
        var ua = navigator.userAgent;
        var re = new RegExp("MSIE ([0-8]{1,}[\.0-8]{0,})");
        if (re.exec(ua) != null)
            rv = parseFloat(RegExp.$1);
      }else {
        $('#prev-inner, #next-inner, #project-detail-nav .close').click(function () {
          if($("video").length > 0) {
            $("video").get(0).pause();
          };
        });
      }
      
      console.log($("video").length)

  
    });
    
  };
  
  function toggleProjectNav($object,delay,opacity,pos,dur) {
    $object.delay(delay).animate({ opacity: opacity, top:pos },{duration: dur,easing: 'easeOutExpo'});
  }
  
  function removeProject(e) {
  
    e.preventDefault();
    
    toggleProjectNav($('#project-detail-nav'),0,0,'+=30',500);
    
    $('#image-loader div').fadeOut('slow',closeSamples);
    
  };
  
  function closeSamples () {
    
    // show again for IE - BOOOOOOO!!!!
    $selectedImage.parents('ul:first').show();
    
    // clear project detail nav
    $('#project-detail-nav nav a').remove();
    
    //toggle nav button visibilty
    $('#prev,#next').show();
    $('#prev-inner,#next-inner').hide();
  
    toggleProjectNav($('#project-overview-nav'),1000,1,'-=30',1000);
  
  
    $(first).animate({left: '0'}, {duration: animSpeed, easing: animType });
    $(second).animate({right: '+=' + widthPos}, {duration: animSpeed, easing: animType });
    $(third).delay(animDelay).animate({left: '0'}, {duration: animSpeed, easing: animType, complete: unloadImages });
    $(fourth).delay(animDelay).animate({right: '+=' + widthPos}, {duration: animSpeed, easing: animType});
    
  };

  function unloadImages() {
  
    $('#image-loader div').remove();
    $('#work-sample-container').addClass('loading');
    
  }

  $('#image-samples ul li a').click(openSamples);
  
  $('.close').click(removeProject);
  
  
  //display video for work sections
  VideoJS.setupAllWhenReady();  

});