var dynamicBoxLoader = function(id, url, components){
  this.id = id;
  this.url = url;
  this.components = components;
  this.loaderBox = $('#dynamicContainer_'+this.id).find('.loader').clone();
  this.currentIndex = 0;

  this.loadBox = function(component){
    if($.jCache.hasItem(component))
    {
      var json = $.jCache.getItem(component);
      if(json['data'] != '')
        this.updateDynamicBox(json);
    } else
    {
      $('#dynamicContainer_'+this.id).children().hide();
      $('#dynamicContainer_'+this.id).append($(this.loaderBox).show());
      $.ajax({
        type: 'GET',
        url:  this.url,
        data: {component: component, boxID: this.id},
        dataType: 'json',
        success: function(json){
          if(json['status'] == 'ok')
            $.jCache.setItem(component, json);
          if(json['status'] == 'ok' && json['data'] != '')
            eval('loader_'+json['boxID']).updateDynamicBox(json);
          else if(json['status'] == 'ok' && json['data'] == '')
          {
            eval('loader_'+json['boxID']).removeEmptyComponent(component);
            eval('loader_'+json['boxID']).loadBox(eval('loader_'+json['boxID']).components[0]);
            //$('#dynamicContainer_'+json['boxID']).children().show();
          }
        },
        complete: function(xhr){
          try{
            json = JSON.parse(xhr.responseText);
          } catch(e){ return; }
          eval('loader_'+json['boxID']).removeLoadBox();
        }
      });
    }
  };
  
  this.updateDynamicBox = function(json){
    $('#dynamicContainer_'+this.id).empty();
    $('#dynamicContainer_'+this.id).append(json['data']);
    if($(this.components).length == 1)
      return;
    var nextIndex = this.currentIndex;
    var nextLink = $('#dynamicContainer_'+this.id).find('td.rarrow');
    if($(this.components).length == this.currentIndex + 1)
      nextIndex = 0;
    else
      nextIndex += 1;
    nextLink.bind('click', {loader: this, component: this.components[nextIndex], nextIndex: nextIndex}, function(e){
      e.data.loader.currentIndex = nextIndex;
      e.data.loader.loadBox(e.data.component);
    });
    nextLink.show();
    
    var prevIndex = this.currentIndex;
    var prevLink = $('#dynamicContainer_'+this.id).find('td.larrow');
    if(this.currentIndex == 0)
      prevIndex = this.components.length - 1;
    else
      prevIndex = this.currentIndex - 1;
    prevLink.bind('click', {loader: this, component: this.components[prevIndex],  prevIndex: prevIndex}, function(e){
      e.data.loader.currentIndex = prevIndex;
      e.data.loader.loadBox(e.data.component);
    });
    prevLink.show();
  };
  
  this.removeLoadBox = function(){
    $('#dynamicContainer_'+this.id).find('.loader').remove();
  };
  
  this.initDynamicContainer = function(){
    if(typeof(this.components) == 'undefined' || this.components.length == 0 || this.components == null)
      return
    initialComponent = this.components[0];
    this.loadBox(initialComponent);
  };
  
  this.removeEmptyComponent = function(component){
    var tmpComponents = new Object();
    $.each(this.components, function(i, element){
      if(component != element)
        tmpComponents[$(tmpComponents).length - 1] = element;
    });
    this.components = tmpComponents;
    if($(this.components).length == 1)
    {
      $('#dynamicContainer_'+this.id).find('td.larrow').hide();
      $('#dynamicContainer_'+this.id).find('td.rarrow').hide();
    }
  };
};