/*
* Container: <div id="specials_spool"></div>
*/

var MultiSpecialsSpooler = new Class({
  initialize: function(dealer){
    this.cursor = 0;
    this.limit = 4;
    var thisObj = this;
    jsonRequest = new Json.Remote(SITE_PATH+"include/json.inv.php?path="+dealer+"/Specials/json?data=rand",{
      onComplete: function(jsonSpecials){
          thisObj.jsonData = jsonSpecials;
          thisObj.init_interface();
      }}).send();
  },
  init_interface: function() {
    if (this.jsonData.length == 0) {
      return false;
    }

    var thisObj = this;


    var controlNext = new Element('a', {
        'class':'SpecSpoolControl',
        'href':'javascript: void(0);',
        'id':'SpecSpoolNext',
        'events': {
           'click': function() {
             thisObj.show_prev();
            }
         }
    });
    controlNext.setHTML("<span>Next</span>");
    $('landing_specials').appendChild(controlNext);

    var controlPrev = new Element('a', {
        'class':'SpecSpoolControl',
        'href':'javascript: void(0);',
        'id':'SpecSpoolPrev',
        'events': {
           'click': function() {
             thisObj.show_next();
            }
         }
    });
    controlPrev.setHTML("<span>Prev</span>");
    $('landing_specials').appendChild(controlPrev);

    this.show_next();
    setInterval('faux_show_next()', 6000);
  },
  show_next: function() {
    if (this.jsonData) {
	    this.remove_last("left");
	    this.animate_in("right");
    }
  },
  show_prev: function() {
    this.remove_last("right");
    this.animate_in("left");
  },
  animate_in: function(from) {
    var newCont = new Element('div');
    newCont.id = 'specBatch'+this.cursor;
    newCont.style.position = 'absolute';
    newCont.style.width = '1000px';
    newCont.setStyle('opacity', 0);
    for (var i = 0; i < this.limit; i++) {
      var veh_id = this.jsonData[this.cursor].veh_id;
      var img_id = 'spec_'+veh_id;
      var imgDiv = new Element('div', {'class':'curr_special', 'id':img_id});

      var txtVehicle = new Element('span', {'class': 'spec_spool_vehtitle'});
      txtVehicle.setText(this.jsonData[this.cursor].vehicle);

      var txtPrice = new Element('span', {'class': 'spec_spool_vehprice'});
      var price = this.jsonData[this.cursor].price;
      if (price == "0") {
        price = " ";
      } else {
        price = '$'+price;
      }
      txtPrice.setText(price);

      var txtMiles = new Element('span', {'class': 'spec_spool_vehmiles'});
      txtMiles.setText(this.jsonData[this.cursor].miles+" Miles");

      var txtStock = new Element('span', {'class': 'spec_spool_vehstock'});
      txtStock.setText("Stock #"+this.jsonData[this.cursor].stock);

      var img = new Image();
      img.veh_id = veh_id;
      img.src = this.jsonData[this.cursor].imgurl;
      $(img).addEvent('click', function() {
        window.location = "./?p_id=9&view="+this.veh_id;
      });
      $(img).addEvent('mouseover', function() { this.addClass('SpecSpoolImgOver'); })
      $(img).addEvent('mouseout', function() { this.removeClass('SpecSpoolImgOver'); })

      imgDiv.appendChild(img);
      imgDiv.appendChild(txtVehicle);
      imgDiv.appendChild(txtPrice);
      imgDiv.appendChild(txtMiles);
      imgDiv.appendChild(txtStock);


      newCont.appendChild(imgDiv);
      if (from == "left") {
        this.cursor--;
        if (this.cursor < 0) {
          this.cursor = this.jsonData.length-this.limit;
        }
      } else {
        this.cursor += this.limit;
        if (this.cursor > this.jsonData.length-1) {
          this.cursor = 0;
        }
      }
    }
    $('landing_specials_cont').appendChild(newCont);
    var fadein = new Fx.Style(newCont, 'opacity');
    var slidein = new Fx.Style(newCont, 'left');
    slidein.start((from == "left" ? -300 : 300), 0);
    fadein.start(0,1);

  },
  remove_last: function(dir) {
    if (this.pendingRemoval) {
      this.pendingRemoval.remove();
    }
    this.pendingRemoval = $('landing_specials_cont').getFirst();
    if (this.pendingRemoval) {
      this.pendingRemoval.id = "";
      var fadeout = new Fx.Style(this.pendingRemoval, 'opacity');
      var slideout = new Fx.Style(this.pendingRemoval, 'left');
      fadeout.onComplete = function() {
        this.pendingRemoval.remove();
      }
      slideout.start(0, (dir == "left" ? -300 : 300));
      fadeout.start(1,0);
    }
  }
});