/* Floor plan requires scriptaculous 1.8.3
 * Pete @ futuremedium.com.au wrote this.
 * */

if (typeof Effect == 'undefined') 
    throw ("floorplan requires including script.aculo.us' effects.js library!");


var floorplan = Class.create();
floorplan.prototype = {
  
  floorplanDiv: 'floorplan',
  hiddenField: 'floorPlanData',
  addID: 'add',
  removeID: 'delete',
  submitID: 'submit2',
  imgSrcListID: 'floorplanSrc',
  STARTX: 5,
  STARTY: 45,
  imgSelection: null,
  locationList: [],
  selected: null,

  initialize: function() {
    if($(this.floorplanDiv) != null) {
      this.createImgSelection();
      this.createStoredLocations();
      this.setupButtons();
      $(this.floorplanDiv).removeClassName('loading');
    }
  },

  createLocation: function(x, y, src) {
    $(this.floorplanDiv).insert({
      top: elm = new Element('div', {className: 'location',
        style: 'position: absolute;left: ' + x + 'px;top: ' + y + 'px;'}).insert({
        top: new Element('a', {href: '#'}).insert({
          top: new Element('img', {src: 'assets/place.gif', width: '23', height: '24'})
        })
      })
    });
    elm.insert({bottom: selection = Element.clone(this.imgSelection, true)});
    elm.insert({bottom: fp_bg = new Element('div', {className: 'fp_bg'}).update('&nbsp')});

    if(src != null){
      $(selection).select('option').each(function(elm){
        if(elm.value == src) {
          elm.selected = true;
          fp_bg.setStyle({backgroundImage: 'url(' + src + '-85.jpg)'});
        }
      });
      elm.imgSrc = src;
    }

    elm.posX = x;
    elm.posY = y;
    var drag = elm;

    new Draggable(elm, {
      handle: elm.select('a')[0],
      onEnd: function() {
        position = drag.positionedOffset();
        drag.posX = position[0];
        drag.posY = position[1];
      }
    });

    $(selection).onchange = function() {
      if(this.options[this.selectedIndex].value != 'default') {
        this.next('.fp_bg').setStyle({backgroundImage: 'url(' + this.options[this.selectedIndex].value + '-85.jpg)'});
      } else {
        this.next('.fp_bg').setStyle({backgroundImage: ''});
      }
      this.up('.location').imgSrc = this.options[this.selectedIndex].value;
    }

    Event.observe(elm, 'click', this.setSelected.bindAsEventListener(this), false);
    $(elm).onclick = function() {
      return false;
    }
    this.locationList.push(elm);
    return elm;
  },

  removeLocation: function() {
    this.selected.remove();
    this.locationList.pop(this.selected);
    return false;
  },

  addLocation: function() {
    elm = this.createLocation(this.STARTX, this.STARTY, null);
    if(this.selected != null) {
      this.selected.removeClassName('selected');
    }
    this.selected = elm;
    this.selected.addClassName('selected');
  },

  setSelected: function(event) {
    if(this.selected != null) {
      this.selected.removeClassName('selected');
    }
    this.selected = Event.element(event).up('.location'); 
    this.selected.addClassName('selected');
  },

  createImgSelection: function() {
    var options = new Element('select');
    $$('#' + this.imgSrcListID + ' li').each(function(elm) {
       options.insert({
          top: new Element('option', {value: elm.innerHTML}).update(elm.id)
       });
    });
    options.insert({
      top: new Element('option', {value: 'default'}).update('Please select a photo.')
    });
    this.imgSelection = options;
  },

  setupButtons: function() {
    Event.observe($(this.addID), 'click', this.addLocation.bindAsEventListener(this), false);
    $(this.addID).onclick = function () {
      return false;
    }

    Event.observe($(this.removeID), 'click', this.removeLocation.bindAsEventListener(this), false);
    $(this.removeID).onclick = function () {
      return false;
    }

    Event.observe($(this.submitID), 'click', this.submitForm.bindAsEventListener(this), false);
    var oso = $(this.submitID).onclick;
    $(this.submitID).onclick = function () {
      oso();
      return true;
    }
  },

  submitForm: function() {
    var json = '{"location": [';
    var count = 0;
    this.locationList.each(function(elm) {
      if(elm.imgSrc != undefined || elm.imgSrc != 'default'){
        if(count != 0) { 
          json += ', ';
        } 
        json += '{"posX": "' + elm.posX + '", "posY": "' + elm.posY + '", "imgSrc": "' + elm.imgSrc + '"}';
        count ++;
      }
    });
    json += ']}';
    if($(this.hiddenField) != null) {
      $(this.hiddenField).value = encodeURI(json);
    }
  },

  createStoredLocations: function() {
    
    if($(this.hiddenField) != null) {
      if($(this.hiddenField).value != ''){
        var locations = (decodeURI(($(this.hiddenField).value))).evalJSON(true);
        (locations.location).each(function(location) {
           this.createLocation(location.posX, location.posY, location.imgSrc);
        }.bind(this));
      }
    }
  }
  
} 


Event.observe(window, 'load', function(){
   new floorplan();
}, false);