//Create the RSXHub object

function RSXModalWindow() {
    
    //Create the modal and window
    //Return the object
    
    this.modal      =   $('<div class="RSXModal"></div>');
    this.window     =   $('<div class="RSXModalWindow">' +
                            '<a class="close"></a>' +
                        '</div>');
    
    return this;
    
}



//Adds content to the modal window

RSXModalWindow.prototype        =   {
    
    //Modal window
    
    modal   :   { } ,
    window  :   { } ,
    height  :   300 ,
    width   :   500 ,
    
    
    
    //Add content to the modal window
    
    addContent      :   function() {
        
        //Return false if there are no arguments
        //Else, handle each argument and output it
        
        if(arguments.length == 0) return false;
        else {
            
            //Append each element
            //Return true
            
            for(var i = 0; i < arguments.length; i++) $(this.window).append(arguments[i]);
            return true;
            
        }
        
    } ,
    
    //Dismiss the hub window
    
    dismiss         :   function() { $('div.RSXModal').remove(); $('div.RSXModalWindow').remove(); } ,
    
    //Remove content from within the modal window
    
    removeContent   :   function() {
        
        //Get the children of the modal window
        
        children        =   $(this.window).children();
        
        //Handle the children
        //Remove the childen if NOT the close icon
        
        for(i = children.length; i > 0; i--) {
            
            if($(children[i]) === $(this.window).find('a.close')) continue;
            else $(children[i]).remove();
            
        }
        
    } ,
    
    //Show the Modal Window
    
    show            :   function () {
        
        //Set inner text of the close icon if the screen width is less than 480px
        
        if($(window).width() < 480) $(this.window).find('a.close').text("close window");
        
        //Set the close icon and modal background to close on click action
        //Elements are not children/parents, preventing accidental dimissal of window
        
        $(this.modal).click(this.dismiss);
        $(this.window).find('a.close').click(this.dismiss);
        
        //Set the modal window background dimensions to that of the window
        //Set resize binding for the window, to resize the modal background
        
        $(this.modal).css("height", $(window).height() + "px");
        $(window).bind("resize", function() {
            
            //Resize the height of the modal window
            
            $("div.RSXModal").css("height", $(window).height() + "px");
            
            //Calculate the vertical center of the modal window
            
            $('div.RSXModalWindow').css("top", String(($(window).height()/2 - $("div.RSXModalWindow").height()/2) + "px"));
            
            //Calculate the horizontal center of the window
            //Center calculated based on device window width
            
            if($(window).width() > 480) $('div.RSXModalWindow').css("left", String(($(window).width()/2 - $("div.RSXModalWindow").width()/2) + "px"));
            else $('div.RSXModalWindow').css("left", String(($(window).width()/2 - ($(window).width() - 20)/2) + "px"));
            
        });
        
        //Set the inner modal window dimensions to that specifed by the class
        //If the window with is smaller than 480px, the width is set to mobile standards
        
        $(this.window).css("height", this.height + "px");
        
        if($(window).width() > 480) $(this.window).css("width", this.width + "px");
        else $(this.window).css("width", ($(window).width() - 20) + "px");
        
        //Calculate the vertical center of the modal window
            
        $(this.window).css("top", String(($(window).height()/2 - this.height/2) + "px"));
        
        //Calculate the horizontal center of the window
        //Center calculated based on device window width
        
        if($(window).width() > 480) $(this.window).css("left", String(($(window).width()/2 - this.width/2) + "px"));
        else $(this.window).css("left", String(($(window).width()/2 - ($(window).width() - 20)/2) + "px"));
        
        //Add the hub window as the first element of the document body
        
        $(this.window).insertBefore(document.body.childNodes[0]);
        $(this.modal).insertBefore(document.body.childNodes[0]);
        
    }
    
}