$(window).ready(function(){
	var w = 1146
	var h = 763
	var ratio = w / h

	var pictoFilet = [
		{
			id: "confluence",
			picto: [
				{
					id: "partager",
					left: -17,
					bottom: 190,
					filet: 1,
					filetHeight: 379,
					start: .4
				},
				{
					id: "coconstruire",
					left: 238,
					bottom: 447,
					filet: 2,
					filetHeight: 55,
					start: .2
				},
				{
					id: "preserver",
					left: 525,
					bottom: 206,
					filet: 3,
					filetHeight: 326,
					start: .5
				},
				{
					id: "proposer",
					left: 743,
					bottom: 384,
					filet: 4,
					filetHeight: 76,
					start: 1
				},
				{
					id: "dialoguer",
					left: 977,
					bottom: 159,
					filet: 5,
					filetHeight: 336,
					start: .7
				}
			]

		},
		{
			id: "pont",
			picto: [
				{
					id: "coconstruire",
					left: 50,
					bottom: 500,
					filet: 1,
					filetHeight: 63,
					start: 1
				},
				{
					id: "echanger",
					left: 290,
					bottom: 480,
					filet: 2,
					filetHeight: 57,
					start: .2
				},
				{
					id: "dialoguer",
					left: 539,
					bottom: 350,
					filet: 3,
					filetHeight: 116,
					start: .5
				},
				{
					id: "partager",
					left: 869,
					bottom: 262,
					filet: 4,
					filetHeight: 276,
					start: .4
				}
//				{
//					id : "proposer",
//					left : 951,
//					bottom : 295,
//					filet : 5,
//					start :.7
//				},
			]

		},
		{
			id: "fleuve",
			picto: [
				{
					id: "preserver",
					left: 12,
					bottom: 322,
					filet: 1,
					filetHeight: 244,
					start: .4
				},
				{
					id: "echanger",
					left: 181,
					bottom: 240,
					filet: 3,
					filetHeight: 85,
					start: .5
				},
				{
					id: "informer",
					left: 484,
					bottom: 144,
					filet: 2,
					filetHeight: 394,
					start: 1
				},
				{
					id: "coconstruire",
					left: 742,
					bottom: 348,
					filet: 4,
					filetHeight: 34,
					start: .2
				},
				{
					id: "sengager",
					left: 878,
					bottom: 211,
					filet: 5,
					filetHeight: 289,
					start: .7
				}
			]

		},
		{
			id: "passerelle",
			picto: [
				{
					id: "informer",
					left: 75,
					bottom: 20,
					filet: 1,
					filetHeight : 555,
					start: .4
				},
				{
					id: "concerter",
					left: 340,
					bottom: 569,
					filet: 2,
					filetHeight : 51,
					start: .2
				},
				{
					id: "defendre",
					left: 695,
					bottom: 299,
					filet: 3,
					filetHeight : 271,
					start: .5
				},
				{
					id: "sengager",
					left: 917,
					bottom: 405,
					filet: 4,
					filetHeight : 212,
					start: 1
				}
			]

		},
		{
			id: "fourviere",
			picto: [
				{
					id: "sengager",
					left: 0,
					bottom: 224,
					filet: 1,
					filetHeight : 391,
					start: .4
				},
				{
					id: "partager",
					left: 279,
					bottom: 429,
					filet: 2,
					filetHeight : 149,
					start: .2
				},
				{
					id: "preserver",
					left: 540,
					bottom: 167,
					filet: 3,
					filetHeight : 334,
					start: .5
				},
				{
					id: "defendre",
					left: 825,
					bottom: 381,
					filet: 4,
					filetHeight : 85,
					start: 1
				},
				{
					id: "echanger",
					left: 960,
					bottom: 174,
					filet: 5,
					filetHeight : 361,
					start: .7
				}
			]

		}
	];
//	resize()
	window.pictoFilet = pictoFilet
	var tmdessin = new TimelineMax();
	tmdessin.add(TweenMax.from($('#dessin-main'),.2,{opacity:0}),.5)
	tmdessin.add(TweenMax.from($('#dessin-main'),1,{left:-100}),.5)
	tmdessin.add(TweenMax.from($('#dessin-main'),1,{y:'+=10'/*,ease : RoughEase.ease.config({ template: Power0.easeNone, strength: 8, points: 10, taper: "none", randomize: true, clamp: false})*/}),.5)
	function dessinTw(){
		var width = $('#home-carousel').height() / 100 * 251.6382
		$('#dessin-dessin-container').css(
			{
				opacity : 1
			}
		)
		TweenMax.fromTo($('#home-carousel #dessin-dessin-container'),1.7,{width:0},{width:width})
	}
	tmdessin.add(dessinTw,.5)
	tmdessin.add(TweenMax.staggerFrom(["#dessin-text-1","#dessin-text-2","#dessin-text-3"],.5,{ease:Back.easeOut.config(1.7),top:"+=150",opacity:0},.1),"-=.7")
	tmdessin.pause()
	var animations = [
		tmdessin
	]
	window.animations = animations;

	var $carousel = $('#home-carousel')
	var $parent = $carousel.parent()

	$carousel.remove();
	console.log($carousel.parent())
	for(var i in pictoFilet){
		var o = pictoFilet[i]
		var $item = $('<div></div>')
		$item.addClass('item')
			.attr('id', o.id)
//			.css('backgroundImage','url("/img/'+ o.id+'.jpg")')
		$item_inner = $('<div></div>')
		$item_inner.addClass('item-inner')
		$item_inner.append('<img class="carousel-img-bg" src="/img/'+ o.id +'.jpg"/>')
		$item.append($item_inner)
		var $container = $('<div></div>')
		$container.addClass('filet-picto-container')

		// timeline
		var tm = new TimelineMax()

		for(var j in o.picto){
			var p = o.picto[j]
			var $picto = $('<div></div>')
			$picto.addClass('filet-picto')
				.css({
					left : String((p.left * 100) / w) + "%",
					bottom : String((p.bottom * 100) / h) + "%",
				})
			var html =   '<div class="picto" >'
				+'  <img src="img/picto-'+ p.id+'.png" >'
				+'</div>'
				+'<div class="filet" style="height:' + p.filetHeight + 'px" data-height="' + p.filetHeight + '">'
				+'  <img src="img/'+ o.id+'-filet-'+ p.filet+'.png"/>'
				+'</div>'
			$picto.append(html)
			$container.append($picto)
			var height = $('.filet',$picto).height()
		}

		$item.append($container)
		$carousel.append($item)
	}

	function initTweenPicto(){
//		console.log('initTweenPicto ----------')
		for(var i in pictoFilet){
			var o = pictoFilet[i]
			var itemId = Number(i)+1
			var $item = $($(".item")[itemId])

			// timeline
			var tm = new TimelineMax()

			for(var j in o.picto){
				var p = o.picto[j]
				var $picto = $(".filet-picto",$item)[j]

				var height = $('.filet img',$picto).height()
//				console.log('height = ',height)

				tm.add(TweenMax.from($('.filet',$picto), .5,
					{
						height : 0
					}
				), p.start)

				tm.add(TweenMax.from($('.picto',$picto),.5,
					{
						marginBottom : "+=100px",
						opacity : 0
					}
				), p.start + .3)
			}

			tm.pause()
			animations.push(tm)
		}
	}


	function resize(){
//		console.log("resize -------------")
		var w = $(window).width()

		var h2 = (w / ratio <= h)? w / ratio : h;
//		console.log("h2 = ",h2)

		$('#home-carousel').css('height',h2)

		var r = h2 / h
//		console.log("$('#dessin-container').width() = ",$('#dessin-container ').innerWidth())
//		console.log("$('#dessin-dessin').width() = ",$('#dessin-dessin ').innerWidth())
//		console.log("r = ",r * 1919)
		var width = $('#home-carousel').height() * 2.516382
//		console.log("width : ",width)
		var mainWidth = $('#home-carousel').height() * 0.51114024
		$('#home-carousel #dessin-dessin-container').css(
			{
				width : width,
				left :  "calc(50% - "+(width/2)+"px)"
			}
		)
		$('#home-carousel #dessin-dessin').css(
			{
				width : width
			}
		)
		$('#home-carousel #dessin-main').css(
			{
				width : mainWidth,
				left : "67.96%"
			}
		)
		var left = ($('.carousel-img-bg').parent().width() - $('.carousel-img-bg').width()) / 2;
//		console.log("left : ",left)
		$('#home-carousel .carousel-img-bg').css('left',left)
		$('.filet').each(function(id,item){
			var item = $(item)
//			console.log('item.data("height") = ',item.data('height'))
//			console.log('calc height = ',$('#home-carousel').height() * (item.data('height') / 763))
			item.css("height",$('#home-carousel').height() * (item.data('height') / 763))
		})
	}


	function playCurrent(index){
		if(index != null){
			animations[index].seek(0).play()
		}
	}

	var inter;
	var id = 0;
	var count;
	var autoPlayInit = false;
	function initAutoPlay(event){
//		console.log('initAutoPlay -----------------')
//		console.log($(event.target))
		count = event.item.count
//		console.log("count = ",count)
		autoPlayInit = true
		setInter()
	}
	function setInter(){
		inter = setInterval(next,5000)
	}


	function next(idParam){
//		console.log('next------------------')
//		console.log('count = ',count)
//		console.log('id = ',id)
//		console.log('idParam = ',idParam)

		if(idParam != undefined){
			$('#home-carousel').data('owl.carousel').to(idParam)
		}else{
			if(count > id + 1){
//				console.log("next()")
				$('#home-carousel').data('owl.carousel').next()
			}else{
//				console.log("to(0)")
				$('#home-carousel').data('owl.carousel').to(0)
			}
		}
	}
	function changed(e){
//		console.log("changed--------------")
//		console.log("e = ",e)
//		console.log("id = ",id)
//		console.log("count = ",count)
		if(autoPlayInit){
			id = e.item.index;
			clearInterval(inter)
			setInter()
		}
	}

    var ucil_custom_owl;

	$carousel.imagesLoaded(function(){
//		return
		$parent.append($carousel)
		ucil_custom_owl = $("#home-carousel");
		ucil_custom_owl.on('initialized.owl.carousel', function(e){
			resize();
			playCurrent(e.item.index);
			initTweenPicto()
			initAutoPlay(e)
		});
		ucil_custom_owl.on('updated.owl.carousel', resize);
		ucil_custom_owl.on('resized.owl.carousel', resize);
		ucil_custom_owl.on('changed.owl.carousel', function(e){
			changed(e);
			playCurrent(e.item.index);
		});
		ucil_custom_owl.owlCarousel({
			transitionStyle : 'fade',
			callbacks: true,
			items : 1,
			singleItem : true,
			navigation : true,
			responsiveRefreshRate : 200,
			mouseDrag : false,
			touchDrag : false,
			autoplay : false,
			stopOnHover : true,
			dots: true,
			nav: true,
			animateOut: 'fadeOut'
		});

	})
})