if (!window.PhotoViewer)
	window.PhotoViewer = {};

var SilverlightUI = {};

SilverlightUI.Anchor = function() {};

SilverlightUI.Anchor.prototype.AnchoredControls = new Array();
SilverlightUI.Anchor.prototype.AnchorLeftAry = new Object();
SilverlightUI.Anchor.prototype.AnchorRightAry = new Object();
SilverlightUI.Anchor.prototype.AnchorTopAry = new Object();
SilverlightUI.Anchor.prototype.AnchorBottomAry = new Object();
SilverlightUI.Anchor.prototype.Width = new Object();
SilverlightUI.Anchor.prototype.Height = new Object();
SilverlightUI.Anchor.prototype.AnchorLeftOffsetAry = new Object();
SilverlightUI.Anchor.prototype.AnchorRightOffsetAry = new Object();
SilverlightUI.Anchor.prototype.AnchorTopOffsetAry = new Object();
SilverlightUI.Anchor.prototype.AnchorBottomOffsetAry = new Object();

SilverlightUI.Anchor.prototype.GetParentWidth = function(ctl)
{
    if (ctl.toString() == "Canvas" && ctl.GetParent() == null)
    {
        return ctl.GetHost().content.actualWidth;
    }
    else
    {
        return ctl.GetParent().Width;
    }
}

SilverlightUI.Anchor.prototype.GetParentHeight = function(ctl)
{
    if (ctl.toString() == "Canvas" && ctl.GetParent() == null)
    {
        return ctl.GetHost().content.actualHeight;
        //return ctl.Height;
    }
    else
    {
        return ctl.GetParent().Height;
    }
}

SilverlightUI.Anchor.prototype.AddAnchor = function(ctl, AnchorLeft, AnchorRight, AnchorTop, AnchorBottom)
{
    var ParentWidth, ParentHeight;
    ParentWidth = this.GetParentWidth(ctl);
    ParentHeight = this.GetParentHeight(ctl);
    this.AnchoredControls.push(ctl.Name);
    this.AnchorLeftAry[ctl.Name] = AnchorLeft;
    this.AnchorRightAry[ctl.Name] = AnchorRight;
    this.AnchorTopAry[ctl.Name] = AnchorTop;
    this.AnchorBottomAry[ctl.Name] = AnchorBottom;
    this.Width[ctl.Name] = ctl.Width;
    this.Height[ctl.Name] = ctl.Height;
    this.AnchorLeftOffsetAry[ctl.Name] = ctl["Canvas.Left"];
    this.AnchorRightOffsetAry[ctl.Name] = ParentWidth - (ctl["Canvas.Left"] + ctl.Width);
    this.AnchorTopOffsetAry[ctl.Name] = ctl["Canvas.Top"];
    this.AnchorBottomOffsetAry[ctl.Name] = ParentHeight - (ctl["Canvas.Top"] + ctl.Height);
}

SilverlightUI.Anchor.prototype.RemoveAnchor = function(ctl)
{
    if (this.AnchoredControls.indexOf(ctl.Name) > -1)
    {
        this.AnchoredControls.splice(this.AnchoredControls.indexOf(ctl), 1);
    }
}

SilverlightUI.Anchor.prototype.AdjustPosition = function(ctl)
{
    if (this.AnchoredControls.indexOf(ctl.Name) > -1)
    {
    var ParentWidth, ParentHeight;
    ParentWidth = this.GetParentWidth(ctl);
    ParentHeight = this.GetParentHeight(ctl);

        if (this.AnchorLeftAry[ctl.Name] == true)
        {
            //if left anchor is true, anchor it to the left
            ctl["Canvas.Left"] = this.AnchorLeftOffsetAry[ctl.Name];
            //if left and right are both anchored, stretch the control
            if (this.AnchorRightAry[ctl.Name] == true)
            {
                ctl.Width = ParentWidth - ctl["Canvas.Left"] - this.AnchorRightOffsetAry[ctl.Name];
            }
        }
        else if (this.AnchorRightAry[ctl.Name] == true)
        {
            //anchoring to the right, but not to the left
            ctl.Width = this.Width[ctl.Name];
            ctl["Canvas.Left"] = ParentWidth - this.AnchorRightOffsetAry[ctl.Name] - this.Width[ctl.Name];
        }
        else
            //no anchor
            ctl.Width = this.Width[ctl.Name];



        if (this.AnchorTopAry[ctl.Name] == true)
        {
            //if Top anchor is true, anchor it to the Top
            ctl["Canvas.Top"] = this.AnchorTopOffsetAry[ctl.Name];
            //if Top and Bottom are both anchored, stretch the control
            if (this.AnchorBottomAry[ctl.Name] == true)
            {
                ctl.Height = ParentHeight - ctl["Canvas.Top"] - this.AnchorBottomOffsetAry[ctl.Name];
            }
        }
        else if (this.AnchorBottomAry[ctl.Name] == true)
        {
            //anchoring to the Bottom, but not to the Top
            ctl.Height = this.Height[ctl.Name];
            ctl["Canvas.Top"] = ParentHeight - this.AnchorBottomOffsetAry[ctl.Name] - this.Height[ctl.Name];
        }
        else
            //no anchor
            ctl.Height = this.Height[ctl.Name];
    }
}

SilverlightUI.Anchor.prototype.AdjustAllPositions = function(canvas)
{
    if (canvas.GetParent() != null)
    {
        this.AdjustPosition(canvas);
        }
    for (var i = 0; i < canvas.Children.count; i++)
    {
        var child = canvas.Children.GetItem(i);
        if (child.toString() == "Canvas")
            this.AdjustAllPositions(child);
        else
            this.AdjustPosition(child);
    }
}

PhotoViewer.Page = function() 
{
        this.ImageCollection = new Array();
        this.ImageDescriptionCollection = new Array();
}

//PhotoViewer.Page.prototype.ImageCollection = new Array();

PhotoViewer.Page.prototype =
{
	handleLoad: function(control, userContext, rootElement) 
	{
	MyAlert('load control=' + control + ' (id=' + control.id + ')');
	    //have a pointer on the control to this instance of photoviewer
	    control.PV = this;
	MyAlert('load control=' + control + ' (PV=' + control.PV + ')');
	//set global javascript variable to this control
		this.control = control;
		//set up controls i want to access view global variable
		this.MainCanvas = this.control.content.findName("Page");

	        this.MainCanvas.GetHost().PV = this;

            MyAlert('content=' + this.MainCanvas.GetHost());

MyAlert(this.MainCanvas.GetHost().parentNode);
	        this.MainCanvas.GetHost().parentNode.PV = this;

            MyAlert('this.MainCanvas.GetHost().parentNode.PV = ' + this.MainCanvas.GetHost().parentNode.PV);

	    MyAlert('maincanvas host=' + this.MainCanvas.GetHost().id);
	    MyAlert('getelement=' + document.getElementById(control.id).PV);
	    MyAlert('gethost source=' + this.MainCanvas.GetHost().Source);

		this.btnFullScreen = this.control.content.findName("btnFullScreen");
		this.canBtnFullScreen = this.control.content.findName("canBtnFullScreen");
		this.recImage = this.control.content.findName("recImage");
		this.imgMain = this.control.content.findName("imgMain");
		this.recImageRibbon = this.control.content.findName("recImageRibbon");
		this.recRibbonNext = this.control.content.findName("recRibbonNext");
		this.recRibbonPrev = this.control.content.findName("recRibbonPrev");
		this.canThumbnails = this.control.content.findName("canThumbnails");
		this.canThumbnailScroll = this.control.content.findName("canThumbnailScroll");
		this.imgZoomer = this.control.content.findName("imgZoomer");
		this.canDetails = this.control.content.findName("canDetails");
		this.tabDetails = this.control.content.findName("tabDetails");
		this.lblDetail = this.control.content.findName("lblDetail");
		this.canRightTabs = this.control.content.findName("canRightTabs");
		this.styRibbonScroll = this.control.content.findName("styRibbonScroll");

	    //set anchor values
        var Anchor = new SilverlightUI.Anchor();
        //Anchor.AddAnchor(this.MainCanvas, true, true, true, true);
        Anchor.AddAnchor(this.recImage, true, true, true, true);
        Anchor.AddAnchor(this.imgMain, true, true, true, true);
        Anchor.AddAnchor(this.recImageRibbon, true, true, false, true);
        Anchor.AddAnchor(this.canThumbnails, true, true, false, true);
        //Anchor.AddAnchor(PhotoViewer.canThumbnailScroll, true, true, true, true);
        Anchor.AddAnchor(this.recRibbonPrev, true, false, false, true);
        Anchor.AddAnchor(this.recRibbonNext, false, true, false, true);
        Anchor.AddAnchor(this.canBtnFullScreen, false, true, true, false);
        Anchor.AddAnchor(this.recRibbonPrev, true, false, false, true);
        Anchor.AddAnchor(control.content.findName("btnFullScreen"), true, true, true, true);
        Anchor.AddAnchor(control.content.findName("lblFullScreen"), true, true, true, true);
        Anchor.AddAnchor(control.content.findName("canRightTabs"), false, true, true, false);
        control.PV.Anchor = Anchor;

		//hook up control events
		this.btnFullScreen.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.GoFullScreen));
		this.tabDetails.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.DetailShow));
		this.canDetails.addEventListener("MouseLeave", Silverlight.createDelegate(this, this.DetailHide));
		this.recRibbonNext.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.HandleRibbonNextButton));
		this.recRibbonPrev.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.HandleRibbonPrevButton));
	    this.styRibbonScroll.addEventListener("completed", Silverlight.createDelegate(this, this.HandleRibbonScrollCompleted));

		//hook up silverlight events
		this.control.content.onResize = this.HandleResize;
		this.control.content.onFullScreenChange = this.HandleResize;
		this.NumImages = 0;
		this.RibbonSpacing = 10;
		this.CurrentRibbonPosition = 0;
		this.ThumbnailWidthModifier = 1.5;

        MyAlert('beforetimeout');
        var JavaCommand = "document.getElementById('" + control.id + "').PV.OnLoadComplete()";
        setTimeout(JavaCommand, 100);
        MyAlert('after timeout');
	},
	
	OnLoadComplete : function()
	{
	    MyAlert('onloadcomplete start');
        var PV = this;
	    MyAlert('PV.donewithload');
		PV.DoneWithLoad = true;
	    MyAlert('PV.handleresize + maincanvas=' + this.MainCanvas);
		PV.HandleResize(this.MainCanvas);
	    MyAlert('PV.addimagefunction');
        if (PV.AddImageFunction != undefined)
		    PV.AddImageFunction();
		MyAlert('PV.AddImagesFromCollection');
        PV.AddImagesFromCollection(PV.control);
	MyAlert('onloadcomplete');
	},
	
	// Sample event handler
	handleMouseDown: function(sender, eventArgs) 
	{
		// The following line of code shows how to find an element by name and call a method on it.
		// this.control.content.findName("Storyboard1").Begin();
	},
	
	GoFullScreen : function()
    {
	    this.control.content.fullScreen = !this.control.content.fullScreen ;
    },

	DetailShow : function(s, e)
    {
	    this.control.content.findName("DetailShow").begin();
    },

	DetailHide : function(s, e)
    {
	    this.control.content.findName("DetailHide").begin();
    },

    HandleResize : function(s, e)
    {
    MyAlert('resize');
    //MyAlert('s=' + s + '(id=' + s.id + ')');
    MyAlert('s.GetHost=' + s.GetHost());
    MyAlert('s.control=' + s.GetHost().control);
        var PV = s.GetHost().PV;
MyAlert('after getting pv:' + PV);
        //MyAlert('handleresize' + PV.control.content.actualWidth + '/' + PV.control.content.actualHeight);

        //this needs to be included for anchoring
        MyAlert('donewithload=' + PV.DoneWithLoad);
        if (PV.DoneWithLoad == true)
        {
            PV.MainCanvas.Width = PV.control.content.actualWidth;
            PV.MainCanvas.Height = PV.control.content.actualHeight;
		    MyAlert('resize-AdjustAllPositions');
            PV.Anchor.AdjustAllPositions(PV.MainCanvas);
            //this is specific to the control
		    var Xaml = '<RectangleGeometry Rect="0, 0, ' + PV.canThumbnails.Width + ', ' + PV.canThumbnails.Height + '" />';
		    var clip = PV.control.content.CreateFromXaml(Xaml);
		    PV.canThumbnails.Clip = clip;
		    MyAlert('resize-HandleButtonDisplay');
		    PV.HandleButtonDisplay(PV.control);
        }
    },
    
    RemoveAllImages : function(s)
    {
        //TODO: NEED TO FINISH THIS
    },
    
    AddImagesFromCollection : function(s)
    {
        for (var i = 0; i < s.PV.ImageCollection.length; i++)
        {
            s.PV.AddImage(s.PV.ImageCollection[i], s.PV.ImageDescriptionCollection[i], (i == 0));
        }
        s.PV.HandleButtonDisplay(s.PV.control);
    },
	
	AddImage : function(ImageURL, ImageDesc, LoadImmediately)
	{
	    var ThumbnailWidth = this.canThumbnails.Height * this.ThumbnailWidthModifier;

        //add thumbnail
	    Xaml = '<Image xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" IsHitTestVisible="False" x:Name="Thumbnail' + this.NumImages + '" OpacityMask="#FF000000" Source="' + ImageURL + '"/>';
		var thumbnail = this.control.content.CreateFromXaml(Xaml);
		this.canThumbnailScroll.children.add(thumbnail);
		
		thumbnail.Width = ThumbnailWidth - 2;
		thumbnail.Height = this.canThumbnails.Height - 4;
		thumbnail["Canvas.Left"] = this.RibbonSpacing * (this.NumImages + 1) + ThumbnailWidth * this.NumImages + 1;
		thumbnail["Canvas.Top"] = 2;

        //add border
        var Xaml = '<Rectangle Cursor="Hand" Width="' + ThumbnailWidth + '" Height="' + (this.canThumbnails.Height - 2) + '" Stroke="#FF847979" Canvas.ZIndex="1" Fill="Transparent" StrokeThickness="2" />';
		var border = this.control.content.CreateFromXaml(Xaml);
		this.canThumbnailScroll.children.add(border);
		border["Canvas.Left"] = this.RibbonSpacing * (this.NumImages + 1) + ThumbnailWidth * this.NumImages;
		border["Canvas.Top"] = 1;
        
		this.NumImages += 1;

		border.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, function() {this.LoadImage(thumbnail, border, ImageDesc)}));
		border.addEventListener("MouseEnter", Silverlight.createDelegate(this, function() {this.LoadImage(thumbnail, border, ImageDesc)}));
		//border.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.LoadImage));

        //change width of thumb container 
		this.canThumbnailScroll.Width = this.GetAllThumbnailWidth(this.control);
		
		if (LoadImmediately == true)
		    this.LoadImage(thumbnail, border, ImageDesc);
	},
	
	LoadImage : function(img, border, ImageDesc)
	{
	    //change details text
        if (ImageDesc == undefined || ImageDesc == null || ImageDesc.trim() == '')
        {
            this.lblDetail.Text = "- No details -";
            this.canDetails.Visibility = "Collapsed";
        }
        else
        {
            this.lblDetail.Text = ImageDesc;
            this.canDetails.Visibility = "Visible";
        }

 	    //set others back to gray
        for (var i = 0; i < this.canThumbnailScroll.Children.count; i++)
        {
            var child = this.canThumbnailScroll.children.GetItem(i);
            if (child.toString() == "Rectangle")
                child.Stroke = "#FF847979";
        }
 
	    this.NewImage = img.Source;
	    this.ZoomImage(img, this.imgMain["Canvas.Left"], this.imgMain["Canvas.Top"], this.imgMain.Width, this.imgMain.Height);
	    border.Stroke = "#FF000000";
	},
	
	ZoomImage : function(image, ToX, ToY, ToWidth, ToHeight)
	{
	    if (this.control.content.findName("ImageZoomOut") != null)
	        this.MainCanvas.resources.remove(this.control.content.findName("ImageZoomOut"));
	    this.imgZoomer.Width = image.Width;
	    this.imgZoomer.Height = image.Height;
		this.imgZoomer["Canvas.Left"] = this.canThumbnailScroll["Canvas.Left"] + image["Canvas.Left"] + this.canThumbnails["Canvas.Left"];
		this.imgZoomer["Canvas.Top"] = this.canThumbnails["Canvas.Top"] + image["Canvas.Top"];
		this.imgZoomer.Source = image.Source;
		var StoryboardXaml = '<Storyboard xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="ImageZoomOut">' + 
					'<DoubleAnimation Storyboard.TargetName="imgZoomer" Storyboard.TargetProperty="(Canvas.Left)" To="' + ToX + '" Duration="0:0:.2" />' + 
					'<DoubleAnimation Storyboard.TargetName="imgZoomer" Storyboard.TargetProperty="(Canvas.Top)" To="' + ToY + '" Duration="0:0:.2" />' + 
					'<DoubleAnimation Storyboard.TargetName="imgZoomer" Storyboard.TargetProperty="Width" To="' + this.imgMain.Width + '" Duration="0:0:.2" />' + 
					'<DoubleAnimation Storyboard.TargetName="imgZoomer" Storyboard.TargetProperty="Height" To="' + this.imgMain.Height + '" Duration="0:0:.2" />' + 
				'</Storyboard>';
		var Storyboard = this.control.content.CreateFromXaml(StoryboardXaml);
		this.MainCanvas.resources.add(Storyboard);
		Storyboard.addEventListener("completed", Silverlight.createDelegate(this, this.ZoomImageCompleted));
		Storyboard.begin();
	},
	
	ZoomImageCompleted : function(s, e)
	{
    var PV = s.GetHost().PV;
	PV.imgMain.Source = PV.NewImage;
	PV.MainCanvas.resources.remove(s);
	PV.imgZoomer.Source = null;
	},
	
	HandleRibbonNextButton : function(s)
	{
	    var PV = s.GetHost().PV;

	    var ScrollCanvasLeft = PV.canThumbnailScroll["Canvas.Left"];

	    if (ScrollCanvasLeft - PV.canThumbnails.Width > PV.GetAllThumbnailWidth(s.GetHost()) * -1)
	    {
	        PV.control.content.findName("RibbonScrollAnimationKF1").Value = ScrollCanvasLeft - 20;
	        PV.control.content.findName("RibbonScrollAnimationKF2").Value = ScrollCanvasLeft - (PV.canThumbnails.Width - 40);
	        PV.control.content.findName("RibbonScrollAnimationKF3").Value = ScrollCanvasLeft - PV.canThumbnails.Width;
	        PV.styRibbonScroll.begin();
	    }
	},
	
	HandleRibbonPrevButton : function(s)
	{
	    var PV = s.GetHost().PV;

	    var ScrollCanvasLeft = PV.canThumbnailScroll["Canvas.Left"];
	    if (ScrollCanvasLeft < 0)
	    {
	        if (ScrollCanvasLeft + PV.canThumbnails.Width > 0)
	        {
	            PV.control.content.findName("RibbonScrollAnimationKF1").Value = ScrollCanvasLeft + 20;
	            PV.control.content.findName("RibbonScrollAnimationKF2").Value = ScrollCanvasLeft + (PV.canThumbnails.Width - 40);
	            PV.control.content.findName("RibbonScrollAnimationKF3").Value = 0;
	            PV.styRibbonScroll.begin();
	        }
	        else
	        {
	            PV.control.content.findName("RibbonScrollAnimationKF1").Value = ScrollCanvasLeft + 20;
	            PV.control.content.findName("RibbonScrollAnimationKF2").Value = ScrollCanvasLeft + (PV.canThumbnails.Width - 40);
	            PV.control.content.findName("RibbonScrollAnimationKF3").Value = ScrollCanvasLeft + PV.canThumbnails.Width;
	            PV.styRibbonScroll.begin();
	        }
	    }
	},
	
	HandleRibbonScrollCompleted : function(s)
	{
	    var PV = s.GetHost().PV;
	    PV.HandleButtonDisplay(PV.control);
	},
	
	HandleButtonDisplay : function(s)
	{
	    var PV = s.PV;
	    var ScrollCanvasLeft = PV.canThumbnailScroll["Canvas.Left"];

	    //next button
	    //MyAlert(PV.canThumbnailScroll["Canvas.Left"] - PV.canThumbnails.Width + ',' + PV.GetAllThumbnailWidth(s) * -1);
	    if (PV.canThumbnailScroll["Canvas.Left"] - PV.canThumbnails.Width > PV.GetAllThumbnailWidth(s) * -1)
	    {
	        this.recRibbonNext.Visibility = "Visible";
	    //MyAlert('next made visible');
        }
        else
        {
        	        this.recRibbonNext.Visibility = "Collapsed";
	    //MyAlert('next made collapsed');
        	        }
        //prev button
	    if (ScrollCanvasLeft < 0)
	        this.recRibbonPrev.Visibility = "Visible";
        else
            this.recRibbonPrev.Visibility = "Collapsed";

	},
	
	GetAllThumbnailWidth : function(s)
	{
	    var PV = s.PV;
    	var ThumbnailWidth = PV.canThumbnails.Height * PV.ThumbnailWidthModifier;
	    return PV.RibbonSpacing * (PV.NumImages + 1) + ThumbnailWidth * this.NumImages;
	},
	
	GetPV : function(s)
	{
	    
	}
}

function MyAlert(txt)
{
    //document.getElementById('errorLocation').innerHTML = txt + "<br>" + document.getElementById('errorLocation').innerHTML;
}