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

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


/****************************
*	Compare Component		*
****************************/

Loc.Compare = function(params) {
	this.page = params.page;
	this.parent = params.parent || Loc.root;
	this.params = params;

	this.getData();
	this.getPresentation();
}
Loc.Compare.prototype = {
	getData : function() {
		this.data = Loc.CompareData;
	},
	
	getPresentation : function() {
		this.downloader = new Silverlight.Downloader({
		    resource : "cmn/xaml/compare/compare.xaml",
		    plugin: Loc.plugin,
		    onComplete : function(downloader) {
				this.init(downloader);
			}.bind(this)
		});
	},
	
	init : function(dl) {
		this.xaml = Loc.plugin.content.createFromXaml(dl.getResponseText(''), true);
		this.parent.children.add(this.xaml);
		
		this.getButtons();
		this.getMaps();
		this.getHighlights();
		this.createPlayer();
	},
	
	getButtons : function() {
		this.buttons = [];
		for (var i = 0; i < 3; i++) {
			this.buttons.push(new Loc.CompareButton(i+1, this));
		}
	},
	
	getMaps : function() {
		this.map_1507 = this.xaml.findName('map_1507');
		this.map_1516 = this.xaml.findName('map_1516');
	},
	
	getHighlights : function() {
		this.highlight_1507 = new Loc.HighlightText(1, this);
		this.highlight_1516 = new Loc.HighlightText(2, this);
	},
	
	createPlayer : function() {
		this.player = new Loc.Player({ type: 'compareVideo', left: 15, top: 132, zIndex: 10, parent: this.xaml.findName('playerHolder'), onLoad : this.ready.bind(this), overlay: 'cmn/img/curator.jpg' });
	},
	
	ready : function() {
		this.buttons[0].select();
		this.select(1);
	},
	
	select : function(id) {
		this.selectedId = id;
		this.map_1507.source = 'cmn/img/compare/map_1507_' + this.selectedId + '.jpg';
		this.map_1516.source = 'cmn/img/compare/map_1516_' + this.selectedId + '.jpg';
		this.highlight_1507.setText(this.data[this.selectedId]['hotspots']['1507'].text);
		this.highlight_1516.setText(this.data[this.selectedId]['hotspots']['1516'].text, this.highlight_1507.getHeight());
		this.player.setSource('cmn/video/compare_' + this.selectedId + '.wmv');
		for (var i = 0; i < 3; i++) {
			this.buttons[i].deselect();
		}
		this.buttons[id - 1].select();
	},
	
	unload : function() {
		this.player.unload();
	}
}

Loc.CompareButton = function(id, component) {
	this.id = id;
	this.component = component;
	this.canvas  = this.component.xaml.findName('button_' + this.id);
	this.bg = this.component.xaml.findName('button_' + this.id + '_bg');
	this.hit = this.component.xaml.findName('button_' + this.id + '_hit');
	this.init();
}
Loc.CompareButton.prototype = {
	init : function() {
		this.hit.cursor = 'Hand';
		this.hit.addEventListener('MouseEnter', this.onOver.bind(this));
		this.hit.addEventListener('MouseLeave', this.onOut.bind(this));
		this.hit.addEventListener('MouseLeftButtonDown', this.onClick.bind(this));
	},
	
	onOver : function() {
		this.bg.fill = '#88FFFFFF';
	},
	
	onOut : function() {
		this.bg.fill = '#88000000';
	},
	
	onClick : function() {
		this.component.select(this.id);
	},
	
	select : function() {
		this.selected = true;
		this.onOver();
		this.disable();
	},
	
	deselect : function() {
		this.selected = false;
		this.onOut();
		this.enable();
	},
	
	disable : function() {
		this.disabled = true;
		this.hit.visibility = 'collapsed';
	},
	
	enable : function() {
		this.disabled = false;
		this.hit.visibility = 'visible';
	}
}

Loc.HighlightText = function(id, component) {
	this.id = id;
	this.component = component;
	this.canvas  = this.component.xaml.findName('highlight_' + this.id);
	this.shadow = this.component.xaml.findName('highlight_' + this.id + '_shadow');
	this.bg = this.component.xaml.findName('highlight_' + this.id + '_bg');
	this.text = this.component.xaml.findName('highlight_' + this.id + '_text');
	
	this.originalHeight = this.bg.height;
}
Loc.HighlightText.prototype = {
	setText : function(text, height) {
		this.text.text = text;
		this.resize();
		this.reposition(height);
	},
	
	resize : function() {
		this.bg.height = this.originalHeight;
		if (this.text.actualHeight > this.bg.height) {
			this.bg.height = this.text.actualHeight + 16;
		}
		this.shadow.height = this.bg.height + 8;
	},
	
	reposition : function(height) {
		if (! height) {
			return;
		}
		if (height > this.shadow.height) {
			this.canvas['Canvas.Top'] = 50;
		} else {
			this.canvas['Canvas.Top'] = -8;
		}
	},
	
	getHeight : function() {
		return this.shadow.height;
	}
}