///// FONT /////

var GFontApiKey = 'AIzaSyBRUDgk2xFItCoqwgNK33D1i-IKqDjGXag',
		GFontUrl = 'https://www.googleapis.com/webfonts/v1/webfonts?key=',
		GFontEndPoint = GFontUrl + GFontApiKey;

$.getJSON( GFontEndPoint, function( data ) {
  var items = [];
  $.each( data.items, function( key, val ) {
    items.push( "<option value='" + val.family + "'>" + val.family + "</option>" );
  });
 
  $( "<select/>", { 
		"class": "font-selector",
    html: items.join( "" )
  }).appendTo( ".options" );
});

var fetchLoadFont = function(fontName){
	WebFont.load({
		google: {
			families: [fontName]
		}
	});
	
	$('.half').css('font-family', fontName);
};

$('.options').on('change', '.font-selector', function(){
	var thisValue = $(this).val();
	fetchLoadFont(thisValue);
});

///// FONT /////

CSSPlugin.defaultSkewType = "simple";

var navIsOpen = false,
		btnOpen = $('.btn-open'),
		btnClose = $('.btn-close'),
		optionsSlide = $('.options'),
		currentValue = {
			division: 20,
			speed: 10,
			word: 'Romain',
			easing: Power0.easeNone,
			delay: 10,
			animDirection: 'left-to-right'
		};

var openOptions = function(){
	optionsSlide.addClass('options--open');
	btnOpen.addClass('btn-open--hide');
	
	navIsOpen = true;
}

var closeOptions = function(){
	optionsSlide.removeClass('options--open');
	btnOpen.removeClass('btn-open--hide');
	
	navIsOpen = false;
}

var division = function(howMany, word){
	$('.half').empty();
	for(i = 0; i < howMany; i++){
		var div = '<div class="division"><p>' + word + '</p></div>';
		$(div).prependTo($('.half'))
	}
}

var init = function(division, timing, gsapEase, delay, ){
	
	var divisionWidth = window.innerWidth / division;
	
	$('.half--top').find('.division').each(function(e){
	
		console.log(e);

		var toLeft = new TimelineMax({paused: true, delay: e/delay, repeat: -1, repeatDelay: .5}),
				p = $(this).find('p');

				toLeft.to(p, timing, {x: divisionWidth, ease: gsapEase})

				toLeft.play();

	});

	$('.half--bottom .division').each(function(e){

		console.log(e);

		var toRight = new TimelineMax({paused: true, delay: e/delay, repeat: -1, repeatDelay: .5}),
				p = $(this).find('p');

				toRight.fromTo(p, timing,{x: divisionWidth}, {x: '-100%', ease: gsapEase})

				toRight.play();

	});
	
	$('#skewdivx, #skewdivy, #skewcontentx, #skewcontenty, #rotatecontentx, #rotatecontenty, #scalex, #scaley').trigger('change');

	
};

//division(currentValue.division, currentValue.word);
//init(currentValue.division, currentValue.speed, currentValue.easing, currentValue.delay);

btnOpen.on('click', function(){
	openOptions();
});

btnClose.on('click', function(){
	closeOptions();
});

////////////////////////////

$('#num-of-div').on('change', function(){
	var thisValue = $(this).val();
	
	currentValue.division = thisValue;
	
	division(currentValue.division, currentValue.word);
	init(currentValue.division, currentValue.speed, currentValue.easing, currentValue.delay);
})

$('#timing').on('change', function(){
	var thisValue = $(this).val();
	
	currentValue.speed = thisValue;
	
	division(currentValue.division, currentValue.word);
	init(currentValue.division, currentValue.speed, currentValue.easing, currentValue.delay);
})

$('#delay').on('change', function(){
	var thisValue = $(this).val();
	
	currentValue.delay = thisValue;
	
	division(currentValue.division, currentValue.word);
	init(currentValue.division, currentValue.speed, currentValue.easing, currentValue.delay);
})

$('.text-ok').on('click', function(){
	var textValue = $('#text').val();
	
	currentValue.word = textValue;
	
	division(currentValue.division, currentValue.word);
	init(currentValue.division, currentValue.speed, currentValue.easing, currentValue.delay);
	
});

////////////////////////////

$('#top-bg-color').on('input', function(){
	var thisValue = $(this).val();
	$('.half--top').css('background-color', thisValue)
});

$('#top-text-color').on('input', function(){
	var thisValue = $(this).val();
	$('.half--top').css('color', thisValue)
});

$('#top-stroke-color').on('input', function(){
	var thisValue = $(this).val();
	$('.half--top').css('-webkit-text-stroke-color', thisValue)
});

$('#top-stroke-width').on('input', function(){
	var thisValue = $(this).val();
	$('.half--top').css('-webkit-text-stroke-width', thisValue + 'px')
});

$('#bottom-bg-color').on('change', function(){
	var thisValue = $(this).val();
	$('.half--bottom').css('background-color', thisValue)
});

$('#bottom-text-color').on('change', function(){
	var thisValue = $(this).val();
	$('.half--bottom').css('color', thisValue)
});

$('#bottom-stroke-color').on('input', function(){
	var thisValue = $(this).val();
	$('.half--bottom').css('-webkit-text-stroke-color', thisValue)
});

$('#bottom-stroke-width').on('input', function(){
	var thisValue = $(this).val();
	$('.half--bottom').css('-webkit-text-stroke-width', thisValue + 'px')
});

$('#skewdivx').on('change', function(){
	var thisValue = $(this).val();
	TweenMax.to($('.half').find('.division'), 1, {skewX: thisValue});
});

$('#skewdivy').on('change', function(){
	var thisValue = $(this).val();
	TweenMax.to($('.half').find('.division'), 1, {skewY: thisValue});
});

$('#skewcontentx').on('change', function(){
	var thisValue = $(this).val();
	TweenMax.to($('.half').find('.division p'), 1, {skewX: thisValue});
});

$('#skewcontenty').on('change', function(){
	var thisValue = $(this).val();
	TweenMax.to($('.half').find('.division p'), 1, {skewY: thisValue});
});

$('#rotatecontentx').on('change', function(){
	var thisValue = $(this).val();
	TweenMax.to($('.half').find('.division p'), 1, {rotationX: thisValue});
});

$('#rotatecontenty').on('change', function(){
	var thisValue = $(this).val();
	TweenMax.to($('.half').find('.division p'), 1, {rotationY: thisValue});
});



$('#scalex').on('change', function(){
	var thisValue = $(this).val();
	TweenMax.to($('.half').find('.division p'), 1, {scaleX: thisValue});
});

$('#scaley').on('change', function(){
	var thisValue = $(this).val();
	TweenMax.to($('.half').find('.division p'), 1, {scaleY: thisValue});
});

var howMany = 2;

$('#show-top').on('change', function(){
	var topShow = $(this).is(":checked");
	
	if(topShow != true){
		$('.half--top').hide();
		
		howMany --
		
	} else {
		$('.half--top').show();
		
		howMany ++
		
	}
	
	if(howMany == 1){
		$('.half').css('font-size', '100vh')
	} else {
		$('.half').css('font-size', '')
	}

});


$('#show-bottom').on('change', function(){
	var topShow = $(this).is(":checked");
	
	if(topShow != true){
		$('.half--bottom').hide();
		
		howMany --
		} else {
		$('.half--bottom').show();
		
		howMany ++
	}
	
	if(howMany == 1){
		$('.half').css('font-size', '100vh')
	} else {
		$('.half').css('font-size', '50vh')
	}

});

$('#main-direction').on('change', function(){
	var thisValue = $(this).val();
	
	$('.wrapper').css('flex-direction', thisValue);
});

$('#half-direction').on('change', function(){
	var thisValue = $(this).val();
	
	$('.half').css('flex-direction', thisValue);
});

$('#on-top').on('change', function(){
	
	var onTop = $(this).is(":checked");
	
	if(onTop == true){
		$('.half').css({
			position : 'absolute',
			top : '0',
			left : '0'
		});
		
		} else {
			
		$('.half').css({
			position : '',
			top : '',
			left : ''
		});
		
	}
});

$('#blend-mode').on('change', function(){
	var thisValue = $(this).val();
	
	$('.half').css('mix-blend-mode', thisValue)
});