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

cpc.Page = function() 
{
}

cpc.Page.prototype =
{
	handleLoad: function(control, userContext, rootElement) 
	{
		this.control = control;
		
	}
}

/*****************************
INITIALISATION
Global variables & init
*****************************/
var control;
var content;
var video;
var character;
var characterClicked;
var chapter;
var docked;
var dockXs;
var dockYs;
var progressInterval;
var videoDuration;
var trainLoaded;

function handlePageLoad(sender, args){
	//init global vars
	control = sender.getHost();
	content = control.content;
	video = content.findName("video");
	
	//load XML
	loadXML();
	
	// add support for the FULLSCREEN event
	content.onFullScreenChange = onFullScreenChanged;
	
	//setup video event listeners
	video.addEventListener("MarkerReached", handleMarker);
	content.findName("Train_Intro").AddEventListener("MarkerReached", introMarker); //marker to fade out train and show inside train shot
	content.findName("Train_Loop").AddEventListener("MarkerReached", loopMarker); //marker added to tell video to loop as unpredictable behaviour with MediaEnded event
	
	//progress update
	video.AddEventListener("CurrentStateChanged", MediaStateChanged);
	
	//volume controls 1 -13, initialise to comfortable range
	setVolume(11);
	
	//handle train videos without zip
	trainLoaded = new Array();	
	setVideos();
	
	//download and create icons form XAML
	var iconDownloader = control.createObject("downloader");
    iconDownloader.addEventListener("completed", createIcons);
    iconDownloader.open("GET", "xaml/icons.xaml");
	iconDownloader.send();
	
	//download and set font
	var fontDownloader = control.createObject("downloader");
    fontDownloader.addEventListener("completed", setFonts);
    fontDownloader.open("GET", "includes/font.deploy"); //use .deploy (.zip renamed) to get around .com server restrictions. Font sources must be on same domain so cannot use download server for .zip. .ttf format also denied on .com server
    //fontDownloader.open("GET", "includes/SegoeRg.ttf");
	fontDownloader.send();
	
	//animate loading circle
	clearInterval(bufferingInterval);
	bufferingInterval = setInterval("animateBuffering();", 30);
	
}

var mediaElements = new Array("Train_Loop", "Train_Intro");

//var MEDIA_PATH = "media/";
var MEDIA_PATH = "http://download.microsoft.com/download/d/9/2/d9207cdb-1fb3-4f2d-938b-2a71a43a79f0/";

function setVideos(){
	if (trainLoaded.length < mediaElements.length) {
		content.findName(mediaElements[trainLoaded.length]).Source = MEDIA_PATH + mediaElements[trainLoaded.length]+".wmv";
	}
}

//apply fonts to textfields after successful font download
function setFonts(sender, args){
	var feature_title = content.findName("feature_title");
	feature_title.setFontSource(sender);
	feature_title.fontFamily = "Segoe";
	var feature_title1 = content.findName("feature_title1");
	feature_title1.setFontSource(sender);
	feature_title1.fontFamily = "Segoe";
	var feature_title2 = content.findName("feature_title2");
	feature_title2.setFontSource(sender);
	feature_title2.fontFamily = "Segoe";
	var feature_title3 = content.findName("feature_title3");
	feature_title3.setFontSource(sender);
	feature_title3.fontFamily = "Segoe";
	var feature_title4 = content.findName("feature_title4");
	feature_title4.setFontSource(sender);
	feature_title4.fontFamily = "Segoe";
	var feature_title5 = content.findName("feature_title5");
	feature_title5.setFontSource(sender);
	feature_title5.fontFamily = "Segoe";
	var feature_title6 = content.findName("feature_title6");
	feature_title6.setFontSource(sender);
	feature_title6.fontFamily = "Segoe";
	var buffering_text = content.findName("buffering_text");
	buffering_text.setFontSource(sender);
	buffering_text.fontFamily = "Segoe";
}


/*****************************
TRAIN FUNCTIONS
Opened, markers, ended etc
*****************************/
function trainLoad(sender, args)
{
	trainLoaded.push(sender.Name);
	
	if(trainLoaded.length == mediaElements.length){
		
	if (skip != undefined){
			chapter = "1";
			chooseCharacter(skip);
			chooseVid(chapter);
			characterClicked = false;
			content.findName("Train_Intro").Visibility = "Collapsed";
			content.findName("Train_Intro").Pause();
			content.findName("train").Visibility = "Collapsed";
			content.findName("loading").Visibility = "Collapsed";
		} else {
			character = "train";
			characterClicked = false;
			content.findName("Train_Intro").Play();
			content.findName("train").Visibility = "Visible";
			content.findName("fadeIn_Train").Begin();
			content.findName("sfx_in").Begin();
			setTimeout('content.findName("Train_Loop").Visibility = "Visible";',1000);
			setTimeout('content.findName("train_buttons").Visibility = "Visible";',3000);		
			
			//atlas tag to register silverlight loaded
			$("atlasDiv").innerHTML = "<img src='http://switch.atdmt.com/action/ukmukh_FY08VistaSilverlightloadedtrainScene_1' width='1' height='1' />";
		
		}		
		content.findName("buffering").Visibility = "Collapsed";
	} else {
		setVideos();
	}
	
}
//handle markers in aerial shot of train
function introMarker(sender, args){	
	if(args.marker.type == "rolling"){
		//make internal train shot visible once external shot is playing
		content.findName("Train_Loop").Visibility = "Visible";
	} else if(args.marker.type == "ending"){
		content.findName("Train_Intro").Visibility = "Collapsed";
		content.findName("train_buttons").Visibility = "Visible";
	}
}
//handle mediaEnded event unreliability
function loopMarker(sender, args){
	if(args.marker.type == "loop"){
		sender.Position = "00:00:00";
		sender.Play();
	}
}
//called by train_buttons or character_popup at switch points 
function characterClick(sender, args){
	if(sender.Name != "character_popup"){
		//train_buttons are named as 'B', 'M' etc.
		if(sender.Name.length == 1){
			character = sender.Name;
		} else {
			character = sender.Name.split("bottom_")[1];
		}
		
		chapter = "1";
		chooseCharacter(character);
		chooseVid(chapter);
		characterClicked = false;
	} else { //character_popup clicked
		characterClicked = true;
		video.Pause();
		
		//WebTrends tracking
		var wt_params = new Array("character", "changecharacter");
		var wt_values = new Array(character);
		
		//change to appropriate character i.e. B -> G etc
		switch (character){
			case "B":
				chooseCharacter("G");
				wt_values.push("G");
				break;
			case "M":
				chooseCharacter("W");
				wt_values.push("W");
				break;
			case "W":
				chooseCharacter("M");
				wt_values.push("M");
				break;
			case "G":
				chooseCharacter("B");
				wt_values.push("B");
				break;
		}
		chooseVid(2);//2 passed to tell chooseVid to skip to switch point
		//WebTrends tracking cont
		trackEvent(wt_params, wt_values);
	}
		
	content.findName("character_popup").Visibility = "Collapsed";
	clearInterval(character_interval); //character_interval flicks through preview images
}

var character_interval;
var character_hover;
function characterEnter(sender, args){ //called by MouseEnter on train_buttons
	var which;
	if(sender.Name.length == 1){
		which = sender.Name;
	} else {
		which = sender.Name.split("bottom_")[1];
	}
	
	content.findName("silhouette_"+which).Opacity = 1;
	//position character_popup
	switch(which){
		case "B":
			content.findName("character_popup")["Canvas.Left"] = 5;
			content.findName("character_popup")["Canvas.Top"] = 335;
			break;
		case "M":
			content.findName("character_popup")["Canvas.Left"] = 160;
			content.findName("character_popup")["Canvas.Top"] = 10;
			break;
		case "W":
			content.findName("character_popup")["Canvas.Left"] = 315;
			content.findName("character_popup")["Canvas.Top"] = 35;
			break;
		case "G":
			content.findName("character_popup")["Canvas.Left"] = 510;
			content.findName("character_popup")["Canvas.Top"] = 40;
			break;
		default:
			break;
	}
	content.findName("character_popup_click").Visibility = "Collapsed";
	showCharacterPopup(which);
}

//roll out of character on train
function characterLeave(sender, args){
	var which;
	if(sender.Name.length == 1){
		which = sender.Name;
	} else {
		which = sender.Name.split("bottom_")[1];
	}
	
	content.findName("silhouette_"+which).Opacity = 0.75;
	
	content.findName("character_popup").Visibility = "Collapsed";
	clearInterval(character_interval);
	
}

function showCharacterPopup(_char){
	content.findName("character_popup").Visibility = "Visible";
	
	var animation = content.findName("character_popup_animation");
	animation.Stop();
	animation.Begin();
	
	character_hover = _char;
	switch(_char){
		case "B":
			content.findName("character_text").Text = "Matt's Journey";
			break;
		case "M":
			content.findName("character_text").Text = "Samir's Journey";
			break;
		case "W":
			content.findName("character_text").Text = "Anna & Lily's Journey";
			break;
		case "G":
			content.findName("character_text").Text = "Jenni's Journey";
			break;
		default:
			break;
	}
	
	//hide preview images
	content.findName("popup_B").Visibility = "Collapsed";
	content.findName("popup_M").Visibility = "Collapsed";
	content.findName("popup_W").Visibility = "Collapsed";
	content.findName("popup_G").Visibility = "Collapsed";
	//show appropriate one
	content.findName("popup_"+_char).Visibility = "Visible";
	
	clearInterval(character_interval);
	popup_count = 1;
	updateCharacterPopup(); //loop through preview images
	character_interval = setInterval("updateCharacterPopup();", 750);
}

//loop through preview images
var popup_count = 1;
function updateCharacterPopup(){
	for (var a = 1; a <= 5; a++){
		if(popup_count == a){
			content.findName(character_hover+""+a).Visibility = "Visible";
		} else {
			content.findName(character_hover+""+a).Visibility = "Collapsed";
		}
	}

	popup_count++;
	if (popup_count == 6){ popup_count = 1; }		
}

//rollover state for little silhouettes
function silhouetteOver(sender, args){
	sender.Opacity = 1;
	content.findName("silhouette_text").Visibility = "Visible";
	
	var silhouette_character = sender.Name.split("switch_")[1];
	var silhouette_text = content.findName("silhouette_text");
	if(silhouette_character == "B"){
		silhouette_text.Text = "Matt's Journey";
	} else if(silhouette_character == "M"){
		silhouette_text.Text = "Samir's Journey";
	} else if(silhouette_character == "W"){
		silhouette_text.Text = "Anna & Lily's Journey";
	} else if(silhouette_character == "G"){
		silhouette_text.Text = "Jenni's Journey";
	}
	silhouette_text["Canvas.Left"] = -silhouette_text.ActualWidth - 5;
}

function silhouetteOut(sender, args){
	sender.Opacity = 0.65;
	content.findName("silhouette_text").Visibility = "Collapsed";
}

function silhouetteClick(sender, args){
	sender.Opacity = 0.65;
	content.findName("silhouette_text").Visibility = "Collapsed";
	chooseCharacter(sender.Name.split("switch_")[1]);
	chooseVid(1);
}

function loopVideo(sender, args){
	sender.Stop();
	sender.Play();
}

// raised by 'Home' link on to called by end screen
function enterTrain(){
	//WebTrends tracking
	var wt_params = new Array("control", "character");
	var wt_values = new Array("home", character);
	trackEvent(wt_params, wt_values);
	
	character = "train";
	content.findName("Train_Loop").Visibility = "Visible";
	content.findName("train").Visibility = "Visible";
	content.findName("train_buttons").Visibility = "Visible";
	content.findName("hide_dock").Begin();
	
	content.findName("black").Visibility = "Collapsed";
	content.findName("videoarea").Visibility = "Collapsed";
	content.findName("feature_info").Visibility = "Collapsed";
	content.findName("end_info").Visibility = "Collapsed";
	content.findName("silhouettes").Visibility = "Collapsed";
	
	video.Stop();
	content.findName("Train_Loop").Play();
	content.findName("sfx_in").Begin();
	
	content.fullScreen = false;
	hideIcons();
	resetStoryBoards();
	resetCharacters();
	
}

function loadingComplete(sender, args){
	content.findName("loading").Visibility = "Collapsed";
	content.findName("buffering")["Canvas.Top"] = 0;	
	content.findName("buffering")["Canvas.Left"] = 0;
	content.findName("loading_text").Visibility = "Collapsed";
	content.findName("buffering_text").Visibility = "Visible";
	content.findName("buffer_bg").Visibility = "Visible";
}

/*****************************
MEDIA EVENT FUNCTIONS
Opened, markers, ended etc
*****************************/
function handleMediaOpened(sender, args){
	//progress bar
	videoDuration = video.naturalDuration.Seconds;
	video_progress = 0;
	
	if(character != "train"){
		content.findName("Train_Loop").Stop();
		content.findName("sfx_out").Begin();
		content.findName("train").Visibility = "Collapsed";
		content.findName("train_buttons").Visibility = "Collapsed";
		if(content.findName("dock")["Canvas.Top"] != 437){ //check that dock is not down already
			content.findName("show_dock").Begin();
		}
		content.findName("silhouettes").Visibility = "Visible";
		//WebTrends tracking
		var wt_params = new Array("character", "progress");
		var wt_values = new Array(character, "0");
		trackEvent(wt_params, wt_values);
	}
	
	//tidy up
	content.findName("feature_info").Visibility = "Collapsed";
	content.findName("character_popup").Visibility = "Collapsed";
	clearInterval(character_interval);
	content.findName("pauseIcon").Opacity = 0;
	content.findName("playIcon").Opacity = 100;	
	
	switch(character){
		// set starting locations for dock elements
		// X: 289 = middle (770/2) - (192/2)
		case "B":
			dockXs = new Array(289, 420, 300, 300, 140);
			dockYs = new Array(200, 170, 150, 100, 150);
			break;
		case "M":
			dockXs = new Array(310, 310, 350, 420, 350, 289);
			dockYs = new Array(350, 170, 300, 320, 175, 200);
			break;
		case "W":
			dockXs = new Array(380, 450, 289, 140);
			dockYs = new Array(120, 335, 200, 220);
			break;
		case "G":
			dockXs = new Array(80, 330, 80, 300, 80);
			dockYs = new Array(250, 330, 100, 100, 150);
			break;
		default:			
			break;
	}
}

function handleMarker(sender, args){
	//close_character marker hides the character_popup
	if(args.marker.type == "close_character"){
		content.findName("character_popup").Visibility = "Collapsed";
		setTimeout('characterClicked = false;', 500);
	}
	
	//suppress character event when skipping to switch point
	if(characterClicked == false && args.marker.type == "character"){
		var video_stretch = content.findName("placeholder"); //placeholder is resized in onFullScreenChanged 
		switch(args.marker.text.charAt(0).toUpperCase()){
			case "B":
				if(content.fullScreen){
					content.findName("character_popup")["Canvas.Left"] = video_stretch["Canvas.Left"] + Math.floor((video_stretch.Width/770)*465);
					content.findName("character_popup")["Canvas.Top"] = video_stretch["Canvas.Top"] + Math.floor((video_stretch.Height/770)*60);
				} else {
					content.findName("character_popup")["Canvas.Left"] = 465;
					content.findName("character_popup")["Canvas.Top"] = 60;
				}
				break;
			case "M":
				if(content.fullScreen){
					content.findName("character_popup")["Canvas.Left"] = video_stretch["Canvas.Left"] + Math.floor((video_stretch.Width/770)*40);
					content.findName("character_popup")["Canvas.Top"] = video_stretch["Canvas.Top"] + Math.floor((video_stretch.Height/770)*90);
				} else {
					content.findName("character_popup")["Canvas.Left"] = 40;
					content.findName("character_popup")["Canvas.Top"] = 90;
				}
				break;
			case "W":
				if(content.fullScreen){
					content.findName("character_popup")["Canvas.Left"] = video_stretch["Canvas.Left"] + Math.floor((video_stretch.Width/770)*180);
					content.findName("character_popup")["Canvas.Top"] = video_stretch["Canvas.Top"] + Math.floor((video_stretch.Height/770)*230);
				} else {
					content.findName("character_popup")["Canvas.Left"] = 180;
					content.findName("character_popup")["Canvas.Top"] = 230;
				}
				break;
			case "G":
				if(content.fullScreen){
					content.findName("character_popup")["Canvas.Left"] = video_stretch["Canvas.Left"] + Math.floor((video_stretch.Width/770)*120);
					content.findName("character_popup")["Canvas.Top"] = video_stretch["Canvas.Top"] + Math.floor((video_stretch.Height/770)*180);
				} else {
					content.findName("character_popup")["Canvas.Left"] = 120;
					content.findName("character_popup")["Canvas.Top"] = 180;
				}
				break;
			default:
				break;
		}
		content.findName("character_popup_click").Visibility = "Visible";
		showCharacterPopup(args.marker.text.charAt(0).toUpperCase());
		
	}
	
	if(args.marker.type == "feature"){
		docked++;
		animateIcon(args.marker.text);
		character_features.push(args.marker.text);
		
	} 
	
	if(args.marker.type == "ending"){
		openEndInfo();
	}
}

function handleMediaEnded(sender, args){
	//openEndInfo();
}

var bufferingInterval;
function MediaStateChanged(sender, args){
	if(sender.CurrentState == "Playing"){
		progressInterval = setInterval("updateProgress();", 1000);
	} 
	if(sender.CurrentState == "Paused" | sender.CurrentState == "Paused"){
		clearInterval(progressInterval);
		content.findName("pauseIcon").Opacity = 0;
		content.findName("playIcon").Opacity = 100;
	}
	if(sender.CurrentState == "Buffering"){
		clearInterval(bufferingInterval);
		bufferingInterval = setInterval("animateBuffering();", 30);
		content.findName("buffering").Visibility = "Visible";
	} else {
		clearInterval(bufferingInterval);
		content.findName("buffering").Visibility = "Collapsed";
	}
}

var bufferingCount = 1;
function animateBuffering(sender, args){	
	content.findName("buffer"+bufferingCount).Opacity = 0;
	bufferingCount++;
	if(bufferingCount == 19) {
		bufferingCount = 1;
	}
	content.findName("buffer"+bufferingCount).Opacity = 1;	
}

function handleBuffering(sender, args){
	content.findName("buffering_text").Text = "Buffering " + Math.floor(video.BufferingProgress * 100) +  "%";
}

/*****************************
END SCREEN FUNCTIONS
Open, populate ad position links etc for eniding of videos etc
*****************************/
function openEndInfo(sender, args){
	
	for(var i = 0; i < character_features.length; i++){
		
		for(var j = 0; j < XMLtree.features.feature.length; j++){
			if(XMLtree.features.feature[j]["@id"] == character_features[i]){
				var loc = j;
			}
		}
		
		content.findName("feature_image"+(i+1)).Source = "images/icons/" + XMLtree.features.feature[loc].image;
		content.findName("feature_title"+(i+1)).Text = XMLtree.features.feature[loc].title;
		content.findName("feature_text"+(i+1)).Text = XMLtree.features.feature[loc].intro;
		//psotion feature info relevant to previous
		if(i > 0){
			var nextY = content.findName("feature_text"+i).ActualHeight + content.findName("feature_text"+i)["Canvas.Top"] + 17;
			content.findName("feature_image"+(i+1)).Visibility = "Visible";
			content.findName("feature_image"+(i+1))["Canvas.Top"] = nextY;
			content.findName("feature_title"+(i+1)).Visibility = "Visible";
			content.findName("feature_title"+(i+1))["Canvas.Top"] = nextY + 2;
			content.findName("feature_text"+(i+1)).Visibility = "Visible";
			content.findName("feature_text"+(i+1))["Canvas.Top"] = nextY + 25;
		}
		
		content.findName("link_hitarea"+(i+1))["Canvas.Top"] = content.findName("feature_image"+(i+1))["Canvas.Top"];
		content.findName("link_hitarea"+(i+1))["Canvas.Left"] = content.findName("feature_image"+(i+1))["Canvas.Left"];
		content.findName("link_hitarea"+(i+1)).Width = (content.findName("feature_title"+(i+1)).ActualWidth + content.findName("feature_title"+(i+1))["Canvas.Left"]) - content.findName("feature_image"+(i+1))["Canvas.Left"];
		content.findName("link_hitarea"+(i+1)).Height = content.findName("feature_image"+(i+1)).Height;
		
	}
	
	if(character_features.length < 6){
		for(var k = character_features.length + 1; k <= 6; k++){
			content.findName("feature_image"+k).Visibility = "Collapsed";
			content.findName("feature_title"+k).Visibility = "Collapsed";
			content.findName("feature_text"+k).Visibility = "Collapsed";
		}
	}
		
	content.findName("end_info").Opacity = 0;
	
	positionEndInfo();
	
	content.findName("end_info_ani").Stop();
	content.findName("end_info_ani").Begin();
	
	hideIcons();
	resetStoryBoards();
	content.findName("silhouettes").Visibility = "Collapsed";
	
	//WebTrends tracking
	var wt_params = new Array("character", "progress");
	var wt_values = new Array(character, 100);
	trackEvent(wt_params, wt_values);
}

function closeEndInfo(sender, args){	
		content.findName("end_info").Visibility = "Collapsed";
		enterTrain();
}
//position the info box - also called by onFullScreenChanged
function positionEndInfo(){
	var area_height;
	var area_width;
	var area_top;
	var area_left;
	
	if(content.fullScreen){
		area_height = content.ActualHeight;
		area_width = content.ActualWidth;
		area_top = 0;
		area_left = 0;
	} else {
		area_height = content.findName("videoarea").Height;
		area_width = content.findName("videoarea").Width;
		area_top = content.findName("videoarea")["Canvas.Top"];
		area_left = content.findName("videoarea").Width;
	}
	
	var end_info = content.findName("end_info");
	end_info["Canvas.Top"] =  (area_height - end_info.Height) / 2 + 20 - (6 * character_features.length);
	end_info["Canvas.Left"] = (area_width - end_info.Width) / 2;
	var black_out = content.findName("end_panel");
	black_out["Canvas.Top"] = -end_info["Canvas.Top"];
	black_out["Canvas.Left"] = -end_info["Canvas.Left"];
	black_out.Height = area_height;
	black_out.Width = area_width; 
	var colour_bar = content.findName("colour_bar");
	colour_bar.Width = black_out.Width - 50;
	colour_bar["Canvas.Top"] = black_out["Canvas.Top"] + black_out.Height - 30;
	colour_bar["Canvas.Left"] = black_out["Canvas.Left"] + 25;
	var close_end_info_button = content.findName("close_end_info_button");
	close_end_info_button["Canvas.Left"] = area_width - end_info["Canvas.Left"] - close_end_info_button.Width;
	close_end_info_button["Canvas.Top"] = -end_info["Canvas.Top"];
	end_info.Visibility = "Visible";
}

function endLinkOver(sender, args){
	var link_id = sender.Name.split("link_hitarea")[1];
	content.findName("feature_title"+link_id).Foreground = "#FFFFE100";
}

function endLinkOut(sender, args){
	var link_id = sender.Name.split("link_hitarea")[1];
	content.findName("feature_title"+link_id).Foreground = "#FFFFFFFF";
}

function endLinkClick(sender, args){
	var link_id = sender.Name.split("link_hitarea")[1] - 1;
	var feature = character_features[link_id]
	
	for(var j = 0; j < XMLtree.features.feature.length; j++){
		if(XMLtree.features.feature[j]["@id"] == feature){
			var loc = j;
		}
	}
	
	//var link = XMLtree.features.feature[loc].link["@href"];
	var link = XMLtree.features.feature[loc].link["@end"+character];	
	
	//WebTrends tracking
	var wt_params = new Array("character", "feature", "linklocation");
	var wt_values = new Array(character, feature, "endlinks");
	trackEvent(wt_params, wt_values);
	
	//window.location = link;
	window.open(link);
}

function featureLinkOver(sender, args){
	content.findName("feature_link").TextDecorations = "Underline";
}

function featureLinkOut(sender, args){
	content.findName("feature_link").TextDecorations = "None";
}

function featureLinkClick(sender, args){
	
	for(var j = 0; j < XMLtree.features.feature.length; j++){
		if(XMLtree.features.feature[j]["@id"] == featureInfoOpen){
			var loc = j;
		}
	}
	
	var link = XMLtree.features.feature[loc].link["@feature"+character];
	
	//WebTrends tracking
	var wt_params = new Array("character", "feature", "linklocation");
	var wt_values = new Array(character, featureInfoOpen, "featurepopup");
	trackEvent(wt_params, wt_values);
	
	//window.location = link;
	window.open(link);
}


function animateIcon(_icon){
	
	var iconName = "icon_"+_icon;
	var icon = content.findName(iconName);
	
	if(characterClicked == false){ //animate dropping in
		icon["Canvas.Left"] = dockXs[docked-1];
		icon["Canvas.Top"] = dockYs[docked-1];
		icon.Opacity = 0;
		icon.Visibility = "Visible";
		icon["Canvas.ZIndex"] = 1;
			
		var tween = content.findName("dock"+docked);
		tween.Stop();
		var tweenX = content.findName("dock"+docked+"X");
		var tweenY = content.findName("dock"+docked+"Y");
		var tweenOpacity = content.findName("dock"+docked+"Opacity");
		tweenX["Storyboard.TargetName"] = iconName;
		tweenY["Storyboard.TargetName"] = iconName;
		tweenOpacity["Storyboard.TargetName"] = iconName;
	} else {
		if(docked > 3){
			icon["Canvas.Top"] = 468;
			icon["Canvas.Left"] = 190 + (docked - 4) * 192;
		} else {
			icon["Canvas.Top"] = 448;
			icon["Canvas.Left"] = 190 + (docked - 1) * 192;
		}
		icon.Opacity = 0;
		icon.Visibility = "Visible";
		
		var tween = content.findName("fadeIn"+docked);
		tween.Stop();
		content.findName("fade"+docked+"Target")["Storyboard.TargetName"] = iconName;
	}
	tween.Begin();
	
	//full screen icons
	iconName = "fs_"+_icon;
	icon = content.findName(iconName);
	if(docked > 3){
		icon["Canvas.Top"] = 20;
		icon["Canvas.Left"] = 2 + (docked - 4) * 192;
	} else {
		icon["Canvas.Top"] = 0;
		icon["Canvas.Left"] = 2 + (docked - 1) * 192;
	}
	
	icon.Opacity = 0;
	icon.Visibility = "Visible";
	icon["Canvas.ZIndex"] = 1;
		
	var fs_tween = content.findName("fsFadeIn"+docked);
	fs_tween.Stop();
	var tweenFade = content.findName("fsFade"+docked+"Target");
	tweenFade["Storyboard.TargetName"] = iconName;
	fs_tween.Begin();
}

function resetZ(sender, args){
	content.findName(sender.children.GetItem(0)["Storyboard.TargetName"])["Canvas.ZIndex"] = 0;
}

var character_features = new Array();
var characters = new Array("B", "M", "W", "G");
function chooseCharacter(_character){	
	character = _character;
	character_features = new Array();
	hideIcons();
	
	var switchChar;
	var charX = 0;
	var sils_width = 0;
	for(var a = 0; a < characters.length; a++){
		switchChar = content.findName("switch_"+characters[a]);
		if(_character == characters[a]){
			switchChar.Visibility = "Collapsed";
		} else {
			switchChar.Visibility = "Visible";
			switchChar["Canvas.Left"] = charX;
			charX = charX + switchChar.Width + 4;
			sils_width = sils_width + switchChar.Width + 4;
		}
	}
	content.findName("silhouettes")["Canvas.Left"] = content.ActualWidth - sils_width - 10;
	
}

function createIcons(sender, args){
	
	var xamlFragment = control.content.createFromXamlDownloader(sender, "");

    // Add the XAML object as a child of the root Canvas object.
    var root = content.findName("Page");
    root.children.add(xamlFragment);
	
	var fs_xaml = sender.ResponseText;	
	// swap group name
	fs_xaml = fs_xaml.replace("dock_icons", "fs_icons");
	// change instance  names
	var replacer = "fs_";
	fs_xaml = fs_xaml.replace(/icon_/g, replacer);
	// Add the XAML object as a child of the fullscreen Canvas object.
    var fs = content.findName("fs_dock");
	xamlFragment = control.content.createFromXaml(fs_xaml)
    fs.children.add(xamlFragment);
}

function hideIcons(){	
	docked = 0; //reset number of docked icons
	
	for( var a = 0; a < XMLtree.features.feature.length; a++){
		try {
			content.findName("icon_"+XMLtree.features.feature[a]["@id"]).Visibility = "Collapsed";
			content.findName("fs_"+XMLtree.features.feature[a]["@id"]).Visibility = "Collapsed";
		} catch(err) {
			//alert(XMLtree.features.feature[a]["@id"] + " " + err.toString());
		}
	}
	
}

function resetStoryBoards(){
	content.findName("dock1").Stop();
	content.findName("dock2").Stop();
	content.findName("dock3").Stop();
	content.findName("dock4").Stop();
	content.findName("dock5").Stop();
	content.findName("dock6").Stop();
}

function resetCharacters(){	
	characterClicked = false;
}

function chooseVid(_chapter){
	//Download server		
	var VIDEO_PATH = "http://download.microsoft.com/download/0/2/d/02d703e5-1bd3-46f5-aeee-42761ff75aab/";
	//Media server
	//var VIDEO_PATH = "http://mediadl.microsoft.com/mediadl/www/u/uk/windows/digitallife/mediadl_videotests/";
	//Streaming server
	//var VIDEO_PATH = "mms://wm.microsoft.com:1755/ms/uk/windows/digitallife/wmstage_videotests/";
	
	video.Source = VIDEO_PATH + character+".wmv";
	content.findName("videoarea").Visibility = "Visible";
	
	if(_chapter == 2){
		if(character == "B"){
			video.Position = "00:1:37.25";
		} else if(character == "G"){
			video.Position = "00:00:54.25";
		} else if(character == "M"){
			video.Position = "00:1:38.75";
		} else if(character == "W"){
			video.Position = "00:00:33";
		}
	}
}

/*****************************
FULLSCREEN FUNCTIONS
*****************************/
function toggleFullScreen(sender, args){
	content.fullScreen = !content.fullScreen;
	
	//WebTrends tracking
	var wt_params = new Array("control", "character");
	var wt_values = new Array("fullscreen", character);
	trackEvent(wt_params, wt_values);
}

function onFullScreenChanged(sender, args){
	var isFullScreen = content.fullScreen;
	var black = content.findName("black");
	var fs_dock = content.findName("fs_dock");
	var feature_info = content.findName("feature_info");
	
	if(isFullScreen){
		//figure out where video fill scales to and set video_stretch to use as a reference
		var video_stretch = content.findName("placeholder");
		if(content.actualHeight/9 > content.actualWidth/16){
			video_stretch.Width = content.actualWidth;
			video_stretch.Height = content.actualWidth * 9/16;
			video_stretch["Canvas.Left"] = 0;
			video_stretch["Canvas.Top"] = (content.actualHeight - video_stretch.Height) / 2;
		} else {
			video_stretch.Height = content.actualHeight;
			video_stretch.Width = content.actualHeight * 16/9;
			video_stretch["Canvas.Top"] = 0;
			video_stretch["Canvas.Left"] = (content.actualWidth - video_stretch.Width) / 2;
		}		
		//stretch video to fullscreen
		video.height = content.actualHeight;
		video.width = content.actualWidth;		
		video["Canvas.Top"] = 0;
		video["Canvas.ZIndex"] = 2;
		//ensure letterbox is blacked out
		black.Visibility = "Visible";
		black.Opacity = 1;
		black.height = content.actualHeight;
		black.width = content.actualWidth;		
		black["Canvas.Top"] = 0;
		black["Canvas.ZIndex"] = 2;
		//show & position fullscreen dock
		fs_dock["Canvas.Top"] = video_stretch["Canvas.Top"] + video_stretch.Height - 40 - 20;
		fs_dock["Canvas.Left"] = video_stretch["Canvas.Left"] + video_stretch.Width - 582 - 20;
		fs_dock.Visibility = "Visible";
		fs_dock["Canvas.ZIndex"] = 2;
		//position feature popup and stack z-index
		feature_info["Canvas.ZIndex"] = 3;
		feature_info["Canvas.Top"] = content.actualHeight/2 - feature_info.Height/2;
		feature_info["Canvas.Left"] = content.actualWidth/2 - feature_info.Width/2;
		//stack misc z-indexes
		content.findName("buffering")["Canvas.ZIndex"] = 3;		
		content.findName("end_info")["Canvas.ZIndex"] = 3;
		content.findName("character_popup")["Canvas.ZIndex"] = 3;
		//show & position video controls & hide other dock stuff
		content.findName("dock")["Canvas.ZIndex"] = 3;
		content.findName("dock_panel").Visibility = "Collapsed";		
		content.findName("icon_dock").Visibility = "Collapsed";
		content.findName("dock")["Canvas.Top"] = video_stretch["Canvas.Top"] + video_stretch.Height - 90;
		content.findName("dock")["Canvas.Left"] = video_stretch["Canvas.Left"] + 10;
		
	} else {
		//not fullscreen so reset all the stuff done above in the 'if' bit
		video["Canvas.Top"] = content.actualHeight;
		black.Visibility = "Collapsed";
	
		video["Canvas.ZIndex"] = 0;
		black["Canvas.ZIndex"] = 0;			
		
		feature_info["Canvas.ZIndex"] = 0;
		feature_info["Canvas.Top"] = content.actualHeight/2 - feature_info.Height/2 - 50;
		feature_info["Canvas.Left"] = content.actualWidth/2 - feature_info.Width/2;
		
		content.findName("fs_dock").Visibility = "Collapsed";
		
		content.findName("buffering")["Canvas.ZIndex"] = 0;
		content.findName("end_info")["Canvas.ZIndex"] = 0;
		content.findName("character_popup")["Canvas.ZIndex"] = 0;
		
		content.findName("dock")["Canvas.ZIndex"] = 0;
		content.findName("dock_panel").Visibility = "Visible";		
		content.findName("icon_dock").Visibility = "Visible";
		content.findName("dock")["Canvas.Top"] = 437;
		content.findName("dock")["Canvas.Left"] = 0;
	}
	
	if(content.findName("end_info").Visibility == "Visible"){
		positionEndInfo();
	}
}

/*****************************
MEDIA CONTROLLER FUNCTIONS
play, rewind etc
*****************************/
function playPause(sender, args){
	if(content.findName("end_info").Visibility == "Visible"){		
		rewind();
		content.findName("pauseIcon").Opacity = 100;
		content.findName("playIcon").Opacity = 0;
	} else {
		if(video.CurrentState == "Paused"){
			video.Play();
			content.findName("pauseIcon").Opacity = 100;
			content.findName("playIcon").Opacity = 0;
		} else if(video.CurrentState == "Stopped"){
			rewind();
			content.findName("pauseIcon").Opacity = 100;
			content.findName("playIcon").Opacity = 0;
		} else if(video.CurrentState == "Playing"){
			video.Pause();
			content.findName("pauseIcon").Opacity = 0;
			content.findName("playIcon").Opacity = 100;
		}
	}
	content.findName("end_info").Visibility = "Collapsed";
	content.findName("feature_info").Visibility = "Collapsed";
}

function rewind(sender, args){
	chapter = 1;
	chooseVid(chapter);
	character_features = new Array();
	hideIcons();	
	content.findName("end_info").Visibility = "Collapsed";
	video.Stop();
	video.Play();
	video_progress = 0;
	docked = 0;
	
	//WebTrends tracking
	var wt_params = new Array("control", "character");
	var wt_values = new Array("rewind", character);
	trackEvent(wt_params, wt_values);
}

function controlOver(sender, args){
	if(sender.Name=="btn_play"){
		content.findName("play_icon").Fill = "#FF7A7A7A";
		content.findName("pause_icon").Fill = "#FF7A7A7A";
	} else if(sender.Name=="btn_rew"){
		content.findName("rew_icon").Fill = "#FF7A7A7A";
	} else if(sender.Name=="btn_full"){
		content.findName("full_icon").Fill = "#FF7A7A7A";
	} else if(sender.Name=="btn_exit"){
		content.findName("exit_icon").Fill = "#FF7A7A7A";
	}
}

function controlOut(sender, args){
	if(sender.Name=="btn_play"){
		content.findName("play_icon").Fill = "#FFFFFFFF";
		content.findName("pause_icon").Fill = "#FFFFFFFF";
	} else if(sender.Name=="btn_rew"){
		content.findName("rew_icon").Fill = "#FFFFFFFF";
	} else if(sender.Name=="btn_full"){
		content.findName("full_icon").Fill = "#FFFFFFFF";
	} else if(sender.Name=="btn_exit"){
		content.findName("exit_icon").Fill = "#FFFFFFFF";
	}
}

function handleVolumeChange(sender, args){	
	var clicked = sender.Name.split("volume")[1];
	setVolume(clicked);
}

function setVolume(_vol){
	
	var newVolume = Math.ceil(_vol * 7.15)/100;
	video.volume = newVolume;
	for(var a = 0; a <= 14; a++){
		if(a <= _vol){
			content.findName("vol"+a).Fill = "#FFFFFFFF";
		} else {
			content.findName("vol"+a).Fill = "#FF000000"; //"#FF242423";
		}
	}
	
}

var video_progress;
function updateProgress(sender, args){
	var currentTime = video.Position.Seconds;
	var percentComplete = currentTime/videoDuration;
	var progFill = 63 * percentComplete; 
	//progressBar.Width = PROGRESS_MAX * percentComplete;
	for(var a = 1; a <= 63; a++){
		if(a < progFill){
			content.findName("prog"+a).Fill = "#FF7A7A7A";
		} else {
			content.findName("prog"+a).Fill = "#FF000000";
		}
		
	}
	
	if(Math.floor(percentComplete*100) > video_progress){
		if(Math.floor(percentComplete*100) > (video_progress + 5)){
			video_progress = Math.floor(percentComplete*100);
		}
		video_progress++;
		//WebTrends tracking
		var wt_params = new Array();
		var wt_values = new Array();
		for(var b = 0; b < wt_params.length; b++){
			wt_params.pop();
			wt_values.pop();
		}
		wt_params.push("character") 
		wt_values.push(character);
		wt_params.push("progress");
		if(video_progress == 25){ //25% reached
			wt_values.push(25);
			trackEvent(wt_params, wt_values);
		} else if(video_progress == 50){ //50% reached
			wt_values.push(50);
			trackEvent(wt_params, wt_values);
		} else if(video_progress == 75){ //75% reached
			wt_values.push(75);
			trackEvent(wt_params, wt_values);
		}
			
	}
	
	if(video.CurrentState == "Playing"){
		content.findName("pauseIcon").Opacity = 100;
		content.findName("playIcon").Opacity = 0;
	} else if(video.CurrentState == "Paused"){
		content.findName("pauseIcon").Opacity = 0;
		content.findName("playIcon").Opacity = 100;
	} else if(video.CurrentState == "Stopped"){
		content.findName("pauseIcon").Opacity = 0;
		content.findName("playIcon").Opacity = 100;
	}
}

/*****************************
XML FUNCTIONS
Load copy and tracking tags
NOTE: XML functions use XML ObjTree (http://openjsan.org/doc/k/ka/kawasaki/XML/ObjTree/0.24/lib/XML/ObjTree.html) & HTTP Request (http://openjsan.org/doc/r/rk/rkinyon/HTTP/Request/0.03/lib/HTTP/Request.html)
*****************************/
var XMLtree;
function loadXML(){
	var xotree = new XML.ObjTree();
    var XMLurl = "xml/cpc.xml?cachebuster="+Math.random();
    xotree.attr_prefix = '@';    // E4X-style
	
    XMLtree = xotree.parseHTTP( XMLurl ).cpc;  
	
	processTags();
}

var atlasIndex = new Array();
var atlasURLs = new Array();

function processTags(){
	for(var a = 0; a < XMLtree.tags.atlas.length; a++){
		atlasIndex.push(XMLtree.tags.atlas[a]["@event"]);
		atlasURLs.push(XMLtree.tags.atlas[a]["@url"]);
	}	
}

function trackEvent(_params, _values){	
	var wt_args = "";
	for(var a = 0; a < _params.length; a++){
		wt_args += "["+_params[a]+":"+_values[a]+"]";
		if(_params[a] == "progress" || _params[a] == "control"  || _params[a] == "changecharacter"){
			atlas(_params[a], _values[a])
		}
	}
	dcsMultiTrack('DCSext.wt_evtid',wt_args);
} 

function atlas(_param, _value){
	if(_param == "progress"){
		var loc;
		for(var a = 0; a < atlasIndex.length; a++){
			if("progress"+character+""+_value == atlasIndex[a]){
				loc = a;
			}
		}
		//alert("progress"+character+""+_value+" : "+atlasURLs[loc]);
		$("atlasDiv").innerHTML = "<img src='" + atlasURLs[loc] + "' width='1' height='1' />";
		
	} else if(_param == "control"){
		var loc;
		for(var a = 0; a < atlasIndex.length; a++){
			if(_param+""+character+""+_value == atlasIndex[a]){
				loc = a;
			}
		}
		//alert(_param+""+character+""+_value+" : "+atlasURLs[loc]);
		$("atlasDiv").innerHTML = "<img src='" + atlasURLs[loc] + "' width='1' height='1' />";
		
	} else if(_param == "changecharacter"){
		var loc;
		var oldChar;
		switch (_value){
			case "B":
				oldChar = "G";
				break;
			case "M":
				oldChar = "W";
				break;
			case "W":
				oldChar = "M";
				break;
			case "G":
				oldChar = "B";
				break;
		}
		for(var a = 0; a < atlasIndex.length; a++){
			if(oldChar+"swap"+_value == atlasIndex[a]){
				loc = a;
			}
		}
		//alert(oldChar+"swap"+_value+" : "+atlasURLs[loc]);
		$("atlasDiv").innerHTML = "<img src='" + atlasURLs[loc] + "' width='1' height='1' />";
		
	}
}

/*****************************
FEATURE INFO FUNCTIONS
*****************************/
var featureInfoOpen = "none";

function openFeatureInfo(sender, args){
	if(video.currentState == "Playing"){
		playPause();
	}
	
	var loc;
	var feature;
	if(sender.Name.indexOf("icon_") != -1){
		feature = sender.Name.split("icon_")[1];
	} else {
		feature = sender.Name.split("fs_")[1];
	}
	
	for(var a = 0; a < XMLtree.features.feature.length; a++){
		if(feature == XMLtree.features.feature[a]["@id"]){
			loc = a;
		}
	}
	
	content.findName("feature_intro").Text = XMLtree.features.feature[loc].intro;
	var feature_link = content.findName("feature_link");
	feature_link.Text = XMLtree.features.feature[loc].link["#text"] + " about " + XMLtree.features.feature[loc].title;
	var feature_intro = content.findName("feature_intro");
	feature_intro.Text = XMLtree.features.feature[loc].intro;
	content.findName("feature_link_button")["Canvas.Top"] = feature_intro["Canvas.Top"] + feature_intro.ActualHeight + 15;
	content.findName("link_hitarea").Width = feature_link.ActualWidth + 10;
	content.findName("link_hitarea").Height = feature_link.ActualHeight;	
	var feature_image = content.findName("feature_image");
	feature_image.Source = "images/icons/" + XMLtree.features.feature[loc].image;
	var feature_title = content.findName("feature_title");
	feature_title.Text = XMLtree.features.feature[loc].title;	
	
	content.findName("feature_info").Visibility = "Visible";
	featureInfoOpen = feature;
	
	//WebTrends tracking
	var wt_params = new Array("feature", "character", "linklocation");
	var wt_values = new Array(feature, character, "dock");
	trackEvent(wt_params, wt_values);
	
}

function dockFeatureOver(sender, args){
	var feature;
	if(sender.Name.indexOf("icon_") != -1){
		feature = sender.Name.split("icon_")[1];	
	} else {
		feature = sender.Name.split("fs_")[1];	
	}
	content.findName("icon_link_"+feature).TextDecorations = "Underline";	
	content.findName("fs_link_"+feature).TextDecorations = "Underline";
}

function dockFeatureOut(sender, args){
	var feature;
	if(sender.Name.indexOf("icon_") != -1){
		feature = sender.Name.split("icon_")[1];	
	} else {
		feature = sender.Name.split("fs_")[1];	
	}
	content.findName("icon_link_"+feature).TextDecorations = "None";	
	content.findName("fs_link_"+feature).TextDecorations = "None";
}


function positionImage(sender, args){
	
	var feature_image = content.findName("feature_image");
	feature_image["Canvas.Top"] = 10 + (50 - feature_image.Height)/2;
	feature_image["Canvas.Left"] = 10 + (50 - feature_image.Width)/2;
	var feature_title = content.findName("feature_title");
	feature_title["Canvas.Left"] = feature_image.Width + feature_image["Canvas.Top"] + 10;
}

function closeFeatureInfo(sender, args){
	if(video.currentState == "Paused"){
		playPause();
	}
	
	content.findName("feature_info").Visibility = "Collapsed";
	featureInfoOpen = "none";
	
}

/*****************************
AUDIO FX FUNCTIONS
****************************
function SFXInBegin(sender, args){

}
*/