//	Put the following 3 statements after the title
//	<script type="text/javascript" src="XAML/SlideShowSilverlight.js"></script>
//	<script type="text/javascript" src="XAML/SlideShow.js"></script>
//	<script type="text/javascript" src="XAML/Tween.js"></script>
//
// Put all slide show images into a table with id="SlideShowTable", set width and height of display to 50
// All image should be saved with largest dimension being 375
// After table add the following div
// 	<div id="mySlideShowPlugin" style="width:600px; height:600px; border:1px solid #999; background:#000;">
//		<script type="text/javascript">
//			var parentElement = document.getElementById("mySlideShowPlugin");
//			SlideShowPlugin();
//		</script>
//	</div>

var plugin
var main
var stage_width
var contentArr=new Array()
var titleArr=new Array()
var storyArr=new Array()

var tile_img_width=375
var tile_img_height=375
var tile_spacing
var tile_top=70
var tile_scale=1
var time_to_move=0.6
var pressed=false
var screen_cnt=1

var objsArr =new Array()
objsArr["tilesHolder"]=new Object()

function mainCanvasLoaded(s) {
	//if silverlight runs then kill the other display
	document.getElementById("Noslideshow").style.display='none';
	document.getElementById("mySlideShowPlugin").style.display='block';
	document.getElementById("mySlideShowPlugin").style.height='600px';

	main=s.findName("mainCanvas")
	plugin = s.getHost()
	stage_width=600
	tile_spacing=stage_width/2+tile_img_width/2
	

	// do slide show
	var table = document.getElementById("SlideShowTable");
    var items = table.getElementsByTagName("img");
    for ( var i = 0; i < items.length; i++ ) {
    	contentArr[i]=items[i].src;		// collect image file addresses
    	titleArr[i]=items[i].title;		// collect image title
		storyArr[i]=items[i].alt;		// collect story
    }
	
	s.findName("title").text=titleArr[0]
	s.findName("title").setValue("Canvas.Left", (s.findName("infobackground").Width-s.findName("title").ActualWidth)/2)
	//s.findname("story").text=storyArr[0]
	s.findName("counter").text="1/"+contentArr.length
	
	buildImages()
	
	document.getElementById("Xyz111").innerHTML=storyArr[0]
	
}




var tilesHolder_left

function buildImages() {

	
	tilesHolder_left=stage_width/2-tile_img_width/2
	
	var tileHolder_str = '<Canvas Name="tilesHolder" Canvas.Left="'+tilesHolder_left+'" Canvas.Top="30">';	
	
	for(i=0;i<contentArr.length;i++) {		
			
		tileHolder_left=i*tile_spacing  
		tileHolderReflection_top=(tile_img_height*1.8)
		
				
		tileHolder_str += 		'<Canvas Name="tileHolder_'+i+'" Canvas.Left="'+tileHolder_left+'" Canvas.Top="'+tile_top+'" >'
		
		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.5" Color="#33000000"  />'      
		tileHolder_str += 		'	      		<GradientStop Offset="0.1" Color="#55000000"  />'
		tileHolder_str += 		'	      	</LinearGradientBrush>'          
		tileHolder_str += 		'		</Canvas.OpacityMask>'
		tileHolder_str += 		'		<Canvas.RenderTransform><TransformGroup><ScaleTransform Name="ReflectionScaleTransform_'+i+'" ScaleY="-.25" ScaleX="1" CenterX="0" CenterY="-150" /></TransformGroup></Canvas.RenderTransform>'
		tileHolder_str +=		'		<Image Name="imgReflection_'+i+'" Stretch="Uniform" Width="'+tile_img_width+'" Height="'+tile_img_height+'" Source="'+contentArr[i]+'" />'
		tileHolder_str +=		'	</Canvas>'		

		tileHolder_str += 		'	<Canvas Name="imgHolder_'+i+'"  >'
		tileHolder_str += 		'		<Image Name="img_'+i+'" Stretch="Uniform" Width="'+tile_img_width+'" Height="'+tile_img_height+'" MouseEnter="tileEnter" MouseLeave="tileLeaveX" MouseLeftButtonDown="tilePressX" Source="'+contentArr[i]+'" />'
		tileHolder_str +=		'	</Canvas>'
		
		tileHolder_str +=		'</Canvas>'	

		
	
	}


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

}


function arrowEnter(s) {
	ArrowRef=main.findName("RA")
	ArrowRef.fill="#EEE"
	ArrowRef.cursor="Hand"
	ArrowRef=main.findName("LA")
	ArrowRef.fill="#EEE"
	ArrowRef.cursor="Hand"
	s.opacity=0.7
}

function arrowLeave(s) {
	s.opacity=0.3
}

function arrowPress(s,e) {
	
	holder=objsArr["tilesHolder"]
	holderRef=s.findName("tilesHolder")
	var propX=holderRef["Canvas.Left"]
	var num=(contentArr.length-1)*tile_spacing-tilesHolder_left
	
	rightArrowRef=main.findName("arrowRight")
	leftArrowRef=main.findName("arrowLeft")

	//window.status=propX+" "+num
	
	if(!pressed) {
	
		pressed=true

		if(s.name=="arrowRight") {
			
			
			leftArrowRef.visibility="Visible"
			leftArrowRef.opacity=0.5
			
			if(propX!=-num) {
				var final_propX=propX-tile_spacing
				screen_cnt++
				if(screen_cnt==contentArr.length) {
					rightArrowRef.visibility="Collapsed"				
				}				
				
			}
			else {
				var final_propX=propX
				screen_cnt=contentArr.length
			}
		}
		else {
		
			rightArrowRef.visibility="Visible"
			rightArrowRef.opacity=0.5
			
			if(propX!=tilesHolder_left) {
				var final_propX=propX+tile_spacing
				screen_cnt--
				if(screen_cnt==1) {
					leftArrowRef.visibility="Collapsed"				
				}
			}
			else {
				var final_propX=propX
				screen_cnt=1
			}
		}


		holder.tweenX = new Tween(new Object(),'x',Tween.regularEaseOut,propX,final_propX,time_to_move)

		holder.tweenX.onMotionChanged = function(event){	
			holderRef["Canvas.Left"] = event.target._pos
		}

		holder.tweenX.onMotionFinished = function(event){
			pressed=false
				
			hdr=main.findName("counter").text=screen_cnt+"/"+contentArr.length
			hdr=main.findName("title").text=titleArr[screen_cnt-1]
			main.findName("title").setValue("Canvas.Left", (main.findName("infobackground").Width-main.findName("title").ActualWidth)/2)

			//hdr=main.findName("story").text=storyArr[screen_cnt-1]
			document.getElementById("Xyz111").innerHTML=storyArr[screen_cnt-1]
    		changeOpac(0,"Xes");
    		shiftOpacity("Xes", 1000);
		}

		
		holder.tweenX.start()	
		
	
	}

}