var Carousel = function (rootCanvas,numItems){
	this.minScale=0.4;this.maxScale=1;this.angleIncrement=0.005;this.itemWidth=250;this.itemHeight=200;this.numItems=numItems;this._containerCanvas;this._items;this._canvasCollection;this._width;this._height;this._radiusX;this._radiusY;this._centerX;this._centerY;this._currentAngle=0;this._angleIncrement;this._storyboard;this._updateStoryboard;this._first=true;this.main(rootCanvas);
}

Carousel.prototype.main = function(rootCanvas){
    
	this._containerCanvas = rootCanvas.content.FindName('carousel');
	this._width = this._containerCanvas.Width;
	this._height = this._containerCanvas.Height;
	this._radiusX = this._width / 2- this.itemWidth + 100;
	this._radiusY = this._height / 2 - this.itemHeight+ 100;
	this._centerX = this._width / 2 - this.itemWidth / 2;
	this._centerY = (this._height / 2 - this.itemHeight / 2);
	this._angleIncrement = this.angleIncrement;
	this._storyboard = new Storyboard(this._containerCanvas,'storyboard');
	this._containerCanvas.Resources.add(this._storyboard);
	this._storyboard = this._containerCanvas.FindName('storyboard');
	this._updateStoryboard = this._storyboard.AddEventListener('Completed',Silverlight.createDelegate(this,this.onStoryboardComplete));
	
	this.createItems();
	this.arrangeItems();
}
Carousel.prototype.onStoryboardComplete = function(sender,eventArgs){
	this.getCanvasItems();
}
Carousel.prototype.createItems = function(){
	
	this._items = this.numItems;// = new Array("#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF");
	
}

Carousel.prototype.arrangeItems = function(){
	this._currentAngle += this._angleIncrement;
	
	var itemCount = this._items;//.length;
	for(var i = 0; i<itemCount;i++){
		var itemAngle = 2 * Math.PI * i / itemCount + this._currentAngle;
		var x = this._radiusX * Math.cos(itemAngle) + this._centerX;
		var y = this._radiusY * Math.sin(itemAngle) + this._centerY;
		var proximity = y / this._height + 0.5;
		var opacity = Math.min(proximity,1);
		var scale =Math.min(this.minScale + proximity,this.maxScale);
		var active =  (y >= this._centerY);
		
		var item = CarrouselItem(this._containerCanvas,'container_' + (i+1), this._items[i]);
		item = this._containerCanvas.children.add(item);
		
		item = this._containerCanvas.FindName('container_'+  (i+1));
		var mouseEnter = item.AddEventListener('MouseEnter',Silverlight.createDelegate(this,this.onCanvasItemMouseEnter));
		var mouseLeave = item.AddEventListener('MouseLeave',Silverlight.createDelegate(this,this.onCanvasItemMouseLeave));
		
				
		update(item,x,y,Math.floor(y),scale,opacity,active);
	}
	
	this._storyboard.begin();
	
}

Carousel.prototype.dispose = function(){
	this._storyboard.RemoveEventListener('Completed', Silverlight.createDelegate(this,this.onStoryboardComplete));
}
Carousel.prototype.renew = function(){
	this._updateStoryboard = this._storyboard.AddEventListener('Completed',Silverlight.createDelegate(this,this.onStoryboardComplete));
}
Carousel.prototype.onCanvasItemMouseEnter = function (sender,eventArgs){
	this.findNumItem('player_mask',sender).opacity = 1;
	this._storyboard.stop();
}

Carousel.prototype.onCanvasItemMouseLeave = function (sender,eventArgs){
	this.findNumItem('player_mask',sender).opacity = 0;
	if(!this.getMediaElement(sender)){
		this._storyboard.begin();	
	}
}
Carousel.prototype.getPlayerMask = function(sender) {
	var name = sender.name;
	var index = name.substr(10,1);//player_mask
	var playerMask = sender.FindName('player_mask' + index);
	return playerMask;
}
Carousel.prototype.findNumItem = function(string,sender){ //Find an item from a numbered collection created via $n
	var name = sender.name;
	var index = name.substr(name.length-1,1);
	var obj = sender.FindName(string + index);
	return obj;
}
Carousel.prototype.getMediaElement = function(sender){
	var volume = this.findNumItem('media',sender).volume;
	if(volume  > 0){
		return true;
	}else {
		return false;
	}		
}
CarrouselItem = function(parent,name,color){
	var itemXaml = '<Canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="' + name + '" ';
	itemXaml += 'Width="40" Height="40" Canvas.Left="20" Canvas.Top="0" RenderTransformOrigin="0.5,0.5">';
	itemXaml += '<Canvas.RenderTransform>';
	itemXaml += '<ScaleTransform />';
	itemXaml += '</Canvas.RenderTransform>';
	itemXaml += '</Canvas>';
	var host = parent.getHost();
	try {
		return host.content.createFromXaml(itemXaml);
	} catch (e) {
		alert(e);
	}
}
Carousel.prototype.getCanvasItems = function(){
	
	this._currentAngle += this._angleIncrement;
	
	this._canvasCollection = this._containerCanvas.children;
	var itemCount = this._canvasCollection.count;
	//alert(this._canvasCollection.count);
	for(var i = 0;i < this._canvasCollection.count;i++){
		var node = this._canvasCollection.getItem(i);		
		var itemAngle = 2 * Math.PI * i / itemCount + this._currentAngle;
		var x = this._radiusX * Math.cos(itemAngle) + this._centerX;
		var y = this._radiusY * Math.sin(itemAngle) + this._centerY;
		var proximity = y / this._height + 0.25;
		var opacity = Math.min(proximity,1) + 0.5;
		var scale =Math.min(this.minScale + proximity,this.maxScale);
		var active =  (y >= this._centerY);
		
		update(node,x,y,Math.floor(y),scale,opacity,active);
	}
	//alert(this);
	this._storyboard.begin();
}

update = function(obj,x,y,zIndex,scale,opa,active){
	
	obj['Canvas.Left'] = x;
	obj['Canvas.Top'] = y;
	obj['Canvas.ZIndex'] = zIndex;
	obj.opacity = opa;
	obj.RenderTransform.ScaleX = scale;
	obj.RenderTransform.ScaleY = scale;
}
var Storyboard = function(canvas,name){	
	var xamlStoryboard = '<Storyboard xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="' + name + '" Storyboard.TargetName="'+ canvas.Name +'" >';xamlStoryboard += '</Storyboard>';var host = canvas.getHost();
	try {return host.content.createFromXaml(xamlStoryboard);} catch (e) {	alert(e);}	}
	Storyboard.prototype.createDoubleAnimation = function(){}