/* exported ZList */
var ZList = new Class({
  Implements: [Options],
  options:{
    idName:"",
    aliasName:"",
    descName:"",
    cssClassItem:"",
    onClick:null,
    onDblClick:null,
    onMouseOver:null,
    onMouseOut:null,
    sortable:false,
    sortHandlerCssClass:'',
    moverMsg:'',
    moverImage:'',
    onMoverMouseDown:null,
    isSortableElement: function(/*el*/) {return true;},
    buttons:[], //{image , title, functionName, cssClass}
    images:[], //{image , title, cssClass, id}
    itemContainsItem:false,
    cssClassContainerItem:"",
    containerTitle:"",
    subItemsName:"",
    onMove:function(/*itmId, oldContId, newContId, elementIdNearTo , mode*/){}
  },
  _sort:null,
  _innerSort:null,
  autonumber:0,
  initialize:function(container,options){
    this.setOptions(options);
    this.container=document.id(container);
    if (this.options.sortable) {
      // this._sort = new Sortables(this.container,{clone:function(){return new Element('div');},constrain: true,  handle:"span."+this.options.cssClassItem+"-"+(this.options.sortHandlerCssClass?this.options.sortHandlerCssClass:"handler")});
      // this._sort.addEvent('start', function(el,clone) {
        // this.lists.each(function(l) {
          // l.addClass("dropper");
        // });
        // if (!this.list.scroller)
          // this.list.scroller=new Scroller(this.list);
        // this.list.scroller.start();
        // el.addClass("dragging");
      // });
      // this._sort.addEvent('complete', function(el,clone) {
        // this.lists.each(function(l) {
          // l.removeClass("dropper");
        // });
        // if (this.list.scroller)
          // this.list.scroller.stop();
        // el.removeClass("dragging");
      // });
      // this._sort.addEvent('sort', function() {
      // });
      if (this.options.itemContainsItem) {
      }
    }
  },
  _getHTMLStringOfItems:function(newItems, level, contId) {
    if (typeof(level)=='undefined') level=0;
    if (Empty(this.containerId)) this.containerId = this.container.id;
    if (Empty(this.containerId)) this.containerId = LibJavascript.AlfaKeyGen(10);
    var src_array=new LibJavascript.String.Chainer(),img;
    for(var i=0;i<newItems.length;i++, this.autonumber++){
      src_array.concat("<div name='"+(newItems[i][this.options.idName])+"' class='"+this.options.cssClassItem+"' id='"+this.containerId+"_"+this.autonumber+"'>");
      if (this.options.sortable) {
        src_array.concat("<span class='"+this.options.cssClassItem+"-"+(this.options.sortHandlerCssClass?this.options.sortHandlerCssClass:"handler")+"'><span>move</span></span>");
      }
      for (j=this.options.images.length-1;j>=0;j--) { //{image , title, cssClass, id}
        img=this.options.images[j];
       if (typeof img.image == 'string' && img.image.indexOf('{') == -1) {
          src_array.concat("<img id='"+this.containerId+"_"+this.autonumber+"_"+(img.id || "image"+j)+"' class='"+this.options.cssClassItem+"-"+(img.cssClass || "image"+j)+"' src='"+img.image+"'");
          if (img.title)
            src_array.concat(" title="+LibJavascript.ToJSValue(img.title));
          src_array.concat(">")
        } else if (typeof img.image == 'object' || img.image.indexOf('{') > -1 ) {
          if ( typeof img.image == 'string') {
            img.image = JSON.parse(img.image);
          }
          src_array.concat("<span id='"+this.containerId+"_"+this.autonumber+"_"+(img.id || "image"+j)+"' class='"+this.options.cssClassItem+"-"+(img.cssClass || "image"+j)+"' style='"+(img.image.color ? 'color:' + img.image.color + ';' : '') +
          (img.image.font ? 'font-family:' + img.image.font + ';' : '') + (img.image.size ? 'font-size:' + img.image.size + 'px;' : '') + ' ' + (img.image.fontWeight ? 'font-weight:' + img.image.fontWeight + ';' : '')+"'");
          if (img.title)
            src_array.concat(" title="+LibJavascript.ToJSValue(img.title));
          src_array.concat(">"+String.fromCharCode(parseInt(img.image.value.substring(3, 7), 16))+"</span>");
        }
      }
      src_array.concat("<p class='"+this.options.cssClassItem+"-name'>"+newItems[i][this.options.aliasName]+"</p>");
      if (this.options.descName)
        src_array.concat("<p class='"+this.options.cssClassItem+"-description'>"+newItems[i][this.options.descName]+"</p>");
      if (this.options.onMoverMouseDown)
        src_array.concat("<span class='"+this.options.cssClassItem+"-mover' title="+LibJavascript.ToJSValue(this.options.moverMsg)+"></span>");

      for (var j=this.options.buttons.length-1;j>=0;j--) {
        src_array.concat("<a class='"+this.options.cssClassItem+"-"+(this.options.buttons[j].cssClass || "button"+j)+"' href='javascript:void(0)' ");
        if (this.options.buttons[j].title)
          src_array.concat("title="+LibJavascript.ToJSValue(this.options.buttons[j].title));
        if (this.options.buttons[j].functionName)
          src_array.concat(" onClick='"+this.options.buttons[j].functionName+"(\""+newItems[i][this.options.idName]+"\""+(level>0 && !Empty(contId) ? ", \"" + contId +"\"": "")+")'");
        src_array.concat(">")
        if( this.options.buttons[j].image )
          src_array.concat("<img src='"+this.options.buttons[j].image+"'>");
        src_array.concat("</a>");
      }
      if (this.options.itemContainsItem && level==0) {
        src_array.concat("<fieldset title="+LibJavascript.ToJSValue(this.options.containerTitle)+" class='fieldset-"+this.options.cssClassContainerItem +"' style='clear: both;"+(newItems[i][this.options.subItemsName].length==0?"display:none;":"")+"'><legend>"+this.options.containerTitle+"</legend>");
        src_array.concat("<div class='"+this.options.cssClassItem+"-"+this.options.cssClassContainerItem +"'>");
        if (newItems[i][this.options.subItemsName].length>0) {
          this.autonumber++;
          src_array.concat(this._getHTMLStringOfItems(newItems[i][this.options.subItemsName],level+1, newItems[i][this.options.idName]));
        }
        src_array.concat("</div>");
        src_array.concat("</fieldset>");
      }
      src_array.concat("</div>");
    }
    return src_array.toString();
  },
  AppendItems:function(newItems, beforeOf) {
    var myDOM = document.createDocumentFragment();
    var myDiv = document.createElement("div");
    myDOM.appendChild(myDiv);
    myDiv.innerHTML = this._getHTMLStringOfItems(newItems);
    var el, mode
    if (beforeOf) {
      el = this.container.getElement('div[name='+beforeOf+']');
      mode = 'before';
    } else {
      el = this.container;
      mode = 'inside';
    }
    while (myDiv.childNodes.length>0) {
      var curElement = myDiv.childNodes[0];
      curElement.inject(el,mode);
    }
  },
  RemoveItems:function(oldItems, contId) {
    var cont;
    if (!Empty(contId)) {
      cont = this.container.getElement("div[name="+contId+"]").getElement("."+this.options.cssClassItem+"-"+this.options.cssClassContainerItem);
    } else {
      cont = this.container;
    }
    for (var i=cont.childNodes.length-1;i>=0;i--) {
      var curEl = cont.childNodes[i];
      var curId = document.id(curEl).get('name');
      var idName = this.options.idName;
      var curIdx = LibJavascript.Array.indexOf(oldItems,curId,function(el) {
        return el[idName]==curId;
      });
      if (curIdx>=0) {
        document.id(curEl).destroy();
        if (!Empty(contId) && cont.childNodes.length==0) {
          cont.getParent().setStyle("display","none");
        }
      }
    }
  },
  AppendItemsInContainer:function(id,newItems,beforeOf) {
    var myDOM = document.createDocumentFragment();
    var myDiv = document.createElement("div");
    myDOM.appendChild(myDiv);
    myDiv.innerHTML = this._getHTMLStringOfItems(newItems,1,id);
    var element0 = this.container.getElement('div[name='+id+']')
    var myRow = element0.getElement("."+this.options.cssClassItem+"-"+this.options.cssClassContainerItem);
    var el, mode
    if (beforeOf) {
      el = myRow.getElement('div[name='+beforeOf+']');
      mode = 'before';
    } else {
      el = myRow;
      mode = 'inside';
    }
    element0.getElement('fieldset').setStyle('display','');
    while (myDiv.childNodes.length>0) {
      var curElement = myDiv.childNodes[0];
      curElement.inject(el,mode);
      // myRow.appendChild(curElement);
      // this._innerSort.addItems(curElement);
      // this._sort.addItems(curElement);
    }
  },
  ReplaceList:function(newItems) {
    LibJavascript.CssClassNameUtils.addClass(this.container,'loading');
    this.container.innerHTML = "";
    this.container.innerHTML = this._getHTMLStringOfItems(newItems);
    LibJavascript.CssClassNameUtils.removeClass(this.container,'loading');
  },
  UpdateList:function(newItems) {
    var container = this.container;
    LibJavascript.CssClassNameUtils.addClass(container,'loading');
    container.innerHTML="";
    container.innerHTML = this._getHTMLStringOfItems(newItems);
    // if (this.options.sortable && this.options.itemContainsItem)
      // this._innerSort.addLists(container.getElements('.'+this.options.cssClassItem+"-"+this.options.cssClassContainerItem));
      // this._sort.addLists(container.getElements('.'+this.options.cssClassItem+"-"+this.options.cssClassContainerItem));

    var _this = this;
    function OnSelectStart(evt){
     if(evt.preventDefault) evt.preventDefault(true);
      evt.returnValue=false
    }
    LibJavascript.Events.addEvent(container,'selectstart',OnSelectStart);
    function GetListElement(el) {
      if (el==container) return null;
      while(el && !LibJavascript.CssClassNameUtils.hasClass(el,_this.options.cssClassItem)) {
        el=el.parentNode;
      }
      return el;
    }
    function GetListElementFromMover(el,callback) {
      if (el==container) return null;
      while(el && !LibJavascript.CssClassNameUtils.hasClass(el,_this.options.cssClassItem+"-mover")) {
        el=el.parentNode;
      }
      var el2 = GetListElement(el);
      callback(el,el2);
    }
    function GetListElementFromHandler(el,callback) {
      if (el==container) return null;
      while(el && !LibJavascript.CssClassNameUtils.hasClass(el,_this.options.cssClassItem+"-"+_this.options.cssClassContainerItem+"-"+(_this.options.sortHandlerCssClass?_this.options.sortHandlerCssClass:"handler"))
                && !LibJavascript.CssClassNameUtils.hasClass(el,_this.options.cssClassItem+"-"+(_this.options.sortHandlerCssClass?_this.options.sortHandlerCssClass:"handler"))
            ) {
        el=el.parentNode;
      }
      var el2 = GetListElement(el);
      callback(el,el2);
    }


    if (_this.options.onMouseOver || _this.options.onMouseOut) {
      var lastElementFocused;
      function mouseMove(evt) {
        if (_this.options.onMouseOver || _this.options.onMouseOut) {
          var el=GetListElement(evt.srcElement || evt.target);
          if (el && el!=lastElementFocused) {
            if (lastElementFocused && _this.options.onMouseOut)
              _this.options.onMouseOut(lastElementFocused,container);
            lastElementFocused=el;
            if (_this.options.onMouseOver)
              _this.options.onMouseOver(lastElementFocused,container);
          }
        }
      }
      LibJavascript.Events.addEvent(container,'mousemove',mouseMove);
    }
    if (_this.options.onClick) {
      function mouseClick(evt) {
        if (_this.options.onClick) {
          var el=GetListElement(evt.srcElement || evt.target);
          if (el)
            _this.options.onClick(el,evt,container);
        }
      }
      LibJavascript.Events.addEvent(container,'click',mouseClick);
    }
    if (_this.options.onDblClick) {
      function mouseDblClick(evt) {
        if (_this.options.onDblClick) {
          var el=GetListElement(evt.srcElement || evt.target);
          if (el)
            _this.options.onDblClick(el,evt,container);
        }
      }
      LibJavascript.Events.addEvent(container,'dblclick',mouseDblClick);
    }
    if (_this.options.onMoverMouseDown || _this.options.sortable) {
      function moverMouseDown(evt) {
        var handler, el, callback;
        if (_this.options.onMoverMouseDown) {
          callback = function(mover, element) {
            handler=mover;
            el=document.id(element);
          }
          GetListElementFromMover(evt.srcElement || evt.target,callback);
          if (el)
            _this.options.onMoverMouseDown(handler,el,evt,container);
        }
        if (_this.options.sortable) {
          callback = function(mover, element) {
            handler=mover;
            el=document.id(element);
          }
          GetListElementFromHandler(evt.srcElement || evt.target,callback);
          if (!_this.options.isSortableElement(el)) return;
          if (el) {

            var clone = el.clone();
            for (var j=_this.options.buttons.length-1;j>=0;j--) {
              clone.getElement("."+_this.options.cssClassItem+"-"+(_this.options.buttons[j].cssClass || "button"+j)).destroy();
            }
            for (j=_this.options.images.length-1;j>=0;j--) {
              clone.getElement("."+_this.options.cssClassItem+"-"+(_this.options.images[j].cssClass || "image"+j)).destroy();
            }
            var c = clone.getElement(".fieldset-"+_this.options.cssClassContainerItem);
            if (c) c.destroy();
            c = clone.getElement("."+_this.options.cssClassItem+"-"+_this.options.cssClassContainerItem+"-"+(_this.options.sortHandlerCssClass?_this.options.sortHandlerCssClass:"handler"));
            if (c) c.destroy();
            c = clone.getElement("."+_this.options.cssClassItem+"-"+(_this.options.sortHandlerCssClass?_this.options.sortHandlerCssClass:"handler"));
            if (c) c.destroy();

            clone.style.cssText = document.defaultView.getComputedStyle(el, null).cssText;
            clone.getElement("."+_this.options.cssClassItem+"-name").style.cssText = document.defaultView.getComputedStyle(el.getElement("."+_this.options.cssClassItem+"-name"), null).cssText;
            clone.getElement("."+_this.options.cssClassItem+"-description").style.cssText = document.defaultView.getComputedStyle(el.getElement("."+_this.options.cssClassItem+"-description"), null).cssText;
            clone.setStyle("position","absolute");
            clone.setStyle("z-index","1000");
            clone.setStyle("width","");
            clone.setStyle("height","");
            clone.inject(document.body);
          		_this.drag = new Drag.Move(clone).addEvents({
                onCancel: function( clone ){
                  clone.destroy();
                  el.style.display='';
                  _this.RemoveDroppableElements()
                },
                onEnter: function(element, droppable){
                  _this.ResponsiveViewOnEnter(droppable);
                },
                onLeave: function(element, droppable){
                  droppable.removeClass('phantom-span_hover')
                },
                onDrop: function(element, droppable/*, event*/){
                  function GetLevel(itm) {
                    if (itm==null) return -1;
                    var prnt = itm.getParent();
                    if (prnt==_this.container) return 0;
                    else return 1;
                  }
                  function GetContainerId(itm) {
                    if (itm==null) return null;
                    var prnt = itm.getParent();
                    if (prnt==_this.container) return null; //se sono nel livello principale non ho subContenitore
                    else {
                      return prnt.getParent().getParent().get("name");
                    }
                  }
                  element.destroy();
                  var validDrop = droppable && droppable.hasClass('phantom-span') && droppable.hasClass('active'),
                      levelStart = 0,
                      levelStop = 0;
                  if (validDrop) {
                    var elem = (droppable?droppable.getParent():null), mode;
                    if (elem && elem.hasClass(_this.options.cssClassItem)) { //nuovo column layer
                      elem = elem.getElement('.'+_this.options.cssClassItem+"-"+_this.options.cssClassContainerItem);
                      elem.getParent().style.display='';
                      mode = "bottom";
                    } else if (elem && elem.childNodes.length>1) {
                      if (droppable.getPrevious()) {
                        elem = droppable.getPrevious();
                        mode = "after";
                      } else {
                        elem = droppable.getNext();
                        mode = "before";
                      }
                    }
                    levelStart = GetLevel(el);
                    levelStop = GetLevel(droppable);
                  }
                  el.style.display='';
                  _this.RemoveDroppableElements()
                  var btn, myId, contId, j;
                  if (validDrop) {
                    var oldCont = GetContainerId(el);
                    if (levelStart == levelStop) {//stesso livello, basta copiare
                      el.inject(elem, mode);
                      if (levelStop==1) { //bisogna cambiare il contenitore nelle chiamate
                        myId = el.get("name"),
                            contId = GetContainerId(el);
                        for (j=_this.options.buttons.length-1;j>=0;j--) {
                          btn = el.getElement("."+_this.options.cssClassItem+"-"+(_this.options.buttons[j].cssClass || "button"+j));
                          btn.set("onClick", _this.options.buttons[j].functionName+"(\""+ myId +"\",\""+ contId +"\")")
                        }
                      }
                    } else if (levelStart>levelStop) { //bisogna aggiungere subContainer
                      if (_this.options.itemContainsItem) {
                        var newFielset = new Element("fieldset").set("title",_this.options.containerTitle).set("class","fieldset-"+_this.options.cssClassContainerItem).setStyles({"clear":"both","display":"none"});
                        new Element("legend").set("text",_this.options.containerTitle).inject(newFielset);
                        new Element("div").set("class",_this.options.cssClassItem+"-"+_this.options.cssClassContainerItem).inject(newFielset);
                        newFielset.inject(el);
                        el.inject(elem, mode);
                        myId = el.get("name");
                        for (j=_this.options.buttons.length-1;j>=0;j--) {
                          btn = el.getElement("."+_this.options.cssClassItem+"-"+(_this.options.buttons[j].cssClass || "button"+j));
                          btn.set("onClick", _this.options.buttons[j].functionName+"(\""+ myId +"\")")
                        }
                      }
                    } else if (levelStart<levelStop) {// bisogna togliere subContainer e spalmare i contenuti
                      var oldCnt = el.getElement("."+_this.options.cssClassItem+"-"+_this.options.cssClassContainerItem).dispose();
                      el.getElement("fieldset").destroy();
                      el.inject(elem, mode);
                      myId = el.get("name"),
                          contId = GetContainerId(el);
                      for (j=_this.options.buttons.length-1;j>=0;j--) {
                        btn = el.getElement("."+_this.options.cssClassItem+"-"+(_this.options.buttons[j].cssClass || "button"+j));
                        btn.set("onClick", _this.options.buttons[j].functionName+"(\""+ myId +"\",\""+ contId +"\")")
                      }
                      var myel = el;

                      oldCnt.getChildren().each(function(child) {
                        if (myel.nextSibling)
                          child.inject(myel,"after");
                        else
                          myel.parentNode.appendChild(child);
                        var myId = child.get("name");
                        for (var j=_this.options.buttons.length-1;j>=0;j--) {
                          var btn = child.getElement("."+_this.options.cssClassItem+"-"+(_this.options.buttons[j].cssClass || "button"+j));
                          btn.set("onClick", _this.options.buttons[j].functionName+"(\""+ myId +"\",\""+ contId +"\")")
                        }
                        myel = child;
                      });

                    }
                    var newCont = GetContainerId(el);
                    _this.options.onMove(el.get("name"), oldCont, newCont, elem.get("name"),mode);
                  }
                  if (_this.container.scroller)
                    _this.container.scroller.stop();
                  _this.HideEmptyContainers();
                  clone.destroy();
                },
                onBeforeStart : function() {
                  el.style.display='none';
                  _this.MakeDroppableElements(el);
                  _this.drag.droppables = $$(".droppableItem");
                  var mousePos = new DOMEvent(evt).client;
                  clone.setStyles({top:mousePos.y,left:mousePos.x});
                },
                onStart : function() {
                  if (!_this.container.scroller) {
                    _this.container.scroller=new Scroller(_this.container);
                  }
                  _this.container.scroller.start();
               }
              });

              _this.drag.start(new DOMEvent(evt));
         }

        }
      }
      LibJavascript.Events.addEvent(container,'mousedown',moverMouseDown);
    }
    LibJavascript.CssClassNameUtils.removeClass(container,'loading');
  },
  UpdateItem : function (id, contId, obj) {
    var el = this.container.getElement('div[name='+id+']');
    el.getElement("."+this.options.cssClassItem+"-name").set("text", obj[this.options.aliasName]);
    el.getElement("."+this.options.cssClassItem+"-description").set("text", obj[this.options.descName]);
  },
  Empty : function() {
    document.id(this.container).getChildren().each(function(el) {
      el.destroy();
    });
  },
  ShowAllContainers : function(exlcudeParentId) {
    this.container.getElements("fieldset").each(function(fldset) {
      if (Empty(exlcudeParentId) || fldset.getParent().get("name")!=exlcudeParentId)
        fldset.setStyle("display","");
    });
  },
  HideEmptyContainers : function() {
    var _this=this;
    this.container.getElements("fieldset").each(function(fldset) {
      if (fldset.getElement("."+_this.options.cssClassItem+"-"+_this.options.cssClassContainerItem).childNodes.length==0)
        fldset.setStyle("display","none");
    });
  },
  MakeDroppableElements : function(exclude) {
    var _this=this;
    function FillDroppables(cnt, exclude) {
      cnt.getChildren().forEach(function(child) {
        if (!LibJavascript.CssClassNameUtils.hasClass(child,"phantom-span") ) {
          var phantom = new Element("span").addClass("phantom-span").addClass('droppableItem');
          phantom.inject(child,'before');
          if (child!=exclude) {
            child.addClass('droppableItem');
          }
        }
      });
      var lastChild = cnt.getLast();
      if (lastChild &&  lastChild!=exclude && !lastChild.hasClass("phantom-span")) {
        var phantom = new Element("span").addClass("phantom-span").addClass('droppableItem');
        phantom.inject(cnt.childNodes[cnt.childNodes.length-1],'after');
      }
    }
    FillDroppables(this.container, exclude);
    this.container.getElements("."+this.options.cssClassItem+"-"+this.options.cssClassContainerItem).each(function(cnt) {
      var prnts = cnt.getParents()
      if (prnts.indexOf(exclude)==-1) {
        if (cnt.childNodes.length>0) {
          FillDroppables(cnt, exclude);
          cnt.getParent().addClass('droppableItem');
        } else {
          var parentItem = prnts.filter('.'+_this.options.cssClassItem);
          if (parentItem.length==1) {
            var phantom = new Element("span").addClass(_this.options.cssClassContainerItem+"-element").addClass('droppableItem').addClass('phantom-span');
            phantom.set('html', 'Column<br>layer');
            phantom.setStyle('align','center')
            phantom.inject(parentItem[0],'inside');
          }
        }
      }
    });
  },
  RemoveDroppableElements : function() {
    this.container.getElements('.phantom-span').each(function(itm) {
      itm.destroy();
    });
    this.container.getElements('.droppableItem').forEach(function(itm) {
      itm.removeClass('droppableItem');
    });
  },
  ResponsiveViewOnEnter : function(droppable) {
    var phantom;
    if (droppable.hasClass(this.options.cssClassItem)) {
      this.container.getElements('.phantom-span.active').forEach(function(ps) {
        ps.removeClass('active');
      });
      phantom = droppable.getPrevious();
      if (phantom && phantom.hasClass('phantom-span'))
        phantom.addClass('active');
      phantom = droppable.getNext();
      if (phantom && phantom.hasClass('phantom-span'))
        phantom.addClass('active');
      phantom = droppable.getChildren('.phantom-span');
      phantom.each(function(phantom) {
        phantom.addClass('active');
      });
    } else if (droppable.hasClass('phantom-span')) {
      droppable.addClass('phantom-span_hover')
    } else if (droppable.hasClass('fieldset-'+this.options.cssClassContainerItem)) {
      //quando entro in un column layer visibile visualizzo il primo droppable disponibile
      phantom = droppable.getElement('.phantom-span.droppableItem');
      if (phantom) {
        phantom.addClass('active');
      }
    }
  }
});