var ModalImage =    Class.create(ModalObject,
                    {
                        /* Image properties */
                        ImageDiv: null,
                        Src: '',                            //holds the image location to show    
                        OriginalHeight: 0,                  //Original height of the image
                        OriginalWidth: 0,                   //Original width of the image
                        ResizedHeight: 0,                   //The height of the image after it is resized
                        ResizedWidth: 0,                    //The width of the image after it is resized
                        ImagePosition: null,                //Determines the position of the image
                        Margin : 40,                        //The margin kept from the border of the screen
                        
                        /* Shadow properties */
                        ShadowDiv: null,
                        AddShadow: true,                    //Cast a shadow as big as the image
                        ShadowOffSetTop: 5,                 //Offset of the top shadow
                        ShadowOffSetLeft: 5,                //Offset of the left shadow
                        ShadowColor: '#000000',             //The color of the shadow
                        ShadowTransparancy: 0.6,            //The transparancy of the shadow

                        /* Image border properties */
                        BorderDiv: null,
                        AddBorder: true,                    //Add a border around the image
                        BorderSize: 5,                      //The width of the border
                        BorderColor: '#FFFFFF',             //The color of the border.
                        BorderWidth: 0,                     //Holds the width of the border
                        BorderHeight: 0,                    //Holds the height of the border
                        BorderPosition: new Position(0,0),               //Holds the position of the border.
                    
                        /*
                            constructor for this class
                        */
                        initialize: function($super, id, zIndex, imageObject)
                                            {                                               
                                                //Call the base class constructor;
                                                $super(id, zIndex);
                                                
                                                //Initialize this object.
                                                this.Src = imageObject.src;
                                                this.OriginalHeight = imageObject.height;
                                                this.OriginalWidth = imageObject.width;
                                                this.ImagePosition = new Position(0,0);
                                            },
                    
                        Show:   function($super)
                                {
                                    //show the base class
                                    $super();
                                    
                                    //Before we can show first calculate the positions and sizes
                                    this.ShowImageElements();
                                    
                                },
                         
                         Hide:  function($super)
                                {
                                    //Execute function of base
                                    $super();
                                    
                                    //Remove the fullscreen Image
                                    if($(this.Id + '_ModalImagePicture'))
                                        $(this.Id + '_ModalImagePicture').remove();
                                        
                                    if($(this.Id + '_ModalImageBorder'))
                                        $(this.Id + '_ModalImageBorder').remove();    
                                        
                                    if($(this.Id + '_ModalImageShadow'))
                                        $(this.Id + '_ModalImageShadow').remove();    
                                },
                                
                         /*
                            This function will calculate the maximum size of the image and prepare
                            the border and shadow.
                         */
                         ShowImageElements:   function()
                                                    {
                                                        //Calculate the current maximum sizes for the image.
                                                        this.SetMaximumSizeForScreen();
                                                        this.SetImagePosition();
                                                    
                                                        this.InitializeImageElement();    
                                                        this.InitializeBorderElement();
                                                        this.InitializeShadowElement();
                                                    },
                                                    
                         /*
                            This function will determine the maximum size for the image to still
                            fit on the screen. The Image is not resized bigger than it actually
                            is.
                         */
                         SetMaximumSizeForScreen: function()
                                                  {

                                                    var screenHeight = document.viewport.getHeight();
                                                    var screenWidth = document.viewport.getWidth();
                                                    var ScaleFactor = 1;
    
                                                    //check if the image is smaller than the screen.
                                                    if(this.OriginalHeight > screenHeight || this.OriginalWidth > screenWidth)
                                                    {
                                                        //not ok Image needs to be resized;
                                                        if(this.OriginalHeight > this.OriginalWidth)
                                                        {
                                                            //Determine rescale factor (screen height minus the margin);
                                                            ScaleFactor =  (screenHeight - (this.Margin * 2)) / this.OriginalHeight;
                                                            
                                                            //If the Width is still bigger then the available width let's refactor it
                                                            //on this side
                                                            if( (this.OriginalWidth * ScaleFactor) >= (screenWidth - (this.Margin * 2)) )
                                                            {
                                                                //resize it so that the width fits on the screen.
                                                                ScaleFactor = (screenWidth - (this.Margin * 2)) / this.OriginalWidth;
                                                            }
                                                            
                                                        }
                                                        else
                                                        {
                                                            //Determine rescale factor
                                                            ScaleFactor = (screenWidth - (this.Margin * 2)) / this.OriginalWidth;
                                                            
                                                            
                                                            //If the Width is still bigger then the available width let's refactor it
                                                            //on this side
                                                            if( (this.OriginalHeight * ScaleFactor) >= (screenHeight - (this.Margin * 2)) )
                                                            {                                                
                                                                //resize it so that the width fits on the screen.
                                                                ScaleFactor = (screenHeight - (this.Margin * 2)) / this.OriginalHeight;
                                                            }
                                                        }
                                                    }
                                                    
                                                    //rescale the image with the scaling factor.
                                                    this.ResizedWidth = this.OriginalWidth * ScaleFactor;
                                                    this.ResizedHeight = this.OriginalHeight * ScaleFactor; 
                                                  },
                                                  
                            /*
                                This function will determine the position on the screen for this image
                                
                                Also keep in mind that we could have some scrollbars
                            */                 
                            SetImagePosition:   function()
                                                {
                                                
                                                    var ScrollBarOffset_x = document.viewport.getScrollOffsets()[0];
                                                    var ScrollBarOffset_y = document.viewport.getScrollOffsets()[1];
                                                
                                                    var x;
                                                    var y;
                                                
                                                    if(this.AddBorder)
                                                    {                                
                                                        x = ( (document.viewport.getWidth() - (this.ResizedWidth + this.BorderSize) ) / 2);
                                                        y = ( (document.viewport.getHeight() - (this.ResizedHeight+ this.BorderSize) ) / 2);
                                                    }
                                                    else
                                                    {
                                                        x = ( (document.viewport.getWidth() - (this.ResizedWidth) ) / 2);
                                                        y = ( (document.viewport.getHeight() - (this.ResizedHeight) ) / 2);
                                                    }
                                                    
                                                    x = x + ScrollBarOffset_x;
                                                    y = y + ScrollBarOffset_y;
                                                    
                                                    this.ImagePosition = new Position(x, y);
                                                },
                                                                                                           
                                                    
                         InitializeImageElement: function()
                                                 {   
                                                    if(this.ImageDiv == null)
                                                    { 
                                                        this.ImageDiv = document.createElement('img');
                                                        this.ImageDiv.setAttribute('id', this.Id + '_ModalImagePicture');                                                                                 
                                                        this.ImageDiv.setAttribute('src', this.Src);                                                                
                                                        
                                                        document.body.appendChild(this.ImageDiv);
                                                        $(this.Id + '_ModalImagePicture').setStyle("position: absolute;");
                                                        $(this.Id + '_ModalImagePicture').setStyle("z-index: " + this.ZIndex + 3);
                                                    }
                                                    
                                                    //these properties are dynamic so set them again because size could have changed.
                                                    $(this.Id + '_ModalImagePicture').setStyle("width: " + this.ResizedWidth + "px");
                                                    $(this.Id + '_ModalImagePicture').setStyle("height: " + this.ResizedHeight + "px");
                                                    $(this.Id + '_ModalImagePicture').setStyle("left: " + this.ImagePosition.x + "px");
                                                    $(this.Id + '_ModalImagePicture').setStyle("top: " + this.ImagePosition.y + "px");
                                                 },
                                                 
                                                 
                            InitializeBorderElement: function()
                                                     {
                                                     
                                                        if(this.AddBorder)
                                                        {
                                                            if(this.BorderDiv == null)
                                                            {
                                                                this.BorderDiv = document.createElement('div');                                
                                                                this.BorderDiv.setAttribute('id', this.Id + '_ModalImageBorder');   
                                                                
                                                                document.body.appendChild(this.BorderDiv);
                                                                $(this.Id + '_ModalImageBorder').setStyle("position: absolute;"); 
                                                                $(this.Id + '_ModalImageBorder').setStyle("z-index: " + this.ZIndex + 2);
                                                            }
                                                            
                                                            //determine the position of the border.
                                                            this.BorderPosition = new Position((this.ImagePosition.x - this.BorderSize), (this.ImagePosition.y - this.BorderSize));
                                                            this.BorderWidth = (this.ResizedWidth + this.BorderSize + this.BorderSize);
                                                            this.BorderHeight = (this.ResizedHeight +  this.BorderSize + this.BorderSize);                                    
                                                        
                                                            $(this.Id + '_ModalImageBorder').setStyle("width: " + this.BorderWidth + "px");
                                                            $(this.Id + '_ModalImageBorder').setStyle("height: " + this.BorderHeight + "px");
                                                            $(this.Id + '_ModalImageBorder').setStyle("left: " + this.BorderPosition.x + "px");
                                                            $(this.Id + '_ModalImageBorder').setStyle("top: " + this.BorderPosition.y + "px");
                                                            $(this.Id + '_ModalImageBorder').setStyle("background-color: " + this.BorderColor); 
                                                        }
                                                     },
                                         
                            /*
                                This function will create the shadow element for the image.
                            */            
                            InitializeShadowElement:    function()
                                                        {
                                                            if(this.AddShadow)
                                                            {
                                                            
                                                                if(this.ShadowDiv == null)
                                                                {    
                                                                    this.ShadowDiv = document.createElement('div');
                                                                    this.ShadowDiv.setAttribute('id',this.Id + '_ModalImageShadow');   
                                                                    
                                                                    document.body.appendChild(this.ShadowDiv);
                                                                    $(this.Id + '_ModalImageShadow').setStyle("position: absolute;"); 
                                                                    $(this.Id + '_ModalImageShadow').setStyle("z-index: " + this.ZIndex + 1);   
                                                                }
                                                                
                                                                $(this.Id + '_ModalImageShadow').setStyle("background-color: " + this.ShadowColor);
                                                                $(this.Id + '_ModalImageShadow').setStyle("opacity: " + this.ShadowTransparancy);
                                                                this.ShadowDiv.style.filer = "alpha(opacity=" + (this.ShadowTransparancy * 100) + ")";

                                                                                                                                
                                                                //If a border is present the shadow must also be with this width.                                
                                                                if(this.AddBorder)
                                                                {                                         
                                                                    $(this.Id + '_ModalImageShadow').setStyle("width: " + this.BorderWidth + "px");
                                                                    $(this.Id + '_ModalImageShadow').setStyle("height: " + this.BorderHeight + "px");
                                                                    $(this.Id + '_ModalImageShadow').setStyle("left: " + (this.BorderPosition.x + this.ShadowOffSetLeft) + "px");
                                                                    $(this.Id + '_ModalImageShadow').setStyle("top: " + (this.BorderPosition.y + this.ShadowOffSetTop) + "px");                                                                                           
                                                                }
                                                                else
                                                                {
                                                                
                                                                    $(this.Id + '_ModalImageShadow').setStyle("width: " + this.ResizedWidth + "px");
                                                                    $(this.Id + '_ModalImageShadow').setStyle("height: " + this.ResizedHeight + "px");
                                                                    $(this.Id + '_ModalImageShadow').setStyle("left: " + (this.ImagePosition.x + this.ShadowOffSetLeft) + "px");
                                                                    $(this.Id + '_ModalImageShadow').setStyle("top: " + (this.ImagePosition.y + this.ShadowOffSetTop) + "px");
                                                                }
                                                            
                                                            
                                                            }
                                                        },
                                                        
                     Resize: function($super)
                            {   
                                //call the parent class
                                $super();
                                
                                //var mainId = this.getAttribute('ModalObjectId');
                                //var myImage = FullScreenDict[mainId];
                                
                                //myImage.Show();
                            }
                                                 
                    });
                    



/*
    Position class
*/
function Position(x, y)
{
    this.x = x;
    this.y = y;
}