// JavaScript Document

var upto,
	fridayonly,
	biggest,
	brf,
	brefbg,
	big,
	red,
	friday,
	kettle,
	save20,
	r80,
	pampers,
	save90,
	r100,
	more;

var timeline;
var imageCount = 0;
var totalImages = 0;
var loaderSteps;
var loaderWidth = 1;

$(document).ready(init);

function init() {
	// Let's set some variables

	upto = $('.up-to');
	fridayonly = $('.friday-only');
	biggest = $('.biggest');
	brf = $('.brf');
	brefbg = $('.bref-bg');
	big = $('.big');
	red = $('.red');
	friday = $('.friday');
	kettle = $('.kettle');
	save20 = $('.save-20');
	r80 = $('.r80');
	pampers = $('.pampers');
	save90 = $('.save-90');
	r100 = $('.r100');
	more = $('.viewdeals');

	setupTimeline();
	preload();

}

function setupTimeline() {
	timeline = new TimelineLite();

	timeline.to(fridayonly, 0.8, {left: "180px", top: '70px', width: '60%', opacity: '1'});
	timeline.to(fridayonly, 0.3, {top: '-130px', left: '-140px', width:'130%', opacity: '0', ease: Power4.easeIn}, '+=0.6');

	timeline.to(biggest, 0.8, {left: '180px', top: '100px', width: '60%', opacity: '1'});
	timeline.to(biggest, 0.3, {top: -60, left: -140, width:'130%', opacity: '0', ease: Power4.easeIn}, '+=0.6');

	timeline.to(brf, 0.6, {top:0, opacity: '1', ease: Power4.easeIn}, "+=0.5");
	timeline.to(big, 0.5, {top:27, left: 161, width: 240, opacity: '1', ease: Back.easeOut.config(3)}, "-=0.2");
	timeline.to(red, 0.5, {top:136, left: 152, width: 266, opacity: '1', ease: Back.easeOut.config(3)}, "+=0.5");
	timeline.to(friday, 0.4, {top:250, left: 148, width: 270, opacity: '1', ease: Back.easeOut.config(3)}, "+=0.5");

	timeline.to(upto, 0.4, {top:400, left: 355, width: 248, opacity: '1', ease: Back.easeOut.config(3)}, "+=0.3");

	timeline.to(kettle, 0.6, {left: 13, opacity: '1', ease: Back.easeOut.config(3)}, "+=0.5");
	timeline.to(r80, 0.6, {left: 30, opacity: '1', ease: Back.easeOut.config(3)}, "-=0.1");
	timeline.to(save20, 0.6, {left: 130, opacity: '1', ease: Back.easeOut.config(3)}, "-=0.5");

	timeline.to(pampers, 0.6, {left: 650, opacity: '1', ease: Back.easeOut.config(3)}, "+=1");
	timeline.to(r100, 0.6, {left: 670, opacity: '1', ease: Back.easeOut.config(3)}, "-=0.1");
	timeline.to(save90, 0.6, {left: 790, opacity: '1', ease: Back.easeOut.config(3)}, "-=0.5");

	timeline.to(upto, 0.4, {top:420, left: 474, width: 10, opacity: '0', ease: Back.easeIn.config(3)}, "+=1");

	timeline.to(more, 0.4, {top:400, left: 335, width: 290, opacity: '1', ease: Back.easeOut.config(3)}, "-=0.1");

	timeline.stop();

}

function preload() {
	totalImages = $('.wrapper img').length;
	loaderSteps = 100/totalImages;
	$('.wrapper img').each(function(a,b) {
		var img = new Image();
		$(img).attr('src', $(b).attr('src'));
		if (img.complete || img.readyState === 4) {
			loadOne();
		} else {
			$(img).load(loadOne);
		}

	})
	//$('.wrapper img').load(loadOne);
}

function loadOne() {
	imageCount++;
	loaderWidth+=loaderSteps;
	$('.preloader').css('width', loaderWidth+"%");
	if (imageCount == totalImages) {
		$('.preloader').css('width', "100%");
		$('.preloader').fadeOut();
		animate();
	}
}

function animate() {
	timeline.play();
}