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

SongCharts.Page = function(controlId, chartData, caption, backgroundUrl, songsUrl, bandProfileUrl) 
{
	this.controlId = controlId;
	this.chartData = chartData;
	this.caption = caption;
	this.backgroundUrl = backgroundUrl;
	this.songsUrl = songsUrl;
	this.bandProfileUrl = bandProfileUrl;
}



SongCharts.Page.prototype =
{
	settingHighlightRectangleOpacity: 0.4,
	placesCountTotal: 10,
	placesCountBottom: 9,
	playingRectangles: [],
	player: null,
	
	handleLoad: function(control, userContext, rootElement) 
	{
		this.control = control;
		this.root = rootElement;
		
		this.control.content.findName("imgBackground").Source = this.backgroundUrl;
		this.control.content.findName("txtCaption").Text = this.caption;		
		this.createRectangles();
		this.createSongNames();
		
		this.player = this.control.content.findName("Player");
		this.player.addEventListener("CurrentStateChanged", Silverlight.createDelegate(this, this.handlePlayerStateChanged));				
	},
	
	
	// Generiert die Song- und Künstlernamen
	createSongNames : function() {
		
		if (this.chartData.length == 0) return;
		
		var templatePlace = '<TextBlock Width="17" Height="20" Canvas.Left="10" Canvas.Top="T_TOP" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontFamily="Arial" FontSize="16" FontWeight="Bold"><Run Text="T_TEXT"/></TextBlock>';
		var templateBandName = '<TextBlock Width="152" Height="14" Canvas.Left="42" Canvas.Top="T_TOP" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontSize="11" FontFamily="Arial" FontWeight="Normal" Cursor="Hand"><Run Text="T_TEXT"/></TextBlock>';
		var templateSongName = '<TextBlock Width="152" Height="14" Canvas.Left="42" Canvas.Top="T_TOP" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontSize="10" FontFamily="Arial" FontWeight="Normal" Cursor="Hand"><Run Text="T_TEXT"/></TextBlock>';
		
		// Platz 1
		var objBandName1 = this.root.findName("txtBand1");
		objBandName1.Text = this.chartData[0].BandName;
		objBandName1.Tag = String(0);
		objBandName1.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleBandClick));
		var objSongName1 = this.root.findName("txtSong1");
		objSongName1.Text = this.chartData[0].SongName;
		objSongName1.Tag = String(0);
		objSongName1.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleBandClick));
		var objImage1 = this.root.findName("imgTopSong");
		objImage1.Source = this.chartData[0].Logo;
		objImage1.Tag = String(0);
		objImage1.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleBandClick));
		

		// Plätze 2 bis 10
		for (i = 1; i < this.placesCountTotal; i++) {
			
			// Platznummern
			var xamlPlace = templatePlace.replace(/T_TOP/, String((i * 34) + 78));
			var xamlPlace = xamlPlace.replace(/T_TEXT/, String(i + 1) + '.');
			var objPlace = this.control.content.createFromXaml(xamlPlace);
			this.root.children.add(objPlace);
			
			if (i < this.chartData.length) {
			
				// Song- und Künstlernamen
				var xamlBandName = templateBandName.replace(/T_TOP/, String((i * 34) + 74));
				var xamlBandName = xamlBandName.replace(/T_TEXT/, this.chartData[i].BandName);
				var objBandName = this.control.content.createFromXaml(xamlBandName);
				objBandName.Tag = String(i);
				objBandName.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleBandClick));
				this.root.children.add(objBandName);
			
				var xamlSongName = templateSongName.replace(/T_TOP/, String((i * 34) + 88));
				var xamlSongName = xamlSongName.replace(/T_TEXT/, this.chartData[i].SongName);
				var objSongName = this.control.content.createFromXaml(xamlSongName);
				objSongName.Tag = String(i);
				objSongName.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleBandClick));
				this.root.children.add(objSongName);
			}
		}
	},
	
	
	// Generiert die Kästen zum Abspielen der Songs
	createRectangles : function() {
		var templateOver = '<Rectangle Width="36" Height="33" Fill="#FFFFFFFF" Canvas.Left="198" Canvas.Top="T_TOP" Opacity="0" Cursor="Hand"/>';
		var templatePlaying = '<Rectangle Width="36" Height="33" Fill="#FFFFFF00" Canvas.Left="198" Canvas.Top="T_TOP" Opacity="0" Cursor="Hand"/>'
		
		for (i = 0; i < this.placesCountTotal; i++) {
			
			if (i >= this.chartData.length) break;
			
			var xamlPlaying = templatePlaying.replace(/T_TOP/, String((i * 34) + 70));
			var objPlaying = this.control.content.createFromXaml(xamlPlaying);			
			this.root.children.add(objPlaying);
			this.playingRectangles[i] = objPlaying;
			
			var xamlOver = templateOver.replace(/T_TOP/, String((i * 34) + 70));
			var objOver = this.control.content.createFromXaml(xamlOver);
			objOver.Tag = String(i);
			objOver.addEventListener("MouseEnter", Silverlight.createDelegate(this, this.handleShowOver));
			objOver.addEventListener("MouseLeave", Silverlight.createDelegate(this, this.handleHideOver));
			objOver.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handlePlaySong));
			this.root.children.add(objOver);
		}		
	},
	
	
	// Bandname wurde angeklickt
	handleBandClick: function(sender, args) {
		var songIndex = parseInt(sender.Tag);
		window.location.href = this.bandProfileUrl + this.chartData[songIndex].BandID;
	},
	
	
	// Maus ist über Lautsprecher
	handleShowOver: function(sender, args) {
		sender.Opacity = this.settingHighlightRectangleOpacity;
	},


	// Maus weg vom Lautsprecher
	handleHideOver: function(sender, args) {
		sender.Opacity = 0;
	},

	
	// Auf Lautsprecher geklickt -> Song abspielen
	handlePlaySong: function(sender, args) {
		var songIndex = parseInt(sender.Tag);
		if (songIndex >= this.chartData.length) return;
		
		if ((this.player.Tag == sender.Tag) && (this.player.CurrentState == "Playing")) {
			this.player.Stop();
			return;
		}
		
		this.player.Stop();
		this.player.Source = this.songsUrl + this.chartData[songIndex].SongID + ".mp3";
		this.player.Tag = String(songIndex);
		this.player.Play();
	},
	
	
	// Der Status vom Player hat sich geändert
	handlePlayerStateChanged: function(sender, args) {
		
		for (i = 0; i < this.placesCountTotal; i++) {
			this.playingRectangles[i].Opacity = 0;
		}
		
		if (this.player.CurrentState == "Playing") {
			var songIndex = parseInt(this.player.Tag);
			this.playingRectangles[songIndex].Opacity = this.settingHighlightRectangleOpacity;
		}
	}
}