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


//the Javascript object here should define function specific to your webpart, but not specific 
//to an instance of a part (unless you pass in the name of the silverlight control  based on ClientID)

BinaryJamSFSPart.createDelegate = function(instance, method) {
    return function() {
       return method.apply(instance, arguments);
   }
}

BinaryJamSFSPart.Scene = function(myId, resourcePath) 
{
    this.id = myId;
    this.ClassResourcePath=resourcePath;
    this.PhotoItemsUrls= new Array();
    this.PhotoItems= new Array();
    this.clickDelegate=BinaryJamSFSPart.createDelegate(this, this.onPhotoItemClicked);
    this.NewLeftValue=0;
}

BinaryJamSFSPart.Scene.prototype =
{

    
    handleScrollPicturesLeftOn: function(sender, eventArgs)
    {
        this.ScrollingLeft=true;
        this.ScrollingRight=false;
        this.scrollTimer.begin();
    },
    
    handleScrollPicturesLeftOff: function(sender, eventArgs)
    {
        this.ScrollingLeft=false;
        this.ScrollingRight=false;
        
    
    },

    handleScrollPicturesRightOn: function(sender, eventArgs)
    {
    //boo;
        this.ScrollingLeft=false;
        this.ScrollingRight=true;
        this.scrollTimer.begin();
    },
    
    handleScrollPicturesRightOff: function(sender, eventArgs)
    {
        this.ScrollingLeft=false;
        this.ScrollingRight=false;
    
    },

    handleSliderShow: function(sender, eventArgs)
    {
        this.ShowSlider.begin();
        this.Showing=true;
    },

   handleSliderHide: function(sender, eventArgs)
    {
        if (this.Showing) {
            this.HideSlider.begin();
            this.Showing=false;
        }
    },    
    scrollTimerCompleted: function(sender, eventArgs)
    {
            
        if(this.ScrollingLeft )
        {

            this.PictureSelectScroll["Canvas.Left"] += 5;
            if (this.PictureSelectScroll["Canvas.Left"] > 0)
            {
              this.PictureSelectScroll["Canvas.Left"] = 0;
            }
            else
                this.scrollTimer.begin();
        }
        else if(this.ScrollingRight )
        {

            var tmpWidth=(this.PictureSelectScroll.Width - this.PictureSelect.Width);
            if (tmpWidth < 0) return;
            
            this.PictureSelectScroll["Canvas.Left"] -= 5;
            if (this.PictureSelectScroll["Canvas.Left"] < (tmpWidth*-1))
                this.PictureSelectScroll["Canvas.Left"] = (tmpWidth*-1);
            else            
                this.scrollTimer.begin();
        }
        
    },
    
    // 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("Timeline1").Begin();
        this.control.content.fullScreen = !this.control.content.fullScreen;
    },
    

   
   
   onPhotoItemClicked: function(sender,photoUrl,index) {
       if(this.CurrentIndex>=0)
           this.PhotoItems[this.CurrentIndex].target.findname("WhiteRec")["Fill"]="#FFFFFF";
       this.CurrentIndex=index;
       this.MainImage.Source=photoUrl;
       this.PhotoItems[this.CurrentIndex].target.findname("WhiteRec")["Fill"]="#ABABAB"; 
   },
   
    onKeyUp:function (sender, keyEventArgs) {
        if (keyEventArgs.key == 14) //Left
        {
            if ((this.CurrentIndex - 1) >= 0)
            {
               
               this.PhotoItems[this.CurrentIndex].target.findname("WhiteRec")["Fill"]="#FFFFFF";
               this.CurrentIndex--;
               this.PhotoItems[this.CurrentIndex].target.findname("WhiteRec")["Fill"]="#ababab";

                this.MainImage.Source=this.PhotoItems[this.CurrentIndex].photoUrl;

                var tmp=((this.CurrentIndex+1) * (this.ItemWidth + 5)); // Calculate items "Right" value

                if(tmp < ((this.NewLeftValue - this.ItemWidth) * -1) )
                {
                   var tmp1=this.NewLeftValue;
                   this.NewLeftValue=(tmp-5-this.PhotoItems[this.CurrentIndex].target.Width)*-1;
                    this.scrollIntoView.stop();
                    this.scrollIntoView.findname("XFrom").value = tmp1;
                    this.scrollIntoView.findname("XTo").value = this.NewLeftValue;
                    this.scrollIntoView.begin();                    
                    
                }
                
            }
               
        }
        if (keyEventArgs.key == 16) //Right
        {
            if ((1 + this.CurrentIndex) < this.PhotoItems.length)
            {
                this.PhotoItems[this.CurrentIndex].target.findname("WhiteRec")["Fill"]="#FFFFFF";
               this.CurrentIndex++;
               this.PhotoItems[this.CurrentIndex].target.findname("WhiteRec")["Fill"]="#ababab";
                this.MainImage.Source=this.PhotoItems[this.CurrentIndex].photoUrl;
                
                var tmp=((this.CurrentIndex+1) * (this.ItemWidth + 5)); // Calculate items "Right" value

                if(tmp > this.PictureSelect.Width - this.NewLeftValue)
                {
                   var tmp1=this.NewLeftValue;
                   this.NewLeftValue=(tmp - this.PictureSelect.Width) * -1;
                    this.scrollIntoView.stop();
                    this.scrollIntoView.findname("XFrom").value = tmp1;
                    this.scrollIntoView.findname("XTo").value = this.NewLeftValue;
                    this.scrollIntoView.begin();

                }
           }
        }

   },


    // Resizes the XAML scene to fill the browser
    resize: function(sender, eventArgs) {

        var sourceWidth = sender.findName("root").width;
        var targetWidth = this.control.content.actualWidth;
        var sourceHeight = sender.findName("root").height;
        var targetHeight = this.control.content.actualHeight;
           
        var scaleX = 0;
        var scaleY = 0;
        if (sourceHeight > 0 && sourceWidth > 0) {
            scaleX = targetWidth / sourceWidth;
            scaleY = targetHeight / sourceHeight;
        }
           
        var scaleTransform = sender.findName("scaleTransform");
        scaleTransform.scaleX = scaleX;
        scaleTransform.scaleY = scaleY ;
    },
    
    
    handleLoad: function(control, userContext, rootElement) 
    {
        this.control = control;
        this.PictureSelect = rootElement.findname("PictureSelect");
        this.PictureSelectScroll = this.PictureSelect.findname("PictureSelectScroll");
        this.MainImage = rootElement.findname("MainImage");
        this.Showing=false;
        
        rootElement.findname("FullScreen").addEventListener("MouseLeftButtonDown", BinaryJamSFSPart.createDelegate(this, this.handleMouseDown));

        // Hook the plug-in's resize event
        this.control.content.onResize= BinaryJamSFSPart.createDelegate(this, this.resize) ;
        // Hook the plug-in's resize event
        this.control.content.onFullScreenChange=BinaryJamSFSPart.createDelegate(this, this.resize) ;

        this.resize(rootElement, null);
        
        
        this.downloader = this.control.createObject("downloader");
       this.downloader.addEventListener("completed", BinaryJamSFSPart.createDelegate(this, this.downloadCompleted) );
       this.downloader.open('GET', this.ClassResourcePath + "/PhotoItem.xaml");
       this.downloader.send();
       
       rootElement.findname("ScrollPicturesLeft").addEventListener("MouseEnter", BinaryJamSFSPart.createDelegate(this, this.handleScrollPicturesLeftOn));
       rootElement.findname("ScrollPicturesLeft").addEventListener("MouseLeave", BinaryJamSFSPart.createDelegate(this, this.handleScrollPicturesLeftOff));
       
       rootElement.findname("ScrollPicturesRight").addEventListener("MouseEnter", BinaryJamSFSPart.createDelegate(this, this.handleScrollPicturesRightOn));
       rootElement.findname("ScrollPicturesRight").addEventListener("MouseLeave", BinaryJamSFSPart.createDelegate(this, this.handleScrollPicturesRightOff));
    
        rootElement.findname("CanvasMouseOver").addEventListener("MouseEnter", BinaryJamSFSPart.createDelegate(this, this.handleSliderShow));
        rootElement.findname("CanvasMouseOut").addEventListener("MouseEnter", BinaryJamSFSPart.createDelegate(this, this.handleSliderHide));
        
        rootElement.addEventListener("KeyUp", BinaryJamSFSPart.createDelegate(this, this.onKeyUp));

    
        this.scrollTimer = rootElement.findName("timer");
        this.ShowSlider =  rootElement.findName("ShowSlider");
        this.HideSlider =  rootElement.findName("HideSlider");
        this.scrollTimer.addEventListener("completed", BinaryJamSFSPart.createDelegate(this, this.scrollTimerCompleted) );
       this.scrollIntoView = rootElement.findName("ScrollIntoView");
       
    }    
}



BinaryJamSFSPart.Scene.prototype.downloadCompleted = function(sender, eventArgs) 
{
   
   var photoItem;
   var delegate=BinaryJamSFSPart.createDelegate(this, this.onPhotoItemClicked)
   for (var i =0; i< this.PhotoItemsUrls.length; i++)
   {
       // Fill out the template and create a Silverlight element
       photoItem=new BinaryJamSFSPartPhotoItem(this.control, sender.responseText, i , delegate, this.PhotoItemsUrls[i] );
       this.PictureSelectScroll.children.add(photoItem.target);
       this.PhotoItems.push(photoItem);
       
   }

    if (this.PhotoItemsUrls.length>0)
    {
        this.MainImage.Source=this.PhotoItems[0].photoUrl;
        this.PictureSelectScroll.Width = ((5 + photoItem.target.Width) * (this.PhotoItemsUrls.length)) + 5;
   }
   
   if (this.PhotoItemsUrls.length>0) 
   {
        this.ItemWidth=this.PhotoItems[0].Width;
       var photoItemInstance=this.PhotoItems[0].target;
       this.MainImage.Source=this.PhotoItems[0].photoUrl;
       photoItemInstance.findname("WhiteRec")["Fill"]="#ABABAB"; 
       this.CurrentIndex=0;
       this.PictureSelectScroll.Width = ((5 + photoItemInstance.Width) * (this.PhotoItems.length)) + 5;
   }  
}

function BinaryJamSFSPartPhotoUrls(photoUrl, thumbnailUrl) {
   this.photoUrl = photoUrl;
   this.thumbnailUrl = thumbnailUrl;
}

function BinaryJamSFSPartPhotoItem(control, xamlText, index, clickHandler, photoItem) {
   
   var templateInstance = control.content.createFromXaml(xamlText, true);
    
    this.Width = templateInstance.Width;
    this.target = templateInstance;
    this.index = index;
    this.clickHandler = clickHandler;
    this.photoUrl=photoItem.photoUrl;
    this.thumbnailUrl=photoItem.thumbnailUrl
    this.bigImageSource=null;
    this.okToClick=false;
   // Position the item in items canvas
   this.target["Canvas.Left"] = ((index+1) * (this.target.Width + 5)) - this.target.Width;
   this.target["Canvas.Top"] = 5;
   this.target.addEventListener("MouseLeftButtonDown", BinaryJamSFSPart.createDelegate(this, this.handleMouseLeftButtonDown));
   this.target.findName("Image").Source=this.thumbnailUrl; 
   
   this.target.addEventListener("MouseEnter", BinaryJamSFSPart.createDelegate(this, this.handleMouseEnter));
   this.target.addEventListener("MouseLeave", BinaryJamSFSPart.createDelegate(this, this.handleMouseLeave));

   return this;
}

BinaryJamSFSPartPhotoItem.prototype.handleMouseEnter = function(sender, eventArgs) {

   this.target.findName("ZoomIn").begin();
   

}

BinaryJamSFSPartPhotoItem.prototype.handleMouseLeave = function(sender, eventArgs) {

    this.target.findName("ZoomOut").begin();
   
}

BinaryJamSFSPartPhotoItem.prototype.handleMouseLeftButtonDown = function(sender, eventArgs) {

   this.clickHandler(sender, this.photoUrl, this.index);

}