var photos_directory="../photos/"

var tn_size = 80
var tn_offset = 10
var tn_spacing = 10


var time_to_scale_image=0.5

var imgDimArr = new Array() //dim info
var imgIntArr=new Array() //intervals for checking dims
var objsArr=new Array() //corresponding objects for images 

var num_images_loaded=0
var cur_large_img
var num_images



function picsPanelLoaded(s) {
	
	
	objsArr[s.name]=new Object()
	objsArr[s.name].tweenOP = new Tween(new Object(),'op',Tween.strongEaseIn,0,1,1.5);

	objsArr[s.name].tweenOP.onMotionChanged = function(event){
		s.opacity = event.target._pos
		window.status=event.target._pos
	}
	objsArr[s.name].tweenOP.start()	
	
}

function imageProgressChanged(s) {

	per=s.downloadProgress
	s.findName(s.name+"_progressBar").width=per*60

	if(s.downloadProgress==1) {
		//alert(s.width+" "+s.height)
	}
}



function buildImages() {
	
	pc=main.findName("picsContainer")
	
	cnt=0
	
	for(j=0;j<3;j++) {
	
		for(i=0;i<10;i++) {
       
			var loader_rect_str = '<Canvas Name="canvas_image_'+cnt+'" Canvas.Left="'+((tn_size+tn_spacing)*i+tn_offset)+'" Canvas.Top="'+(j*(tn_size+tn_spacing)+tn_offset)+'">';
				loader_rect_str +=   '<Canvas Name="image_'+cnt+'_loaderBG" >'
				loader_rect_str +=   	'<Rectangle Fill="#DDD" Height="'+tn_size+'" Width="'+tn_size+'" ></Rectangle>'
				loader_rect_str +=   	'<TextBlock Canvas.Left="20" Canvas.Top="17" FontFamily="Verdana" FontSize="10">Loading</TextBlock> ';
				loader_rect_str +=   	'<Rectangle Name="image_'+cnt+'_progressBar" Fill="#555" Height="10" Width="0" Canvas.Left="10" Canvas.Top="35"></Rectangle>';
				loader_rect_str +=   	'<Rectangle Fill="transparent" Stroke="#000" Height="10" Width="60" Canvas.Left="10" Canvas.Top="35"></Rectangle>';
				loader_rect_str +=   '</Canvas>'
				loader_rect_str +=   '<Image ImageFailed="imgFailed" Loaded="imgLoaded" Opacity="0"  Name="image_'+cnt+'" MouseEnter="imgEnter" MouseLeave="imgLeave" MouseLeftButtonDown="imgPress" Source="'+photos_directory+(cnt+1)+'.jpg"  DownloadProgressChanged="imageProgressChanged"/>';
				loader_rect_str += '</Canvas>';	           
	
			loaderRectTag=plugin.content.createFromXaml(loader_rect_str)
			pc.children.add(loaderRectTag)
			
			cnt++	
		}
	}
	num_images=cnt
}




function imgFailed(s) {
	//alert("img failed "+s.source)
	//s.source="../photos/1.jpg"
}


function imgLoaded(s) {

	var tempName
	tempName=""+s.name
	s.opacity=0
	
	objsArr[s.name]=new Object()
	
	
	imgIntArr["int"+s.name]=setInterval("checkImgDims('"+tempName+"')",10)	
}


function checkImgDims(nstr) {

	imgRef=main.findName(nstr)
	
	if(imgRef.width>0 && imgRef.height>0) {
	
		//window.status+=imgRef.name+"="+imgRef.width+"x"+imgRef.height+", "
		
		imgDimArr[nstr]=new Array(imgRef.width,imgRef.height,imgRef["Canvas.Left"],imgRef["Canvas.Top"])				
		
		ratio=imgRef.width/imgRef.height
		
		if(ratio>=1) {
			imgRef.width=tn_size
			imgRef.height=tn_size/ratio
			
			diff=(tn_size-imgRef.height)/2
			imgRef["Canvas.Top"]=diff
			
		}
		else {
			imgRef.height=tn_size
			imgRef.width=tn_size*ratio
			
			diff=(tn_size-imgRef.width)/2
			imgRef["Canvas.Left"]=diff
			
		}
		
		
		imgRef.opacity=1
		
		imgRef.findName(imgRef.name+"_loaderBG").opacity=0
		
		num_images_loaded++
		
		clearInterval(imgIntArr["int"+nstr])

	}
	
}


function imgEnter(s,e) {

	//alert(objsArr[s.name].mln)
	
	window.status=s.width+"x"+s.height
	//window.status=imgDimArr[s.name][0]+"x"+imgDimArr[s.name][1]


	if(objsArr[s.name].tweenXY2) {
		objsArr[s.name].tweenXY2.stop()
		objsArr[s.name].tweenWH2.stop()
	}
	
	
	var wid=s.width
	var hgt=s.height
	var xpos=s["Canvas.Left"] 
	var ypos=s["Canvas.Top"] 
	
	if(wid/hgt>=1) {
		propWH=wid
		propXY=xpos
	}
	else {
		propWH=hgt
		propXY=ypos
	}	
	
	objsArr[s.name].tweenWH = new Tween(new Object(),'wh',Tween.strongEaseOut,propWH,100,time_to_scale_image);

	objsArr[s.name].tweenWH.onMotionChanged = function(event){
		s.width = event.target._pos
		s.height = event.target._pos
	}
	objsArr[s.name].tweenWH.start()

	
	objsArr[s.name].tweenXY = new Tween(new Object(),'xy',Tween.strongEaseOut,propXY,-10,time_to_scale_image);
	
	objsArr[s.name].tweenXY.onMotionChanged = function(event){
		s["Canvas.Left"] = event.target._pos
		s["Canvas.Top"] = event.target._pos
	}
	objsArr[s.name].tweenXY.start()
	
	


}

function imgLeave(s) {
	
	
	objsArr[s.name].tweenXY.stop()
	objsArr[s.name].tweenWH.stop()

	
	var wid=s.width
	var hgt=s.height
	var xpos=s["Canvas.Left"] 
	var ypos=s["Canvas.Top"] 	
	
	if(wid/hgt>=1) {
		propWH=wid
		propXY=xpos
	}
	else {
		propWH=hgt
		propXY=ypos
	}	
	
	objsArr[s.name].tweenWH2 = new Tween(new Object(),'',Tween.strongEaseOut,propWH,tn_size,time_to_scale_image);

	objsArr[s.name].tweenWH2.onMotionChanged = function(event){
		s.width = event.target._pos
		s.height = event.target._pos
	}
	objsArr[s.name].tweenWH2.start()
	
	
	
	objsArr[s.name].tweenXY2 = new Tween(new Object(),'',Tween.strongEaseOut,propXY,0,time_to_scale_image);
	
	objsArr[s.name].tweenXY2.onMotionChanged = function(event){
		s["Canvas.Left"] = event.target._pos
		s["Canvas.Top"] = event.target._pos
	}
	objsArr[s.name].tweenXY2.start()	
	
	
}



function imgPress(s,e) {

	ind=parseInt(s.name.split("_")[1])
	//s.findName("imagePress_"+ind).begin()
	
	s.findName("canvas_image_"+ind)
	
	objsArr[s.name].tweenXY.stop()
	objsArr[s.name].tweenWH.stop()
	
	//window.status=s.source+" "+s.width+"x"+s.height
	
	bg_size_hgt=260
	
	ratio=imgDimArr[s.name][0]/imgDimArr[s.name][1]
	
	bg_size_wid=parseInt(bg_size_hgt*ratio)
	//alert([bg_size_wid,bg_size_hgt])
	
	var left_offset=580/2-bg_size_wid/2
	
	
	pc=s.findName("picsPanel")
	
	//alert([num_images_loaded,num_images])
	
	var large_rect_str = '<Canvas Name="largeImagePanel" Canvas.Left="10" Canvas.Top="10">'
		large_rect_str +=  	'<Rectangle Fill="#444" Height="290" Width="580" Opacity="0.9"></Rectangle>'
		large_rect_str +=	'<Canvas Name="largeImgHolder" Canvas.Left="'+left_offset+'" Canvas.Top="8">'
		large_rect_str +=		'<Rectangle Fill="#FFF" Name="largeImgBG" Height="'+bg_size_hgt+'" Width="'+bg_size_wid+'"></Rectangle>'
		large_rect_str +=		'<Image Opacity="1" Cursor="Hand" MouseLeftButtonDown="largeImgPress" Name="large_image_'+ind+'" Width="'+(bg_size_wid-20)+'" Height="'+(bg_size_hgt-20)+'" Stretch="Fill" Canvas.Left="10" Canvas.Top="10" Source="'+s.source+'" />'
		large_rect_str +=	'</Canvas>'
		large_rect_str +=  	'<Canvas Canvas.Left="190" Canvas.Top="275" >'
		large_rect_str +=  	'	<Rectangle Fill="#FFF" RadiusX="5" RadiusY="5" Height="20" Width="200" ></Rectangle>'
		
		if(num_images_loaded==num_images) { //quick and dirty check for all images have downloaded
		
		large_rect_str +=  	'	<Canvas Cursor="Hand" Name="largePicScroller_Left" MouseLeftButtonDown="largePicLeftArrowPress" Canvas.Left="0" Canvas.Top="5">'
		large_rect_str +=  	'		<Rectangle Fill="#FFF" Width="10" Height="10" />'
		large_rect_str +=  	'		<Path Data="M 0,0 L4,4 4,-4z" Fill="#333" Canvas.Left="7" Canvas.Top="5" />'
		large_rect_str +=  	'	</Canvas>'
		large_rect_str +=  	'	<Canvas Cursor="Hand" Name="largePicScroller_Right" MouseLeftButtonDown="largePicRightArrowPress" Canvas.Left="185" Canvas.Top="5">'
		large_rect_str +=  	'		<Rectangle Fill="#FFF" Width="10" Height="10" />'
		large_rect_str +=  	'		<Path Data="M 0,0 L-4,4 -4,-4z" Fill="#333" Canvas.Left="7" Canvas.Top="5" />'
		large_rect_str +=  	'	</Canvas>'
		
		}
		
		large_rect_str +=  	'	<TextBlock Name="picLabel" Foreground="#333" Canvas.Left="88" Canvas.Top="2" Text="'+(ind+1)+'/'+num_images+'" FontSize="11"/>'
		large_rect_str +=  	'</Canvas>'		
		large_rect_str += '</Canvas>'       
	
		largeRectTag=plugin.content.createFromXaml(large_rect_str)
		
		pc.children.add(largeRectTag)
	
	
	cur_large_img=parseInt(ind)
	
}

function largeImgPress(s){ 
	if(largeRectTag!=null) {
	
		pc=s.findName("picsPanel")
		pc.children.remove(largeRectTag)
	}
}



//these two should be combined into one function (lazy)...

function largePicRightArrowPress(s) {
	
	//var imgRef=s.findName("large_image_"+cur_large_img)
	
	lci=s.findName("largeImagePanel")
	
	lci.children.remove(s.findName("largeImgHolder"))
	//lci.children.remove(imgRef)
	
	
	check_for_last=cur_large_img+1
	
	if(check_for_last<num_images) {
		cur_large_img=cur_large_img+1
	}
	else {
		cur_large_img=0
	}
	
	
	var ind=cur_large_img
	var file_name=(cur_large_img+1)+".jpg" //+1 for filenames (starts with 1)


	ratio=imgDimArr["image_"+ind][0]/imgDimArr["image_"+ind][1]
	bg_size_hgt=260
	bg_size_wid=parseInt(bg_size_hgt*ratio)
	
	var left_offset=580/2-bg_size_wid/2
	
	s.findName("picLabel").Text=(cur_large_img+1)+"/"+num_images
	
	var	large_img_str =  '<Canvas Name="largeImgHolder" Canvas.Left="'+left_offset+'" Canvas.Top="8">'
		large_img_str += '	<Rectangle Fill="#FFF" Name="largeImgBG" Height="'+bg_size_hgt+'" Width="'+bg_size_wid+'"></Rectangle>'
		large_img_str += '	<Image Opacity="1" Cursor="Hand" MouseLeftButtonDown="largeImgPress" Name="large_image_'+ind+'" Width="'+(bg_size_wid-20)+'" Height="'+(bg_size_hgt-20)+'" Stretch="Fill" Canvas.Left="10" Canvas.Top="10" Source="'+photos_directory+file_name+'" />';
		large_img_str += '</Canvas>'

	
		largeImgTag=plugin.content.createFromXaml(large_img_str)
		//alert(large_img_str)
	
		lci.children.add(largeImgTag)
	
}




function largePicLeftArrowPress(s) {
	
	lci=s.findName("largeImagePanel")
	lci.children.remove(s.findName("largeImgHolder"))
	
	//alert(cur_large_img)
	check_for_first=cur_large_img-1
	
	if(check_for_first>=0) {
		cur_large_img=cur_large_img-1
	}
	else {
		cur_large_img=num_images-1
	}
	
	
	var ind=cur_large_img
	var file_name=(cur_large_img+1)+".jpg" 


	ratio=imgDimArr["image_"+ind][0]/imgDimArr["image_"+ind][1]
	bg_size_hgt=260
	bg_size_wid=parseInt(bg_size_hgt*ratio)
	
	var left_offset=580/2-bg_size_wid/2
	
	s.findName("picLabel").Text=(cur_large_img+1)+"/"+num_images
	
	var	large_img_str =  '<Canvas Name="largeImgHolder" Canvas.Left="'+left_offset+'" Canvas.Top="8">'
		large_img_str += '	<Rectangle Fill="#FFF" Name="largeImgBG" Height="'+bg_size_hgt+'" Width="'+bg_size_wid+'"></Rectangle>'
		large_img_str += '	<Image Opacity="1" Cursor="Hand" MouseLeftButtonDown="largeImgPress" Name="large_image_'+ind+'" Width="'+(bg_size_wid-20)+'" Height="'+(bg_size_hgt-20)+'" Stretch="Fill" Canvas.Left="10" Canvas.Top="10" Source="'+photos_directory+file_name+'" />';
		large_img_str += '</Canvas>'

	
		largeImgTag=plugin.content.createFromXaml(large_img_str)
		//alert(large_img_str)
	
		lci.children.add(largeImgTag)
	
}