if( !this.WeaponsApp ){ 
  WeaponsApp = {
    dataFileName : 'weaponsData.1.0.3.json',
    init: function()
    {
      jQuery('#tmpView').remove();
      this.viewController = new WeaponsApp.ViewController();
      this.model = new WeaponsApp.WeaponsModel( this.dataFileName );
      if( this.model )
      {
        this.viewController.addWeaponViewer( this.model );
        this.viewController.addWeaponViewer( this.model );
      }else
      {
        console.log( "no model" );
      }
    }
  }
}

( function()
{
  WeaponsApp.WeaponsModel = function( fileName )
  {
    var _data = eval(jQuery.ajax({
      type: "GET",
      url: "/data/" + fileName,
      dataType: "json",
      async: false
    }).responseText );
    return {
      getWeaponsAtIndex : function( index )
      {
        return ( index >= 0 && index < _data.length ) ? _data[index] : false;
      },
      getMaxIndex : function()
      {
        return _data.length - 1;
      }
    }
  }

  WeaponsApp.WeaponViewer = function( model )
  {
    var _index = 0;

    var model = model;
    var currentDataIndex = 0;
    var currentData = model.getWeaponsAtIndex( currentDataIndex );
    var maxIndex = model.getMaxIndex();
    var view = jQuery( '<div class="weaponViewer"></div>' );

    var upArrow =  new WeaponsApp.UpArrow();
    var downArrow =  new WeaponsApp.DownArrow();
    var arrowWrapper = jQuery('<div class="arrowWrapper"></div>');
    arrowWrapper.append( upArrow.view );
    arrowWrapper.append('<img src="/img/weaponsApp/arrowSep.png" alt="--" />');
    arrowWrapper.append( downArrow.view );
    view.append( arrowWrapper );
    downArrow.disable();

    var dataWrapper = jQuery('<div class="dataWrapper"><p class="weaponType">WEAPON TYPE</p></div>');
    var ravenDataView = new WeaponsApp.DataView( 'raven' );
    var valorDataView = new WeaponsApp.DataView( 'valor' );
    var sverDataView = new WeaponsApp.DataView( 'sver' );
    ravenDataView.displayData( currentData[0] );
    valorDataView.displayData( currentData[1] );
    sverDataView.displayData( currentData[2] );
    dataWrapper.append( ravenDataView.view );
    dataWrapper.append( valorDataView.view );
    dataWrapper.append( sverDataView.view );
    view.append( dataWrapper );
    jQuery('.weaponType', dataWrapper).text( currentData[0].type );

    return {
      attachTo : function( parentEl )
      {
         parentEl.append( view );
      },
      remove : function()
      {
        view.remove();
      },
      setIndex : function( newVal )
      {
        _index = newVal;
        view.data("index", _index);
      },
      getIndex : function()
      {
        return _index;
      },
      nextData : function()
      {
        if( currentDataIndex + 1 <= maxIndex )
        {
          if( currentDataIndex == 0 )
          {
            downArrow.enable();
          }
          currentDataIndex++;
          currentData = model.getWeaponsAtIndex( currentDataIndex );
          this.updateDataViews();
          this.updateWeaponType();
          if( currentDataIndex == maxIndex)
          {
            upArrow.disable();
          }
        }
      },
      previousData : function()
      {
        if( currentDataIndex - 1 >= 0 )
        {
          if( currentDataIndex == maxIndex )
          {
            upArrow.enable();
          }
          currentDataIndex--;
          currentData = model.getWeaponsAtIndex( currentDataIndex );
          this.updateDataViews();
          this.updateWeaponType();
          if( currentDataIndex == 0 )
          {
            downArrow.disable();
          }
        }
      },
      updateDataViews : function()
      {
        ravenDataView.displayData( currentData[0] );
        valorDataView.displayData( currentData[1] );
        sverDataView.displayData( currentData[2] );
      },
      updateWeaponType : function()
      {
        jQuery('.weaponType', dataWrapper).text( currentData[0].type );
      }
    }
  }

  WeaponsApp.ViewController = function()
  {
    var view = jQuery('#wrapper_site');
    var subviews = [];
    return {
      addWeaponViewer : function( model )
      {
        var newView = new WeaponsApp.WeaponViewer( model );
        this.addSubview( newView );
      },
      addSubview : function( newView )
      { 
        subviews.push( newView );
        newView.setIndex( subviews.length - 1 );
        newView.attachTo( view );
      },
      handleDownArrow : function( index )
      {
        //console.log("down",index);  
        subviews[index].previousData();
      },
      handleUpArrow : function( index )
      {
        //console.log("up",index);  
        subviews[index].nextData();
      }
    }
  }

  WeaponsApp.UpArrow = function( parentView )
  {
    var view = jQuery( '<p><img src="/img/weaponsApp/upArrow.png" alt="Up Arrow" /></p>' );
    view.click( function()
    {
      var dad = jQuery(this).closest('.weaponViewer');
      WeaponsApp.viewController.handleUpArrow( dad.data("index") );
    });
    return {
      view : view,
      disable : function()
      {
        jQuery('img',this.view).addClass('disabledArrow');
      },
      enable : function()
      { 
        jQuery('img', this.view).removeClass('disabledArrow');
      }
    }
  }

  WeaponsApp.DownArrow = function()
  {
    var view = jQuery( '<p><img src="/img/weaponsApp/downArrow.png" alt="Down Arrow" /></p>' );
    view.click( function()
    {
      var dad = jQuery(this).closest('.weaponViewer');
      WeaponsApp.viewController.handleDownArrow( dad.data("index") );
    });
    return {
      view : view,
      disable : function()
      {
        jQuery('img',this.view).addClass('disabledArrow');
      },
      enable : function()
      { 
        jQuery('img', this.view).removeClass('disabledArrow');
      }
    }
  }

  WeaponsApp.DataView = function( faction )
  {
    var myHTML = '<div class="dataViewWrapper ' + faction + 'View">'
    myHTML += '<div class="dataViewImageWrapper"><img class="itemImage" /></div>';
    myHTML +=    '<div class="dataViewNameWrapper"><p class="dataViewNameLabel">NAME</p><p class="dataViewSubTypeLabel">subtype</p></div>';
    myHTML +=    '<div class="dataViewCapacityWrapper"><p class="dataViewSmallLabel">capacity</p><p class="dataViewCapacityLabel">00</p></div>';
    myHTML += '<ul class="dataViewStatsList">';
    myHTML += '<li><p class="dataViewSmallLabel">Accuracy</p><div class="dataViewStatBarWrapper"><img class="accuracyBar" src="/img/weaponsApp/statBar.gif" alt="bar" /></div><p class="dataViewStatValueLabel accuracyValue">.50</p></li>';
    myHTML += '<li><p class="dataViewSmallLabel">Stability</p><div class="dataViewStatBarWrapper"><img class="stabilityBar" src="/img/weaponsApp/statBar.gif" alt="bar" /></div><p class="dataViewStatValueLabel stabilityValue">.50</p></li>';
    myHTML += '<li><p class="dataViewSmallLabel">Rate</p><div class="dataViewStatBarWrapper"><img class="rateBar" src="/img/weaponsApp/statBar.gif" alt="bar" /></div><p class="dataViewStatValueLabel rateValue">.50</p></li>';
    myHTML += '<li><p class="dataViewSmallLabel">Damage</p><div class="dataViewStatBarWrapper"><img class="damageBar" src="/img/weaponsApp/statBar.gif" alt="bar" /></div><p class="dataViewStatValueLabel damageValue">.50</p></li>';
    myHTML += '</ul>';
    myHTML += '</div>';
    return  {
      view : jQuery(myHTML),
      displayData : function( data )
      {
        jQuery('.dataViewNameLabel', this.view).text( data.name );
        jQuery('.dataViewSubTypeLabel', this.view).text( data.category );
        jQuery('.itemImage',this.view).attr("src",'/img/itemThumbs/'+data.image);
        jQuery('.dataViewCapacityLabel', this.view).text( data.capacity );
        var acc =  this.calculateValue( data.accuracy );
        jQuery('.accuracyValue', this.view).text( data.accuracy );
        jQuery('.accuracyBar', this.view).css('width',acc+'px').css('height','15px');
        var stab =  this.calculateValue( data.stability );
        jQuery('.stabilityBar', this.view).css('width',stab+'px').css('height','15px');
        jQuery('.stabilityValue', this.view).text( data.stability );
        var rate =  this.calculateValue( data.rate );
        jQuery('.rateBar', this.view).css('width',rate+'px').css('height','15px');
        jQuery('.rateValue', this.view).text( data.rate );
        var dmg =  this.calculateValue( data.damage );
        jQuery('.damageBar', this.view).css('width',dmg+'px').css('height','15px');
        jQuery('.damageValue', this.view).text( data.damage );
      },
      calculateValue : function( val )
      {
        return Math.round(  ( val / 8 ) * 100 );
      }
    }
  }

})();

jQuery( document ).ready( function()
{
  WeaponsApp.init();
});