Cacher is the code snippet organizer for pro developers

	$(document).ready(function() {
    $('#hero').html('<iframe name="videoFrame" width="560" height="315" src="http://www.youtube.com/embed?listType=playlist&list=PLHx5HChsMcasTeHm7oaCt0HCB8ci4I4NS&controls=0&showinfo=0" theme="" modestbranding="1" rel="0" frameborder="0"allowfullscreen=""></iframe>');

  	$('.tabs nav ul li a:first').on('click', function(e){
      e.preventDefault();

	  $('.tabs nav ul li').removeClass('tab-current');
		$(this).parent('li').addClass('tab-current');

      $('#hero').html('<iframe name="videoFrame" width="560" height="315" src="http://www.youtube.com/embed?listType=playlist&list=PLHx5HChsMcasTeHm7oaCt0HCB8ci4I4NS&controls=0&showinfo=0&modestbranding=1&theme=" rel="0" frameborder="0"  allowfullscreen=""></iframe>');
      $('#videos').hide();
	  $('#hero').css('margin-bottom', '100px');
    })

	$('.tabs nav ul li a:not(:first)').on('click', function(e){
		e.preventDefault();
		$('.tabs nav ul li').removeClass('tab-current');
		$(this).parent('li').addClass('tab-current');


      var htmlString  = '<div class="bxslider">';
      var htmlEmbed = '';
      var channelname = $(this).attr('href').substring(1);

      var ytapiurl ='https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&playlistId='+channelname+'&key=(keyhere)&maxResults=20';

      var requestAjax = $.ajax ({
        url: ytapiurl,
        type: 'GET'
        });

      requestAjax.done(getYouTubeData);
      requestAjax.fail(showErrors);

      function getYouTubeData(data){
        console.log(data);
        var arr = data.items;
        console.log(arr);
        console.log(arr.length);
        var firstVid = arr[0].contentDetails.videoId;
        htmlEmbed += '<iframe name="videoFrame" width="560" height="315" src="//www.youtube.com/embed/'+firstVid+'?controls=0&showinfo=0" rel="0" frameborder="0" allowfullscreen=""></iframe>';
        $('#hero').html(htmlEmbed);
        for(var i = 0; i < arr.length; i++){
          var snipid = arr[i].contentDetails.videoId;
          var xtapiurl = 'https://www.googleapis.com/youtube/v3/videos?part=snippet&id='+snipid+'&key=(Key Here)';
          var requestAjax2 = $.ajax ({
            url: xtapiurl,
            type: 'GET'
          });
          requestAjax2.done(getVideoData);
          requestAjax2.fail(showErrors);

          function getVideoData(vid){
            var vidEmbed = vid.items[0].id;
            console.log(vidEmbed);
            var vidTitle = vid.items[0].snippet.title;
            // var vidThumb = vid.items[0].snippet.thumbnails.standard.url;
            var vidThumb2 = 'http://img.youtube.com/vi/'+vidEmbed+'/0.jpg';
            console.log(vidThumb2);
            var vidSrcUrl = '//www.youtube.com/embed/'+vidEmbed+'';
            console.log(vidSrcUrl);
            htmlString += '<div><a href="' +vidSrcUrl+ '" target="videoFrame"><img src= "' +vidThumb2+ '">'
            htmlString += '<h2>' +vidTitle+ '</h2></div>';

            $('#videos').html(htmlString + '</div><div class="vidloader"></div>');
          };

        };
      };

      function showErrors(jqXHR, textStatus, errorThrown){
      alert('what the..? check for errors!')
      };

      setTimeout(function(){
        $('#videos').show();
        createSlider();
      }, 1000);

  });

function createSlider(){

	$('.vidloader').fadeOut();
  $('.bxslider').slick({
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 1,
    responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1
      }
    }
  ]
  });
};


});