//flyout gallery

function GetFlyoutGalleryController(nextImageButtonId, previousImageButtonId, submitButtonId, imgDisplyId, mainPanelId, imageList, numberOfItems) {
   
    this.flyoutGallery_previousImageIndex = 0;
    this.flyoutGallery_nextImageIndex = 0;
    this.flyoutGallery_numberOfGalleryItems = numberOfItems;
    this.flyoutGallery_images = imageList;
    this.flyoutGallery_nextImageButton = document.getElementById(nextImageButtonId);
    this.flyoutGallery_previousImageButton = document.getElementById(previousImageButtonId);
    this.flyoutGallery_submitButton = document.getElementById(submitButtonId);
    this.flyoutGallery_imgDisply = document.getElementById(imgDisplyId);
    this.flyoutGallery_mainPanel = document.getElementById(mainPanelId);
       
    //for displaying image in the flyout gallery panel
    this.flyoutGallery_showImageView = function (galleryIndex) {           

        // set indexs to previous and next gallery images
        this.flyoutGallery_previousImageIndex = galleryIndex - 1;
        this.flyoutGallery_nextImageIndex = galleryIndex + 1;

        if (this.flyoutGallery_nextImageIndex >= this.flyoutGallery_numberOfGalleryItems)
            this.flyoutGallery_nextImageIndex = 0;

        if (this.flyoutGallery_previousImageIndex < 0)
            this.flyoutGallery_previousImageIndex = this.flyoutGallery_numberOfGalleryItems - 1;

        //load the image
        var this_ref = this;
        preloadImage = new Image();
        preloadImage.onload = function () {        
            this_ref.flyoutGallery_imgDisply.style.width = preloadImage.width + 'px';
            this_ref.flyoutGallery_mainPanel.style.width = (preloadImage.width + 20) + 'px';
            this_ref.flyoutGallery_imgDisply.style.height = preloadImage.height + 'px';
            this_ref.flyoutGallery_mainPanel.style.height = (preloadImage.height + 20) + 'px';
            this_ref.flyoutGallery_imgDisply.src = preloadImage.src;
        }     
        preloadImage.src = this.flyoutGallery_images[galleryIndex];
       
        //trigger animation
        if (this.flyoutGallery_submitButton.disabled == false) //only if flyout gallery is not showing
        {
            this.flyoutGalleryPositioning();
            this.flyoutGallery_submitButton.click();
        }             

    }


    //reset the flyout gallery panel to default position
    this.flyoutGalleryPositioning = function () {
           
        var ScrollTop = document.body.scrollTop; //get current vertical scroll offset
        if (ScrollTop == 0) {
            if (window.pageYOffset)
                ScrollTop = window.pageYOffset;
            else
                ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
        }

        var topPadding = ScrollTop + 30;
        var leftPadding = 0;
      
        this.flyoutGallery_mainPanel.style.top = topPadding + 'px';
        this.flyoutGallery_mainPanel.style.left = leftPadding + 'px';  
          
    }  


    //go to previous image
    this.flyoutGallery_gotoPerviousImage = function () {
       
        this.flyoutGallery_imgDisply.src = '/Assets/Images/icons/loading.gif';           
        this.flyoutGallery_showImageView(this.flyoutGallery_previousImageIndex);
    }

    //go to next image
    this.flyoutGallery_gotoNextImage = function () {
        
        this.flyoutGallery_imgDisply.src = '/Assets/Images/icons/loading.gif';           
        this.flyoutGallery_showImageView(this.flyoutGallery_nextImageIndex);
    }
    

}