var FlyingPanel = new Class ({
 Implements: [Options],
 
 options: {
  ajaxSource: false,
  wrapperClass: "flyingPanel",
  nextHrefsClass: "next_href",
  previousHrefClass: "previous_href",
  nextHrefClass: "next_href",
  closeHrefClass: "close_href",
  setPageHrefClass: "set_page_href",
  saveFormClass: "save_form",
  darkening: true,
  drag: true,
  server: "http://" + document.location.hostname + "/submit.php",
  noreset: false,
  top: "300px",
  formSend: true,
  h1: "",
  wrapperHtml: '<div class="flyingContent"></div>',
  onSaveFunction: function() {},
  onResetFunction: function() {},
  onSetInputsFunction: function() {},
  onPageLoad: function(page) {}
 },
 
 elements: {
  bgDiv: null,
  panel: null,
  wrapper: null,
  divs: null
 },
 
 vars: {
  curPage: 0,
  rounded: null,
  showing: false,
  constructDivs: null
 },
 
 createPanel: function() {
  //here you can change panel look
  if (this.elements.panel) this.elements.panel.destroy();
  
  this.elements.panel = new Element("div",{
   html: this.options.wrapperHtml,
   
   styles: {
     opacity: 0,
     overflow: "visible",
     position: "absolute",
     top: 0,
     "z-index": 2000
   }
  });
  this.elements.panel.inject($(document.body), "bottom");
  
  this.elements.panel.getElements("td.back").setStyle("background", "#bbd7ef");
  

  return this.elements.panel.getElement("div.flyingContent");
 },

 initialize: function(divs, button, options) {
  this.setOptions(options);
  
  if (!$(button)) return;
  
  $(button).addEvent("click", function(event) {
   if (this.vars.showing) return;
   this.setHeader(this.options.h1);
   
   this.showPage(0, "50%", this.options.top);
   
   event.stop();
  }.bind(this));
  
  if (this.options.ajaxSource) {
   this.vars.constructDivs = divs;
  } 
  else this.setUp(divs);
  
  //creating blackbg div
  this.elements.bgDiv = new Element("div", {styles: {
   "background": "#000",
   "position": "absolute",
   "top": 0,
   "left": 0,
   "z-index": 1000,
   "opacity": 0
  }});
  this.elements.bgDiv.addEvent("click", function(event) {
   this.hide();
   event.stop();
  }.bind(this));
  this.elements.bgDiv.inject($(document.body), "bottom");
  
 },
 
 setUp: function(divs) {

  if (typeof(divs) != 'object') divs = $$(divs);
  this.elements.divs = divs;
  
  if (this.elements.wrapper) this.elements.wrapper.destroy();
  
  //creating wrapper
  this.elements.wrapper = new Element("div", {styles: {
    opacity: 0,
    overflow: "visible",
    position: "relative",
    width: "0px"
  }});
  this.elements.wrapper.set("class", this.options.wrapperClass);
  this.elements.wrapper.inject(this.createPanel(),"bottom");
  
  if (this.options.drag) {
   this.elements.panel.makeDraggable();
  }
 
  //moving divs to wrapper
  this.elements.divs.each(function(el){
    if (this.options.h1) {
      var h = new Element("h1", {html:this.options.h1, styles: {"white-space":"nowrap"}});
      h.inject(el, "top");
    }
    el.inject(this.elements.wrapper, "bottom");
    this.options.onPageLoad(el);
  }.bind(this));
  
  //setting controls
  //back href
  this.elements.wrapper.getElements("a."+this.options.previousHrefClass).each(function(a) {
    a.addEvent("click", function(event) {
      this.pageBack();
      event.stop();
    }.bind(this));
  }.bind(this));
  //next href
  this.elements.wrapper.getElements("a."+this.options.nextHrefClass).each(function(a) {
    a.addEvent("click", function(event) {
      this.pageForward();
      event.stop();
    }.bind(this));
  }.bind(this));
  //close href
  this.elements.panel.getElements("a."+this.options.closeHrefClass).each(function(a) {
    a.addEvent("click", function(event) {
      this.hide();
      event.stop();
    }.bind(this));
  }.bind(this));
  //Set Page href
  this.elements.wrapper.getElements("a."+this.options.setPageHrefClass).each(function(a) {
    a.addEvent("click", function(event) {
      var page = 0;
      for (page = 0; page < this.elements.divs.length; page++) {
       if (a.hasClass(page)) {
         this.setPage(page);
         break;
       }
      }
      event.stop();
    }.bind(this));
  }.bind(this));
  //saveForm href
  this.elements.wrapper.getElements("."+this.options.saveFormClass).addEvent("click", function(event) {
   this.saveForm();
   event.stop();
  }.bind(this));
  
 
 /* //setting 
  this.elements.divs[0].setStyle("display", "block");
  this.elements.wrapper.setStyles({
    "width": this.elements.divs[0].getScrollSize().x,
    "height": this.elements.divs[0].getScrollSize().y
  });*/
  
  this.elements.divs.setStyles({
    "position": "absolute",
    "display": "block",
    "opacity": 0
  });
 },
 
 showPage: function(page, x, y) {
  //just show selected page (not hiding previous one), to change pages use setPage(page)
  if (!this.vars.showing && this.options.darkening) {
   //if it's not showing yet then darkens background
   var size = $(document.body).getScrollSize();
   this.elements.bgDiv.setStyles({
    "width": "100%",
    "height": size.y + "px"
   });
   this.elements.bgDiv.tween("opacity", 0.3);
  }
  
  if (!this.vars.showing && this.options.ajaxSource) {
   var request = new Request.HTML({
     url: this.options.ajaxSource,
     onSuccess: function(response1, response2, response3) {
      var div = new Element("div", {styles:{display:"none"}});
      div.adopt(response1);
      div.inject($(document.body),"bottom");
      if (typeof(this.vars.constructDivs) != 'object') {
       this.setUp(div.getElements(this.vars.constructDivs));
      }
      else this.setUp(this.vars.constructDivs);
      this.vars.showing = true;
      this.showPage(page, x, y);
      div.destroy();
      return;
     }.bind(this)
   });
   
   request.send();
   return;
  }
  else {
   this.vars.showing = true;
   if (x || y) {
    this.elements.panel.setStyles({
      "left": x,
      "top": y
    });   
   }
  
   this.vars.curPage = page;
  
   var resize = new Fx.Morph(this.elements.wrapper);
   this.elements.panel.setStyle("opacity", 1);
   //getting size of selected page
   var size = this.elements.divs[this.vars.curPage].getScrollSize();
   //resize div and show panel
   
   resize.start({
     "width": size.x,
     "height": size.y,
     "margin-left": "-" + (size.x/2) + "px",
     "opacity" : 1
   }).chain(function(){
     //show content
     this.elements.divs[this.vars.curPage].tween("opacity", 1);
   }.bind(this));
  }
 },
 
 setPage: function(page) {
  //first hiding current page
  var tween = new Fx.Tween(this.elements.divs[this.vars.curPage]);
  //hide current page, then show selected
  tween.start("opacity", 0).chain(function(){
    this.showPage(page);
  }.bind(this));
 },
 
 pageBack: function() {
  this.setPage(this.vars.curPage - 1);
 },
 
 pageForward: function() {
  this.setPage(this.vars.curPage + 1);
 },
 
 hide: function() {

  var divFx = new Fx.Morph(this.elements.divs[this.vars.curPage]);
  var resize = new Fx.Morph(this.elements.wrapper);
  divFx.start({
   "opacity": 0
  }).chain(function(){
  if (this.options.darkening) {
   this.elements.bgDiv.tween("opacity", 0);
  }
  resize.start({
    "width": 0,
    "height": 0,
    "margin-left": 0,
    "opacity": 0
  }).chain(function(){
    //show content
    this.elements.divs[this.vars.curPage].setStyles({
     "opacity": 0
    });
    this.elements.panel.setStyle("opacity", 0);
    this.vars.curPage = 0;
    this.vars.showing = false;
  }.bind(this))}.bind(this));
 },
 
 saveForm: function() {
  if (this.options.formSend) {
   var request = new Request({
     url: this.options.server,
     onSuccess: function(response) {
      this.options.onSaveFunction();
      this.hide();
     }.bind(this)
   });
   
   request.post(this.elements.wrapper);
  }
  
  else this.options.onSaveFunction();
 },
 
 reset: function() {
  if (!this.options.noreset) {
   this.elements.wrapper.getElements("input[type=text], select").set("value", "");
   this.elements.wrapper.getElements("input[type=checkbox], input[type=radio][name=from_category]").set("checked", "");
   this.elements.wrapper.getElements("input[name=category_id]").set("value", "add");
  }
  this.options.onResetFunction();
 },
 
 setInputs: function(arr) {
  this.reset();
  for (var a in arr) {
   var elname = a;
   if (typeof(arr[a]) == "object") elname+="[]";
   var inputs = this.elements.wrapper.getElements("[name="+elname+"]");
   inputs.each(function(input){
     switch(input.get("type")) {
       case "checkbox": if (arr[a].contains(input.get("value"))) input.set("checked", "checked"); break;
       default: input.set("value", arr[a]);
     }
     i++;
   });
  }
  this.options.onSetInputsFunction();
 },
 
 setHeader: function(header) {
  if (this.elements.wrapper && this.elements.wrapper.getElement("h1")) this.elements.wrapper.getElement("h1").set("html", header);
 },
 
 hideAddOnly: function() {
  this.elements.wrapper.getElements(".addonly").setStyle("display", "none");
 }
 
 
});