// Rather than having to pass data via a components heirarchy 
// (passing data from the parents to children) we initialise an empty 
// vue component that allows us access to the event system when needed.
var $eventBus = new Vue();

// Home Slider Component
Vue.component('home-slider', {
	template: '<div class="home-slider home-slider--container"><slot></slot></div>',
	data: function() {
		return {
			// The current slide to be shown...
			activeSlide: 0,
			interval: null,
		}
	},
	
	// Called after the instance has been mounted...
	mounted: function() {
		var $this = this;
		$this.nextSlide();
		$this.interval = setInterval(function() {
			$this.nextSlide();
		}, 4000);
		
		$eventBus.$on('activeSlide', function (activeSlide) {
			$this.activeSlide = activeSlide;
		});
		
		$eventBus.$on('clickSlide', function (activeSlide) {
			$this.reInitInterval();
			$eventBus.$emit('activeSlide', activeSlide);
		});
	},
	
	// Essentially variables that can hold logic...
	computed: {
		slideCount: function() {
			return $('.home-slide').length;
		}
	},
	
	methods: {
		nextSlide: function() {
			if(this.activeSlide == this.slideCount) {
				this.activeSlide = 1;
			} else {
				this.activeSlide++;
			}
			$eventBus.$emit('activeSlide', this.activeSlide);
		},
		
		reInitInterval: function() {
			var $this = this;
			clearInterval($this.interval);
			$this.interval = setInterval(function() {
				$this.nextSlide();
			}, 4000);
		}
	}
});

// Home Slide Component
Vue.component('home-slide', {
	template: '<div class="home-slider" v-show="activeSlide == id"><div class="home-slide"><img :src="image" :alt="imageAlt"></div></div>',
	props: ['id', 'image', 'imageAlt'],
	data: function() {
		return {
			activeSlide: 0
		}
	},
	mounted: function() {
		var $this = this;
		$eventBus.$on('activeSlide', function (activeSlide) {
			$this.activeSlide = activeSlide;
		});
	}
});

// Home Slide Button Component
Vue.component('home-slide-button', {
	template: '<div class="home-slide--button" @click="handleClick" :class="{ active:active }"><progress-bar :id="id" :active-slide="activeSlide"></progress-bar><div class="home-slide--button-inner"><slot></slot><div class="home-slide--content"><div class="home-slide--title">{{ title }}</div><div class="home-slide--text">{{ text }}</div></div></div></div>',
	props: ['id', 'title', 'text'],
	data: function() {
		return {
			activeSlide: 0
		}
	},
	computed: {
		active: function() {
			return this.activeSlide == this.id;
		}
	},
	mounted: function() {
		var $this = this;
		$eventBus.$on('activeSlide', function (activeSlide) {
			$this.activeSlide = activeSlide;
		});
	},
	
	methods: {
		handleClick: function() {
			if(this.activeSlide != this.id) {
				$eventBus.$emit('clickSlide', this.id);
			}
		}
	}
});

Vue.component('progress-bar', {
	props: ['activeSlide', 'id'],
	watch: {
		activeSlide: function() {
			if(this.activeSlide == this.id) {
				$(this.$refs.bar).stop().animate({ width: '0%' }, 0);
				$(this.$refs.bar).stop().animate({ width: '100%' }, 4000);
			} else if(this.activeSlide > this.id) {
				$(this.$refs.bar).stop().animate({ width: '100%' }, 0);
			} else {
				$(this.$refs.bar).stop().animate({ width: '0%' }, 0);
			}
		}
	},
	
	template: '<div class="progress"><div class="progress-bar" ref="bar"></div></div>'
});








Vue.component('emblem', {
	props: ['title', 'text', 'modifierClass'],
	template: '<div class="emblem" :class="modifierClass"><div class="emblem-inner prevent-animation"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1863.7 1863.7" style="enable-background:new 0 0 1863.7 1863.7;" xml:space="preserve"><path class="st0" d="M1176.2,101.2l586.4,586.4c134.9,134.9,134.9,353.7,0,488.6l-586.4,586.4c-134.9,134.9-353.7,134.9-488.6,0l-586.4-586.4c-134.9-134.9-134.9-353.7,0-488.6l586.4-586.4C822.5-33.7,1041.2-33.7,1176.2,101.2z"/></svg><div class="emblem-content"><slot></slot><div class="emblem-title">{{ title }}</div><div class="emblem-text">{{ text }}</div><slot name="after"></slot></div></div></div>',
	/*
	<div class="emblem" :class="modifierClass">
		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
			viewBox="0 0 1863.7 1863.7" style="enable-background:new 0 0 1863.7 1863.7;" xml:space="preserve">
			<path class="st0" d="M1176.2,101.2l586.4,586.4c134.9,134.9,134.9,353.7,0,488.6l-586.4,586.4c-134.9,134.9-353.7,134.9-488.6,0l-586.4-586.4c-134.9-134.9-134.9-353.7,0-488.6l586.4-586.4C822.5-33.7,1041.2-33.7,1176.2,101.2z"
			/>
		</svg>
		<div class="emblem-inner">
			<slot></slot>
			<div class="emblem-title">{{ title }}</div>
			<div class="emblem-text">{{ text }}</div>
		</div>
	</div>
	*/
});












Vue.component('feature-panel', {
	template: '<div class="feature-panel--main cf"> <div class="feature-panel--images"> <slot name="slides" :active-slide="activeSlide"></slot> </div><div class="feature-panel--buttons"> <slot name="buttons" :active-slide="activeSlide"></slot> </div></div>',
	data: function() {
		return {
			slideCount: 3,
			activeSlide: 1,
			timer: null
		}
	},
	mounted: function() {
		var $this = this;
		this.startRotation();
		
		$eventBus.$on('featuredPanel.activeSlide', function (activeSlide) {
			$this.stopRotation();
			$this.activeSlide = activeSlide;
		});
	},
	methods: {
		startRotation: function() {
			this.timer = setInterval(this.next, 3000);
		},
		
		next: function() {
			if(this.activeSlide == this.slideCount) {
				this.activeSlide = 1;
				return true;
			}
			this.activeSlide++;
		},
		
		stopRotation: function() {
			clearTimeout(this.timer);
			this.timer = null;
		},
	}
});

Vue.component('feature-panel-slide', {
	template: '<div v-show="active" class="feature-panel-image"><img :src="image"></div>',
	props: ['id', 'image', 'activeSlide'],
	mounted: function() {
		// Preload images...
		var image = new Image();
		image.src = this.image
	},
	computed: {
		active: function() {
			return this.id == this.activeSlide;
		}
	}
});

Vue.component('feature-panel-button', {
	template: '<div class="feature-panel-button" :class="{active: active}" v-on:click="handleButtonClick"><img :src="image"><div class="feature-panel-button--inner"><div class="feature-panel-button--svg"><slot></slot></div><div class=" feature-panel-button--title ">{{title}}</div><div class="feature-panel-button--text ">{{text}}</div></div></div>',
	props: ['id', 'text', 'title', 'activeSlide', 'image'],
	computed: {
		active: function() {
			return this.id == this.activeSlide;
		}
	},
	methods: {
		handleButtonClick: function() {
			$eventBus.$emit('featuredPanel.activeSlide', this.id);
		}
	}
});

// Root Instance...
var app = new Vue({
	el: '#app',
});