var peas = [
    {url: 'pagoda.html'},
    {url: 'swine.html'},
    {url: 'hibachi.html'},
    {url: 'twinparks.html'}
];

function PeaShooter(){
    var self = this;
    this.counter = 0;
    
    this.load = function(counter){
        $('#main-pea').html('');
        $('#loader').show();
        $.ajax({
           url: peas[counter].url,
           cache: false,
           success: function(html){
               $("#main-pea").html(html);
               $('#loader').hide()
               var boxes = $('#box-container div');
               $(boxes).removeClass('active-box');
               $(boxes[counter]).addClass('active-box');
           } 
        });
    }
    this.init = function(){
        this.load(this.counter);
        $('#box-container div').click(function(){
           var counter = $('#box-container div').index(this);
           self.load(counter); 
           self.counter = counter;
        });
    }
    this.fire = function(){
        this.counter++;
        if(this.counter < peas.length)
            this.load(this.counter);
        else
            this.counter = peas.length - 1;
    }
    this.backfire = function(){
        this.counter--;
        if(this.counter > -1)
            this.load(this.counter);
        else
            this.counter = 0;
    }
}