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 dockStartXs;
var dockStartYs;
var dockEndXs;
var dockEndYs;
var current_features;
var progressInterval;
var videoDuration;
var cafeLoaded;

function handlePageLoad(sender, args){
	//init global vars
	control = sender.getHost();
	content = control.content;
	video = content.findName("video");
	
	//load XML
	loadXML();
	
	//setup video event listeners
	video.addEventListener("MarkerReached", handleMarker);
	//content.findName("sfx").AddEventListener("MarkerReached", loopMarker);
	content.findName("Cafe_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);
	
	character = "cafe";
	characterClicked = false;
	
	//handle cafe videos without zip
	cafeLoaded = new Array();	
	setVideos();
	
	//download and create icons form XAML
	var iconDownloader = control.createObject("downloader");
    iconDownloader.addEventListener("completed", createIcons);
    iconDownloader.open("GET", "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("Cafe_Loop");

// Local
//var MEDIA_PATH = "media/";
// Download server
var MEDIA_PATH = "http://download.microsoft.com/download/4/8/1/481cedfa-b15d-494f-bea3-c22c15af5b54/";

function setVideos(){
	if (cafeLoaded.length < mediaElements.length) {
		content.findName(mediaElements[cafeLoaded.length]).Source = MEDIA_PATH + mediaElements[cafeLoaded.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";
}


/*****************************
CAFE FUNCTIONS
Opened, markers, ended etc
*****************************/
function cafeLoad(sender, args)
{
	cafeLoaded.push(sender.Name);
	
	if(cafeLoaded.length == mediaElements.length){
		content.findName("Cafe_Loop").Visibility = "Visible";
		content.findName("Cafe_Loop").Play();
		content.findName("cafe").Visibility = "Visible";		
		content.findName("fadeIn_Cafe").Begin();
		content.findName("sfx_in").Begin();
		content.findName("buffering").Visibility = "Collapsed";
		content.findName("cafe_buttons").Visibility = "Visible";		
		
		//atlas tag to register silverlight loaded
		$("atlasDiv").innerHTML = "<img src='http://switch.atdmt.com/action/ukmbuk_VistaSBSLLoad_1' width='1' height='1' />";
		
	} else {
		setVideos();
	}
	
}


//handle mediaEnded event unreliability
function loopMarker(sender, args){
	if(args.marker.type == "loop"){
		sender.Position = "00:00:00";
		sender.Play();
	}
}
//called by cafe_buttons or character_popup at switch points 
function characterClick(sender, args){
	if(sender.Name != "character_popup"){
		//cafe_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 cafe_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"] = 545;
			content.findName("character_popup")["Canvas.Top"] = 60;
			break;
		case "M":
			content.findName("character_popup")["Canvas.Left"] = 170;
			content.findName("character_popup")["Canvas.Top"] = 30;
			break;
		case "W":
			content.findName("character_popup")["Canvas.Left"] = 380;
			content.findName("character_popup")["Canvas.Top"] = 15;
			break;
		case "G":
			content.findName("character_popup")["Canvas.Left"] = 5;
			content.findName("character_popup")["Canvas.Top"] = 335;
			break;
		default:
			break;
	}
	content.findName("character_popup_click").Visibility = "Collapsed";
	showCharacterPopup(which);
}

//roll out of character on cafe
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 = "Atal's Journey";
			break;
		case "M":
			content.findName("character_text").Text = "Martin's Journey";
			break;
		case "W":
			content.findName("character_text").Text = "Cathy's Journey";
			break;
		case "G":
			content.findName("character_text").Text = "Amy'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 = "Atal's Journey";
	} else if(silhouette_character == "M"){
		silhouette_text.Text = "Martin's Journey";
	} else if(silhouette_character == "W"){
		silhouette_text.Text = "Cathy's Journey";
	} else if(silhouette_character == "G"){
		silhouette_text.Text = "Amy'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 enterCafe(){
	//WebTrends tracking
	var wt_params = new Array("control", "character");
	var wt_values = new Array("home", character);
	trackEvent(wt_params, wt_values);
	
	character = "cafe";
	content.findName("cafe").Visibility = "Visible";
	content.findName("cafe_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("Cafe_Loop").Play();
	content.findName("sfx_in").Begin();
	content.findName("sfx").Position = "00:00:00";
	content.findName("sfx").Play();
	
	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 != "cafe"){
		content.findName("Cafe_Loop").Stop();
		content.findName("sfx_out").Begin();
		content.findName("cafe").Visibility = "Collapsed";
		content.findName("cafe_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":
			current_features = new Array("transfer","sharing","excel","ie7","powerpoint","gadgets","shadow");
			dockStartXs = new Array(289, 420, 300, 300, 200, 360, 330);
			dockStartYs = new Array(200, 170, 150, 100, 150, 280, 100);
			dockEndXs = new Array(270, 450, 200, 390, 540, 320, 470);
			dockEndYs = new Array(450, 450, 471, 471, 471, 492, 492);
			break;
		case "M":
			current_features = new Array("outlook","gadgets","mobility_center","remote_desktop","excel","outlook_calendar","mobile","bitlocker");
			dockStartXs = new Array(310, 410, 350, 420, 350, 289, 330, 580);
			dockStartYs = new Array(280, 170, 250, 220, 195, 200, 310, 140);
			dockEndXs = new Array(305, 515, 197, 382, 572, 200, 470, 610);
			dockEndYs = new Array(450, 450, 471, 471, 471, 492, 492, 492);
			break;
		case "W":
			current_features = new Array("spyware","bcm","shadow","skydrive","mail");
			dockStartXs = new Array(380, 450, 350, 140, 330);
			dockStartYs = new Array(250, 105, 200, 220, 200);
			dockEndXs = new Array(265, 445, 225, 405, 585);
			dockEndYs = new Array(456, 456, 485, 485, 485);
			break;
		case "G":
			current_features = new Array("small_biz","ie7","backup","power","media_player","search","onecare","outlook");
			dockStartXs = new Array(120, 330, 300, 300, 80, 330, 80, 300);
			dockStartYs = new Array(150, 180, 70, 100, 130, 330, 100, 100);
			dockEndXs = new Array(200, 417, 554, 190, 420, 590, 300, 465);
			dockEndYs = new Array(450, 450, 450, 471, 471, 471, 492, 492);
			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":
				content.findName("character_popup")["Canvas.Left"] = 465;
				content.findName("character_popup")["Canvas.Top"] = 60;
				
				break;
			case "M":
				content.findName("character_popup")["Canvas.Left"] = 40;
				content.findName("character_popup")["Canvas.Top"] = 90;
				
				break;
			case "W":
				content.findName("character_popup")["Canvas.Left"] = 180;
				content.findName("character_popup")["Canvas.Top"] = 230;
				
				break;
			case "G":
				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){
	var cols = 1;
	
	for(var i = 0; i < character_features.length; i++){
		var imageX;
		var textW;
		if(character_features.length < 6){
			textW = 395;
			imageX = 164;
		} else {
			textW = 279;
			cols = 2;
			if(i < character_features.length/2){
				imageX = 50;
			} else {
				imageX = 394;
			}
		}
		
		for(var j = 0; j < XMLtree.features.feature.length; j++){
			if(XMLtree.features.feature[j]["@id"] == character_features[i]){
				var loc = j;
			}
		}
		//position & populate image
		content.findName("feature_image"+(i+1))["Canvas.Left"] = imageX;
		content.findName("feature_image"+(i+1)).Source = "images/icons/" + XMLtree.features.feature[loc].image;
		//position & populate title
		content.findName("feature_title"+(i+1))["Canvas.Left"] = imageX + 45;
		content.findName("feature_title"+(i+1)).Width = textW;
		content.findName("feature_title"+(i+1)).Text = XMLtree.features.feature[loc].title;
		//position & populate text
		content.findName("feature_text"+(i+1))["Canvas.Left"] = imageX + 45;
		content.findName("feature_text"+(i+1)).Width = textW;
		content.findName("feature_text"+(i+1)).Text = XMLtree.features.feature[loc].intro;
		//psotion feature info relevant to previous
		var nextY = 45;
		if(i > 0 && !(cols == 2 && i == Math.ceil(character_features.length/2))){
			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"] = content.findName("feature_title"+(i+1)).ActualHeight + content.findName("feature_title"+(i+1))["Canvas.Top"] + 5;
			
		
		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 < 9){
		for(var k = character_features.length + 1; k <= 9; 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();
	var wt_values = new Array();
	wt_params.push("character") 
	wt_values.push(character);
	wt_params.push("progress");
	wt_values.push(100);
	trackEvent(wt_params, wt_values);
}

function closeEndInfo(sender, args){	
		content.findName("end_info").Visibility = "Collapsed";
		enterCafe();
}
//position the info box - also called by onFullScreenChanged
function positionEndInfo(){
	var area_height;
	var area_width;
	var area_top;
	var area_left;
	
	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;
		}
	}
	
	// WARNING link is bypassing tracking
	//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;
		}
	}
	
	// WARNING link is bypassing tracking
	//var link = XMLtree.features.feature[loc].link["@href"];
	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"] = dockStartXs[docked-1];
		icon["Canvas.Top"] = dockStartYs[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");
		tweenX["Storyboard.TargetName"] = iconName;
		tweenY["Storyboard.TargetName"] = iconName;
		var tweenOpacity = content.findName("dock"+docked+"Opacity");
		tweenOpacity["Storyboard.TargetName"] = iconName;
		var tweenXValue = content.findName("dock"+docked+"XValue");
		var tweenYValue = content.findName("dock"+docked+"YValue");	
		tweenXValue.Value = dockEndXs[character_features.length];
		tweenYValue.Value = dockEndYs[character_features.length];
	} 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();
	 
}

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);
}

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";
		} 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/4/8/1/481cedfa-b15d-494f-bea3-c22c15af5b54/";
	// Local
	//var VIDEO_PATH = "media/";
	
	video.Source = VIDEO_PATH + character+".wmv";
	content.findName("videoarea").Visibility = "Visible";
	
	//skip to end
	//setTimeout('video.Position = "00:1:45";', 500);
	/* if(character == "M"){
		//test M
		setTimeout('character_features.push("outlook");character_features.push("gadgets");character_features.push("mobility_center");character_features.push("remote_desktop");character_features.push("excel");character_features.push("outlook_calendar");character_features.push("mobile");character_features.push("bitlocker"); openEndInfo();', 500);
	} else if(character == "B"){
		//test B
			setTimeout('character_features.push("transfer");character_features.push("sharing");character_features.push("excel");character_features.push("ie7");character_features.push("powerpoint");character_features.push("gadgets");character_features.push("shadow"); openEndInfo();', 500);
	} else if(character == "W"){
		//test W
		setTimeout('character_features.push("spyware");character_features.push("bcm");character_features.push("shadow");character_features.push("skydrive");character_features.push("mail"); openEndInfo();', 500);
	} else if(character == "G"){
		//test G
		setTimeout('character_features.push("small_biz");character_features.push("ie7");character_features.push("backup");character_features.push("power");character_features.push("media_player");character_features.push("search");character_features.push("onecare");character_features.push("outlook"); openEndInfo();', 500);
	} */
}

/*****************************
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_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_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/pic.xml?cachebuster="+Math.random();
    xotree.attr_prefix = '@';    // E4X-style
	
    XMLtree = xotree.parseHTTP( XMLurl ).pic;  
	
	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;
	feature = sender.Name.split("icon_")[1];
	
	for(var a = 0; a < XMLtree.features.feature.length; a++){
		if(feature == XMLtree.features.feature[a]["@id"]){
			loc = a;
		}
	}
	
	var feature_title = content.findName("feature_title");
	feature_title.Text = XMLtree.features.feature[loc].title;	
	var feature_intro = content.findName("feature_intro");
	feature_intro.Text = XMLtree.features.feature[loc].intro;
	feature_intro["Canvas.Top"] = feature_title["Canvas.Top"] + feature_title.ActualHeight + 10;
	var feature_link = content.findName("feature_link");
	feature_link.Text = XMLtree.features.feature[loc].link["#text"] + " about " + XMLtree.features.feature[loc].title;
	content.findName("feature_link_button")["Canvas.Top"] = feature_intro["Canvas.Top"] + feature_intro.ActualHeight + 25;
	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;
	
	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;
	feature = sender.Name.split("icon_")[1];	
	
	content.findName("icon_link_"+feature).TextDecorations = "Underline";	
}

function dockFeatureOut(sender, args){
	var feature;
	feature = sender.Name.split("icon_")[1];	
	
	content.findName("icon_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";
	
}