﻿var plugin
var main
var stage_width

var video_directory="imagenes/fotos/"
var videoArr=new Array("foto_01_g","foto_02_g","foto_03_g","foto_04_g","foto_05_g")



var tile_img_width=90
var tile_img_height=50
var tile_spacing=0

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


var tileObjsArr=new Array()



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

	tileObjsArr[i]=new Object()
	
	//tileObjsArr[i].x=i*tile_spacing
	tileObjsArr[i].x=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
		}
		nextspot=tile_spacing+(tile_img_width*tile_scale)+22
		tile_scale+=0.3
		tile_spacing=nextspot
	}
	else {
		tile_z-=1
		tile_scale-=0.3
		nextspot=tile_spacing+tile_img_width*tile_scale+22
		tile_spacing=nextspot
	}
}


tileHolder_width=tileObjsArr[videoArr.length-1].x + tileObjsArr[videoArr.length-1].width
//tileHolder_width=i*tile_spacing


function mainCanvasLoaded(s) {

	//alert("main loaded")
		
	main=s.findName("mainCanvas")
	plugin = s.getHost()

	//stage_width=plugin.content.actualWidth	
	stage_width=plugin.width	
	
	buildImages()
}






function buildImages() {

	var tileHolder_str = '<Canvas Name="tilesHolder" Canvas.Left="'+(stage_width/2-tileHolder_width/2)+'" Canvas.Top="270" Background="#00000000">';	
	
	for(i=0;i<videoArr.length;i++) {
	
		//tileObjsArr[i]=new Object()
		
		
		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+'" Background="#00000000">'
		
		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 +=		'		<Image Name="imgReflection_'+i+'" Stretch="Fill" Width="50" Height="50" 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" Cursor="Hand" />'
//		tileHolder_str += 		'		<Image Name="img_'+i+'" Stretch="Fill" Width="50" Height="50" 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].scale_x=scale_x
		//tileObjsArr[i].scale_y=scale_y
		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) {
	vid=s.findName("videoElement")
	s.findName("videoHolder").opacity=1
	var index=s.name.split("_")[1]
	
	vid.source=video_directory+videoArr[index]+".jpg"
	//vid.autoPlay=false;
}

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"],(me.y+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.7
	
	var ind=s.name.split("_")[1]
	var me=tileObjsArr[ind]
	
	time_to_scale_tile= (tile_scale_up_to-me.scale)
	
	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()
	
	diff=st.scaleX-(st.scaleX-me.scale)/3
	
	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()	
		
}