friendsModal = Class.create({
  initialize: function(userId, username, link_element, total_items, options) {

    this.userId = userId;
    this.username = username;
    this.link_element  = link_element;
	this.current_offset = 0;
	this.total_items = total_items;
    
    this.options = {
			itemsPerPage: 10
		};

        // this line extends the options to overide the default options.
        Object.extend(this.options, options || {});


        // load up the modal window object
        this.modal = new Control.Modal($(this.link_element),{  
            overlayOpacity: 0.1,
            className: 'modal',
            position: 'center',
            closeOnClick: false
         }); 

        this.modal.container.insert(this.setTemplate());
        
        // check if we even need the load more link
        // remove the link cuzzz we dont need this stinkin' thang.....    :()
        if(this.total_items < this.options.itemsPerPage)
        {
             // remove the link to load more comments
             $('next-button').hide();
        }
        
        // load the initial friends
        this.load_next(true);
        
        // observe the close
        Event.observe($('trigger'), 'click', this.closeModal.bind(this));  

        Event.observe($('next-button'), 'click', this.load_next.bind(this));
        

        Event.observe($('previous-button'), 'click', this.load_previous.bind(this));
    },
    
    setTemplate: function() {
        var template = '<h2 id="friends-box-h2">'+this.username+'\'s Friends<a href="#user-friends" class="close" id="trigger">Close</a></h2><div id="friends-box" class="clearfix"><a id="previous-button" class="next" href="javascript:void(0)" style="display:none;">&laquo; Previous</a><div id="friend-content"></div><a id="next-button" class="next" href="javascript:void(0)">Next &raquo;</a></div>';
    
        return template;
    },
    
    closeModal: function(){
        this.modal.close();
    },
    
    load_next: function(first) {
    
        // calculate the offset for the querie
        if(first != true)
        {
            if(this.current_offset < this.total_items)
            {
                this.current_offset = (this.current_offset + this.options.itemsPerPage);
            }
        }
        
        // now lets do a killer ajax request
        
        // setup the blessed params
        params = {
            offset: this.current_offset,
            userId: this.userId
        };
  
        // AJAX Time!!
        new Ajax.Updater('friend-content', baseUrl + '/ajax/friends/get/format/html', {
            parameters: params,
            onCreate: this.loadWait,
            evalScripts: true,
            onComplete: this.complete.bindAsEventListener(this),
          method: 'post'
        });

    },
    
       load_previous: function() {

        // calculate the offset for the querie
        if(this.current_offset > 0)
        { 
            this.current_offset = (this.current_offset - this.options.itemsPerPage);
        }
        
        // setup the blessed params
        params = {
            offset: this.current_offset,
            userId: this.userId
        };
  
        // AJAX Time!!
        new Ajax.Updater('friend-content', baseUrl + '/ajax/friends/get/format/html', {
            parameters: params,
            onCreate: this.loadWait,
            evalScripts: true,
            onComplete: this.complete.bindAsEventListener(this),
          method: 'post'
        });
        
    },
    
    complete: function() {

        // check to see if we should remove the "Load more comments" link
        if((this.current_offset + this.options.itemsPerPage) >= this.total_items)
        {        
            //remove the link
            $('next-button').hide(); 
        }
        else
        {
            $('next-button').show();
        }
        
        // hide or show the previous button
        if(this.current_offset > 0)
        {
            $('previous-button').show();
        }
        else
        {
           $('previous-button').hide();
        }
    },
    
    loadWait: function() {
        
        $('friend-content').update('<center><img src="' + baseUrl + '/img/ajax-loader.gif"/></center>');
    }
    
});