var handle;
var downloader;

var thumbs=new Array();
var thumbwidth=80;
var thumbheight=80;

var imagecount=18;

var centerX,radiusX;
var centerY,radiusY;

var roty=0;
var active=true;
var selected=false;


function createCarousel(domref) {

    Silverlight.createObjectEx({
        source: 'gallery.xaml',
        parentElement: document.getElementById(domref),
        id: domref,
        properties: {
            width: '579', 
            height: '500', 
            inplaceInstallPrompt: false, 
            background: '#FFFFFF',
            framerate: '24',
            version: '1.0',
            enableHtmlAccess: 'true'
        },
        events: {
            onError: null, 
            onLoad: slonload },
        initParams: null
    });
}

function slonload(control,usercontext,sender) {

    handle = sender;
    downloader = sender.getHost().CreateObject("downloader");
    downloader.addEventListener("Completed",imageLoaded);

    // Retrieve canvas properties and size/locate carousel appropriately
    var content=sender.getHost().content;
    //centerX=(content.actualWidth/2)-(thumbwidth/2)+10;
    centerX=290-(thumbwidth/2)+10;
    radiusX=centerX-(thumbwidth/4);
    centerY=110;
    radiusY=centerY-(thumbheight/2);

    loadImages();
}


// ---------- Mouse events for thumbnail images ----------

function thumbMouseEnter(sender) {
	var i=sender.name.split("_")[1]
	sender.findName("frame_"+i).fill="#0095da"
}

function thumbMouseLeave(sender) {
	var i=sender.name.split("_")[1]
	sender.findName("frame_"+i).fill="#000000"
}

function thumbButtonDown(sender) {

        // take the file part of the the thumb path and use it as the image file name
	// pass the request to the media downloader
	filename=sender.source.split("/")[1]
        downloader.open("GET","images/"+filename);
        downloader.send();

        selected=true;
}

// ---------- Mouse events for main image ----------

function imageButtonDown(sender) {

        // fade the image and send to the back
        handle.findName("fadeout").begin();
        sender.findName("selectedImageCanvas")["Canvas.ZIndex"]=0;
        selected=false;
}

// ---------- Mouse events for the outer canvas ----------

function mainMouseEnter() {
    active=true;
}

function mainMouseLeave() {
    active=false;
}

function MouseMove(sender, e) {	
	var pointer = e.getPosition(null);
	mouseX = pointer.x;
	roty=((centerX-mouseX)/centerX) * 0.05;
}

// ---------- Create a thumbnail canvas for each image and start animation loop ----------

function loadImages() {
    for(i=0;i<imagecount;i++) {
	thumbfile="thumbs/lib"+i+".jpg";

	xaml='<Canvas Name="thumb_'+i+'" Canvas.Left="0" Canvas.Top="0">';
	xaml+='  <Rectangle Name="frame_'+i+'" Canvas.Top="-1" Canvas.Left="-1" Fill="#000" Height="82" Width="82"></Rectangle>'
	xaml+='  <Image Cursor="Hand" MouseEnter="thumbMouseEnter" MouseLeave="thumbMouseLeave" MouseLeftButtonDown="thumbButtonDown" Stretch="UniformToFill" Name="thumbimage_'+i+'" Height="'+thumbheight+'" Width="'+thumbwidth+'" Source="'+thumbfile+'" Opacity="1" />'

	xaml+= 	'<Canvas Canvas.Top="160" Opacity="1">'
	xaml+= 	' <Canvas.OpacityMask>'
	xaml+= 	'   <LinearGradientBrush  StartPoint="0,0" EndPoint="0,1">'           
	xaml+= 	'     <GradientStop Offset="0.3" Color="#00000000"  />'      
	xaml+= 	'     <GradientStop Offset="1" Color="#60000000"  />'
	xaml+= 	'    </LinearGradientBrush>'          
	xaml+= 	' </Canvas.OpacityMask>'
	xaml+= 	' <Canvas.RenderTransform><TransformGroup><ScaleTransform ScaleY="-1" ScaleX="1" CenterX="0" CenterY="0" /></TransformGroup></Canvas.RenderTransform>'		
	xaml+=	' <Image Stretch="UniformToFill" Height="'+thumbheight+'" Width="'+thumbwidth+'" Source="'+thumbfile+'" />'
	xaml+=	'</Canvas>'		

	xaml+='  <Canvas.RenderTransform><ScaleTransform Name="thumbScale_'+i+'" ScaleX="1" ScaleY="1" CenterX="0.5" CenterY="0.5"/></Canvas.RenderTransform>'			
	xaml+='</Canvas>';

	xamlcont=handle.getHost().content.createFromXaml(xaml)
	handle.findName("carousel").children.add(xamlcont)		
		
	thumbs["thumb_"+i]=new Object()
	thumbs["thumb_"+i].angle=i*((Math.PI*2)/imagecount)
	
    }

    drawItems();
    redrawInt=setInterval("redraw()",40);
}

// ---------- Image swapping ----------

function imageLoaded(sender,evntArgs) {
    handle.findName("selectedImage").setSource(sender,"");
    handle.findName("selectedImageCanvas")["Canvas.ZIndex"]=200;
    handle.findName("fadein").begin();
}


// ---------- Animation loop ----------

function redraw() {
    if(active && !selected) { drawItems() }
}


function drawItems() {
    for(i=0;i<imagecount;i++) {
        // position
        var angle=thumbs["thumb_"+i].angle;
	var tx=Math.cos(angle)*radiusX + centerX;
	var ty=Math.sin(angle)*radiusY + centerY;
	handle.findName("thumb_"+i)["Canvas.Left"]=tx;
	handle.findName("thumb_"+i)["Canvas.Top"]=ty;

        // scale & opacity
        var scale=0.4+(0.6*(ty/(centerY+radiusY)));
	var thumbscale=handle.findName("thumbScale_"+i);
	thumbscale.scaleX=scale;
	thumbscale.scaleY=scale;
	handle.findName("thumb_"+i)["Opacity"]=scale;

	// Z-index
	handle.findName("thumb_"+i)["Canvas.ZIndex"]=parseInt(ty);

	// rotate around y-axis
        angle+=roty;
        if (angle>Math.PI*2) angle-=Math.PI*2;
        if (angle<0) angle+=Math.PI*2;
	thumbs["thumb_"+i].angle=angle;
    }
}