var plugin
var main
var stage_width

var video_directory="silverlight/photo/"
var videoArr=new Array("1thumb","2thumb","3thumb","4thumb","5thumb")
var tile_img_width=100
var tile_img_height=80
var tile_spacing=115

var tile_top=0
var tile_scale=1
var tile_z=0
var tile_scale_up_to=1.4

var tileObjsArr=new Array()

for(i=0;i<videoArr.length;i++) {

	tileObjsArr[i]=new Object()
	
	tileObjsArr[i].x=i*tile_spacing
	tileObjsArr[i].y=tile_top	
	tileObjsArr[i].z=tile_z
	
	tileObjsArr[i].width=tile_img_width
	tileObjsArr[i].height=tile_img_height
	
	tileObjsArr[i].scale=tile_scale
	tileObjsArr[i].center_x=tile_img_width/2
	tileObjsArr[i].center_y=tile_img_height/2
	
	if(i<Math.floor(videoArr.length/2)) {
		if(i==((videoArr.length-1)/2)) {
			tile_z=videoArr.length-1
		}
		else {
			tile_z+=1
		}
	}
	else {
		tile_z-=1
	}
}

tileHolder_width=tileObjsArr[videoArr.length-1].x + tileObjsArr[videoArr.length-1].width

function mainCanvasLoaded(s) {
	main=s.findName("mainCanvas")
	plugin = s.getHost()
	stage_width=plugin.width	
	buildImages()
}

function buildImages() {

	var tileHolder_str = '<Canvas Name="tilesHolder" Canvas.Left="'+(stage_width/2-tileHolder_width/2)+'" Canvas.Top="350">';	
	
	for(i=0;i<videoArr.length;i++) {
		tileHolder_left=tileObjsArr[i].x
		tileHolder_top=tileObjsArr[i].y
		tile_z=tileObjsArr[i].z
		
		tileHolderReflection_top=(tileObjsArr[i].height*2)
		
		tile_img_width=tileObjsArr[i].width
		tile_img_height=tileObjsArr[i].height
		
		scale_x=scale_y=tileObjsArr[i].scale
		center_x=tileObjsArr[i].center_x
		center_y=tileObjsArr[i].center_y
		
		
		tileHolder_str += 		'<Canvas Name="tileHolder_'+i+'" Canvas.Left="'+tileHolder_left+'" Canvas.Top="'+tileHolder_top+'" Canvas.ZIndex="'+tile_z+'">'
		tileHolder_str += 		'	<Canvas Name="imgHolderReflection_'+i+'" Canvas.Top="'+tileHolderReflection_top+'">'
		tileHolder_str += 		'		<Canvas.OpacityMask>'
		tileHolder_str += 		'			<LinearGradientBrush  StartPoint="0,0" EndPoint="0,1">'           
		tileHolder_str += 		'	      		<GradientStop Offset="0.37" Color="#00000000"  />'      
		tileHolder_str += 		'	      		<GradientStop Offset="1" Color="#88000000"  />'
		tileHolder_str += 		'	      	</LinearGradientBrush>'          
		tileHolder_str += 		'		</Canvas.OpacityMask>'
		tileHolder_str += 		'		<Canvas.RenderTransform><TransformGroup><ScaleTransform Name="ReflectionScaleTransform_'+i+'" ScaleY="-1" ScaleX="1" CenterX="0" CenterY="0" /></TransformGroup></Canvas.RenderTransform>'
		tileHolder_str +=		'		<Image Name="imgReflection_'+i+'" Stretch="Fill" Width="'+tile_img_width+'" Height="'+tile_img_height+'" Source="'+video_directory+videoArr[i]+'.jpg" />'
		tileHolder_str +=		'	</Canvas>'
		
		tileHolder_str += 		'	<Canvas Name="imgHolder_'+i+'"  >'
		tileHolder_str += 		'		<Image Name="img_'+i+'" Stretch="Fill" Width="'+tile_img_width+'" Height="'+tile_img_height+'" MouseEnter="tileEnter" MouseLeave="tileLeave" MouseLeftButtonDown="tilePress" Source="'+video_directory+videoArr[i]+'.jpg" />'
		tileHolder_str +=		'	</Canvas>'
		tileHolder_str +=		'	 <Canvas.RenderTransform><ScaleTransform Name="st_'+i+'" ScaleX="'+scale_x+'" ScaleY="'+scale_y+'" CenterX="'+center_x+'" CenterY="'+center_y+'"/></Canvas.RenderTransform>'	
		tileHolder_str +=		'</Canvas>'	
		
		tileObjsArr[i].parent="tileHolder_"+i
		tileObjsArr[i].scaleTransform="st_"+i
	}

	tileHolder_str += '</Canvas>';	           
	//alert(tileHolder_str)
	tileHolderTag=plugin.content.createFromXaml(tileHolder_str)
	main.children.add(tileHolderTag)
}

function tilePress(s) 
{
	var ilen=String(s.name).length
	pic=s.findName("imageElement")
	s.findName("videoHolder").opacity=1
	var iIndex=String(s.name).substring(ilen,ilen-1)
	var fName=String(videoArr[iIndex]).substring(1,0)
	pic.Source=video_directory+fName+".jpg"
}


function tileEnter(s,e) {

	time_to_scale_tile=1.0
	
	var ind=s.name.split("_")[1]
	var me=tileObjsArr[ind]
	
	var par=s.findName(me.parent)
	var st=s.findName(me.scaleTransform)

	for(i=0;i<videoArr.length;i++) {
		//s.findName("tileHolder_"+i)["Canvas.ZIndex"]=0
	}
	
	par["Canvas.ZIndex"]=50
	
	if(me.tweenS2) {
		me.tweenS2.stop()
		me.tweenY2.stop()
	}
	
	me.tweenS = new Tween(new Object(),'s',Tween.strongEaseOut,st.scaleX,tile_scale_up_to,time_to_scale_tile)
	
	me.tweenS.onMotionChanged = function(event){	
		st.scaleX = event.target._pos
		st.scaleY = event.target._pos
	}
	
	me.tweenS.start()		
	


	me.tweenY = new Tween(new Object(),'y',Tween.strongEaseOut,par["Canvas.Top"],40,time_to_scale_tile)
	
	me.tweenY.onMotionChanged = function(event){	
		par["Canvas.Top"] = event.target._pos
	}
	
	me.tweenY.start()	
}

function tileLeave(s,e) {
	time_to_scale_tile=0.5
	
	var ind=s.name.split("_")[1]
	var me=tileObjsArr[ind]
	
	var par=s.findName(me.parent)
	var st=s.findName(me.scaleTransform)

	for(i=0;i<videoArr.length;i++) {
		//s.findName("tileHolder_"+i)["Canvas.ZIndex"]=0
	}
	
	par["Canvas.ZIndex"]=49
	
	me.tweenS.stop()
	me.tweenY.stop()
	
	me.tweenS2 = new Tween(new Object(),'s',Tween.strongEaseOut,st.scaleX,me.scale,time_to_scale_tile)
	
	me.tweenS2.onMotionChanged = function(event){	
		st.scaleX = event.target._pos
		st.scaleY = event.target._pos
	}
	
	me.tweenS2.onMotionFinished = function(event){	
		par["Canvas.ZIndex"]=me.z
	}	
	
	me.tweenS2.start()	
	
	
	me.tweenY2 = new Tween(new Object(),'y',Tween.strongEaseOut,par["Canvas.Top"],0,time_to_scale_tile)
	
	me.tweenY2.onMotionChanged = function(event){	
		par["Canvas.Top"] = event.target._pos
	}
	
	me.tweenY2.start()	
}

function LoadImageInStartup(s) 
{
	//var ilen=String(s.name).length
	//pic=s.findName("imageElement")
	//s.findName("videoHolder").opacity=1
	//var iIndex=String(s.name).substring(ilen,ilen-1)
	//var fName=String(videoArr[iIndex]).substring(1,0)
	//pic.Source=video_directory+fName+".jpg"
	//pic=s.findName("imageElement")
}