///////////////////////////////////////////////////////////////////////////////
//
//  xamlObjects.js   			version 1.0
//	2007 Lenny Burdette
//
///////////////////////////////////////////////////////////////////////////////

if ( !window.Loc ) { window.Loc = {}; }

Loc.Slideshow = function(params) {
	this.imageHolder = Loc.root.findName('slideshowHolder');
	this.slidePreloader = Loc.make('Preloader', {name: 'slideLoader', top: 300, left: 600});
	
	this.onHomePage = true;
	// wait one second before loading the slideshow
	// so that the smaller nav images, etc have a chance to download
	setTimeout(this.loadImages.bind(this), 1000);
	
	this.initEvents();
}
Loc.Slideshow.prototype = {
	loadImages : function() {
		this.images = [];
		this.readyImages = 0;
		this.readiedImages = []
		var i = 0;
		for (var asset in Loc.assetContent) {
			this.images.push(new Loc.SlideshowImage('cmn/img/asset/' + asset + '.png', this, i++, asset));
		}
		this.currentIndex = 0;
		this.removeIndex = this.images.length - 2;
		this.slideOffIndex = this.images.length - 1;
		this.previewIndex = 1;
	},
	
	initEvents : function() {
		Loc.dispatch.subscribe('assetClick', null, this.hide.bind(this));
		Loc.dispatch.subscribe('pageLoad', null, this.hide.bind(this));
	},
	
	isReady : function(index) {
		if (! this.readiedImages[index]) {
			this.readyImages++;
			this.readiedImages[index] = true;
		}
		if (this.readyImages == 5) { // this.images.length) {
			this.slidePreloader.stop();
			if (this.onHomePage && ! this.begun) {
				this.begin();	
			}
		}
	},
	
	begin : function() {
		this.begun = true;
		this.setup();
		this.display();
		this.startTimer();
	},
	
	setup : function() {
		this.images[this.removeIndex].setToRemove();
		this.images[this.slideOffIndex].setAfter();
		this.images[this.currentIndex].setCenter();
		this.images[this.previewIndex].setBefore();
	},
	
	display : function() {
		this.images[this.removeIndex].remove();
		this.images[this.slideOffIndex].slideOff();
		this.images[this.currentIndex].center();
		this.images[this.previewIndex].preview();
		this.removeIndex = this.cycle(this.removeIndex);
		this.slideOffIndex = this.cycle(this.slideOffIndex);
		this.currentIndex = this.cycle(this.currentIndex);
		this.previewIndex = this.cycle(this.previewIndex);
		this.initialized = true;
	},
	
	startTimer : function() {
		if (this.timer) {
			clearInterval(this.timer);
			this.timer = null;
		}
		this.timer = setInterval(this.display.bind(this), 2000);
	},
	
	stopTimer : function() {
		clearInterval(this.timer);
		this.timer = null;
	},
	
	cycle : function(num) {
		return num + 1 >= this.images.length ? 0 : num + 1;
	},
	
	hide : function(pageName) {
		if (pageName != 'home') {
			this.stopTimer();
			this.onHomePage = false;
			if (this.images) {
				for (var i = 0, j = this.images.length; i < j; i++) {
					this.images[i].hide();
				}
			}
		} else {
			this.onHomePage = false;
			if (! this.initialized) {
				return;
			}
			this.setup();
			this.stopTimer();
			this.startTimer();
			for (var i = 0, j = this.images.length; i < j; i++) {
				this.images[i].show();
			}
		}
	}
}

Loc.SlideshowImage = function(path, parent, index, assetId) {
	this.path = path;
	this.parent = parent;
	this.index = index;
	this.assetId = assetId;
	this.createImage();
	this.createAnimation();
	this.state = 'hidden';
}
Loc.SlideshowImage.prototype = {
	createImage : function() {
		this.image = Loc.plugin.content.createFromXaml('<Image><Image.RenderTransform><ScaleTransform /></Image.RenderTransform></Image>');
		this.image.visibility = 'collapsed';
		// this.token = this.image.addEventListener('Loaded', this.isReady.bind(this));
		this.token = this.image.addEventListener('DownloadProgressChanged', this.progressChanged.bind(this));
		// this.centerPosition = (this.parent.imageHolder.width / 2 - 150)
		this.centerPosition = 180;
		this.image['Canvas.Left'] = this.parent.imageHolder.width; 
		this.image['Canvas.Top'] = 15;
		this.image.opacity = 0;
		this.image.renderTransformOrigin = '.5,.5'
		this.scaler = this.image.renderTransform;
		this.scaler.scaleX = .1;
		this.scaler.scaleY = .1;
		this.image.source = this.path;
		
		this.image.cursor = 'Hand';
		this.image.addEventListener('MouseLeftButtonDown', function() {
			Loc.tracker.currentAsset = this.assetId;
			Loc.tracker.currentPage = "asset";
			Loc.dispatch.broadcast('assetClick', this.assetId);
		}.bind(this));
		this.parent.imageHolder.children.add(this.image);
	},
	
	createAnimation : function() {
		this.centerTween = new Loc.Tween([
			{ obj: this.image, prop: 'Canvas.Left', begin: this.centerPosition + 300, end: this.centerPosition, func: Loc.Tween.easeOutExpo },
			{ obj: this.scaler, prop: 'ScaleX', begin: .6, end: 1.0 },
			{ obj: this.scaler, prop: 'ScaleY', begin: .6, end: 1.0 }
			], .8);
		this.removeTween = new Loc.Tween([
			{ obj: this.image, prop: 'Canvas.Left', begin: -150, end: -75, func: Loc.Tween.easeOutExpo },
			{ prop: 'opacity', begin: 1, end: 0 },
			{ obj: this.scaler, prop: 'ScaleX', begin: .6, end: .1 },
			{ obj: this.scaler, prop: 'ScaleY', begin: .6, end: .1 }
			], .8);
		this.slideOffTween = new Loc.Tween([
			{ obj: this.image, prop: 'Canvas.Left', begin: this.centerPosition, end: -125, func: Loc.Tween.easeOutExpo },
			{ obj: this.scaler, prop: 'ScaleX', begin: 1, end: .6 },
			{ obj: this.scaler, prop: 'ScaleY', begin: 1, end: .6 }
			], .8);
		this.previewTween = new Loc.Tween([
			{ obj: this.image, prop: 'Canvas.Left', begin: this.parent.imageHolder.width, end: this.centerPosition + 300, func: Loc.Tween.easeOutExpo },
			{ prop: 'opacity', begin: 0, end: 1 },
			{ obj: this.scaler, prop: 'ScaleX', begin: .1, end: .6 },
			{ obj: this.scaler, prop: 'ScaleY', begin: .1, end: .6 }
			], .8);
		this.hideTween = new Loc.Tween([
			{ obj: this.image, prop: 'opacity', end: 0, func: Loc.Tween.easeOutExpo },
			{ obj: this.scaler, prop: 'ScaleX', end: .1 },
			{ obj: this.scaler, prop: 'ScaleY', end: .1 }
			], 1); 
	},
	
	isReady : function() {
		this.parent.isReady();
		this.image.removeEventListener('Loaded', this.token);
	},
	
	progressChanged : function() {
		if (this.image.downloadProgress >= 1) {
			this.parent.isReady(this.index);
			this.image.removeEventListener('DownloadProgressChanged', this.token);
			this.image.visibility = 'visible';
		}
	},
	
	setCenter : function() {
		this.image['Canvas.Left'] = this.centerPosition + 300;
		this.image.opacity = 1;
	},
	
	setAfter : function() {
		this.image['Canvas.Left'] = this.centerPosition;
		this.image.opacity = 1;
	},
	
	setBefore : function() {
		this.image['Canvas.Left'] = this.parent.imageHolder.width;
	},
	
	setToRemove : function() {
		this.image['Canvas.Left'] = -125;
		this.image.opacity = 1;
	},
	
	center : function() {
		this.centerTween.start();
		this.image['Canvas.ZIndex'] = 10;
		this.state = 'center';
	},
	
	remove : function() {
		this.removeTween.start();
		this.image['Canvas.ZIndex'] = 1;
		this.state = 'hidden';
	},
	
	slideOff : function() {
		this.slideOffTween.start();
		this.image['Canvas.ZIndex'] = 5;
		this.state = 'after';
	},
	
	preview : function() {
		this.previewTween.start();
		this.image['Canvas.ZIndex'] = 5;
		this.state = 'before';
	},
	
	hide : function() {
		this.hideTween.startFromHere();
		this.image.isHitTestVisible = false;
	},
	
	show : function() {
		if (this.state != 'hidden') {
			this.image.isHitTestVisible = true;
			if (this.state == 'center') {
				new Loc.Tween([
					{ obj: this.image, prop: 'opacity', end: 1, func: Loc.Tween.easeOutExpo },
					{ obj: this.scaler, prop: 'ScaleX', end: 1 },
					{ obj: this.scaler, prop: 'ScaleY', end: 1 }
					], .5).startFromHere();
			} else {
				new Loc.Tween([
					{ obj: this.image, prop: 'opacity', end: 1, func: Loc.Tween.easeOutExpo },
					{ obj: this.scaler, prop: 'ScaleX', end: .6 },
					{ obj: this.scaler, prop: 'ScaleY', end: .6 }
					], .5).startFromHere();
			}
		}	
	}
}