var Caravan = new Class({
  clonesAvailable: false,
  clonesPhoto: false,
  currentOpen: false,
  imagePopup: false,
  firstTabSwitch: true,
  tabResizeInterval: false,

  initialize: function() {  
    this.clonesAvailable = 0;
    this.clonesPhoto = 0;

    window.addEvent('load', function() { caravan.loaded(); });
  },

  loaded: function() {
    if ($("caravanDetailAvailableBoot")) {
      this.showAvailability("caravanDetailAvailableStartDate", "caravanDetailAvailableEndDate", "caravanDetailAvailableSeasons", "caravanDetailAvailableDates", "caravanPriceTotal");
    }
    if ($("caravanDetailLeft") && $("caravanDetailRight")) {
      /* Ugly hack for IE */
      this.tabResizeInterval = window.setInterval(function() { caravan.tabResize() }, 100);
    }
    if ($("caravanBook")) {
      /* Ugly hack for IE */

      var i = window.setTimeout(function() { caravan.bookResize(); }, 500);
    }
  },

  cloneEmbed: function() 
  {
    var element = $("caravanEmbedOriginal");
    var ta = element.getElement("textarea").clone();

    ta.value = "";
    element.appendChild(ta);
  },

  clonePhoto: function( id, clones )
  {
    var element = $(id);
    var clone = element.clone();
    if (this.clonesPhoto == 0) this.clonesPhoto = clones;

    var last = $("photo["+(this.clonesPhoto)+"]");
    clone.className = (last && last.hasClass('odd')?"even":"odd"); 
    if (!last) last = element;

    this.clonesPhoto++;
    clone.id = "photo["+this.clonesPhoto+"]";
    var input = clone.getElement("input");
    input.name = "item_photo["+this.clonesPhoto+"]";

    clone.setStyle("display","");
    clone.injectAfter(last);
  },

  cloneAvailable: function( id, clones )
  {
    var element = $(id);
    var clone = element.clone();

    if (this.clonesAvailable == 0) this.clonesAvailable = clones;
    var last = $("available["+(this.clonesAvailable)+"]");
    var inputs = clone.getElements("input");
    var anchors = clone.getElements("a");
    clone.className = (last.hasClass('odd')?"even":"odd"); 

    this.clonesAvailable++;
    clone.id = "available["+this.clonesAvailable+"]";
    for ( var i = 0; i < inputs.length; i++) {
      if (inputs[i].name.search("start") >= 0) {
        inputs[i].id = inputs[i].name = "available_start["+this.clonesAvailable+"]";
        anchors[i].href = "javascript:caravan.showDateSelect('available_start["+this.clonesAvailable+"]','available_end["+this.clonesAvailable+"]','start');"
      } else {
        inputs[i].id = inputs[i].name = "available_end["+this.clonesAvailable+"]";
        anchors[i].href = "javascript:caravan.showDateSelect('available_start["+this.clonesAvailable+"]','available_end["+this.clonesAvailable+"]','end');"
      }
      inputs[i].value = "";
    }
    clone.injectAfter(last);
  },

  updateURL: function (name, elementId)
  {
    var url = name.replace(/[^a-zA-Z0-9\-]/g,"_");
    $(elementId).value = url.toLowerCase();
  },

  tabResize: function ( )
  {
    var leftContent = $("caravanDetailLeft");//.getElement("div.content");
    var rightContent = $("caravanDetailRight");//.getElement("div.content");
    leftContent.setStyle("height", "");
    rightContent.setStyle("height", "");
    var leftSize = $("caravanDetailLeft").getSize();
    var rightSize = $("caravanDetailRight").getSize();

    if (leftSize.size.y == rightSize.size.y) return true;
    var size = (leftSize.size.y > rightSize.size.y?leftSize.size.y:rightSize.size.y);

    $("caravanDetailRight").setStyle("height", size);
    $("caravanDetailLeft").setStyle("height", size);
    window.clearInterval(this.tabResizeInterval);
  },

  bookResize: function ( )
  {
    if ($("caravanBookLeft").getElement("div.content").getSize().size.y == $("caravanBookRight").getElement("div.content").getSize().size.y) {
      window.setTimeout(function() { caravan.bookResize(); }, 500);
      return;
    }
    
    var leftContent = $("caravanBookLeft").getElement("div.content");
    var rightContent = $("caravanBookRight").getElement("div.content");
    leftContent.setStyles( { "height": "" } ); //"padding-bottom": "25px" });
    rightContent.setStyles( { "height": "" } ); //, "padding-bottom": "25px" });
    var leftSize = leftContent.getSize();
    var rightSize = rightContent.getSize();

    if (leftSize.size.y == rightSize.size.y) return true;
    var size = (leftSize.size.y > rightSize.size.y?leftSize.size.y:rightSize.size.y);

    rightContent.setStyle("height", size);
    leftContent.setStyle("height", size);
  },

  tabSwitch: function( tab )
  {
  /*
    if (this.firstTabSwitch) {
      this.showAvailability("caravanDetailAvailableStartDate", "caravanDetailAvailableEndDate", "caravanDetailAvailableSeasons", "caravanDetailAvailableDates", "caravanPriceTotal");
      this.showImagePopup();
    }
    */
    this.tabResize();
    if (tab == "caravanDetailTabsTab2" && this.firstTabSwitch) {
      this.firstTabSwitch = false;
      this.showAvailability("caravanDetailAvailableStartDate", "caravanDetailAvailableEndDate", "caravanDetailAvailableSeasons", "caravanDetailAvailableDates", "caravanPriceTotal");

    }
    if (tab == "caravanDetailTabsTab4") this.showImagePopup();
  },

  showDateSelect: function (startElementId, endElementId, focus)
  {
    var sDay, sMonth, sYear;
    var eDay, eMonth, eYear;
    var boxes = $ES("select");
    boxes.each( function(box) { 
      if (box && box.name && box.name.substring(0,startElementId.length) == startElementId) {
        switch (box.name.substring(startElementId.length)) {
          case "[Day]":   sDay = box; break;
          case "[Month]": sMonth = box; break;
          case "[Year]":  sYear = box; break;
        }
      }
      if (box && box.name && box.name.substring(0,endElementId.length) == endElementId) {
        switch (box.name.substring(endElementId.length)) {
          case "[Day]":   eDay = box; break;
          case "[Month]": eMonth = box; break;
          case "[Year]":  eYear = box; break;
        }
      }
    });
    var sDate = sDay.value+"-"+sMonth.value+"-"+sYear.value;
    var eDate = eDay.value+"-"+eMonth.value+"-"+eYear.value;
    var element;
    var elementDate;
    var dateRE = new RegExp("^\\d{2}\-\\d{2}\-\\d{4}$");

    if (focus == "start") {
      element = "start";
      elementDate = sDate;
      base.components['calendar'].setHeader("Kies een start datum");
    } else if (focus == "end") {
      base.components['calendar'].setHeader("Kies een eind datum");
      element = "end";
      elementDate = eDate;
    } else return false;

    var callback = function(selectedDate) {
      base.components['calendar'].hide();
      if (element == "start") {
        sDay.value = selectedDate.substring(0,2);
        sMonth.value = selectedDate.substring(3,5);
        sYear.value = selectedDate.substring(6,10);
    
      } else {
        eDay.value = selectedDate.substring(0,2);
        eMonth.value = selectedDate.substring(3,5);
        eYear.value = selectedDate.substring(6,10);
      }
      var start = sYear.value+"-"+sMonth.value+"-"+sDay.value;
      var end = eYear.value+"-"+eMonth.value+"-"+eDay.value;
      if (start > end) {
        eDay.value = sDay.value;
        eMonth.value = sMonth.value;
        eYear.value = sYear.value;
      }
//      validation.validateField(element, element.validationDataIndex);
    }
    
    base.components['dateSelect'].setValue(elementDate);
    if (focus == "end" && sDate.search(dateRE) >= 0) {
      base.components['dateSelect'].setStart(sDate);
      if (elementDate.search(dateRE) < 0) base.components['dateSelect'].setValue(sDate);
    } else {
      base.components['dateSelect'].setStart();
    }
    if (focus == "start" && eDate.search(dateRE) >= 0) {
//      base.components['dateSelect'].setEnd(eDate);
    } else {
      base.components['dateSelect'].setEnd();
    }
    base.components['dateSelect'].setCallback(callback);
    
    base.components['calendar'].show();
  },

  showAvailability: function (startElementId, endElementId, seasonsId, bookingDatesId, totalPriceId)
  {
    var me = this;
    if (!base.components['dateDomainStart'] || !base.components['dateDomainEnd']) {
      setTimeout(function () { me.showAvailability(startElementId, endElementId, seasonsId, bookingDatesId, totalPriceId); }, 100);
      return;
    }
    var startElement = $(startElementId);
    var endElement = $(endElementId);
    var seasons = $(seasonsId);
    var bookingDates = $(bookingDatesId);
    var totalPrice = $(totalPriceId);

    if (seasons) {
      var dates = seasons.value.split(":");
      var fromLow   = dates[0];
      var toLow     = dates[1];
      var startLow  = dates[2];
      var minLow    = dates[3];
      var fromMid   = dates[4];
      var toMid     = dates[5];
      var startMid  = dates[6];
      var minMid    = dates[7];
      var fromHigh  = dates[8];
      var toHigh    = dates[9];
      var startHigh = dates[10];
      var minHigh   = dates[11];

      if (startLow.search(/,/) > 0) {
        var startDays = startLow.split(",");
        base.components['dateDomainStart'].setEnable(fromLow, toLow, startDays);
      }
      if (startMid.search(/,/) > 0) {
        var startDays = startMid.split(",");
        base.components['dateDomainStart'].setEnable(fromMid, toMid, startDays);
      }
      if (startHigh.search(/,/) > 0) {
        var startDays = startHigh.split(",");
        base.components['dateDomainStart'].setEnable(fromHigh, toHigh, startDays);
      }
      base.components['dateDomainStart'].setHighlight(fromLow, toLow, "caravanSeasonLow");
      base.components['dateDomainStart'].setHighlight(fromMid, toMid, "caravanSeasonMid");
      base.components['dateDomainStart'].setHighlight(fromHigh, toHigh, "caravanSeasonHigh");
      base.components['dateDomainEnd'].setHighlight(fromLow, toLow, "caravanSeasonLow");
      base.components['dateDomainEnd'].setHighlight(fromMid, toMid, "caravanSeasonMid");
      base.components['dateDomainEnd'].setHighlight(fromHigh, toHigh, "caravanSeasonHigh");
    }

    if (bookingDates) {
      var dates = bookingDates.value.split(":");
      var realDates = new Array();
      for (var i = 0; i < dates.length; i+=2) {
        base.components['dateDomainStart'].setAvailable(dates[i], dates[i+1]);
        base.components['dateDomainEnd'].setAvailable(dates[i], dates[i+1]);
      }
    }

    base.components['dateDomainStart'].setDomain("start");
    base.components['dateDomainEnd'].setDomain("end");
    
    base.components['dateDomainStart'].setStart();
    base.components['dateDomainEnd'].setStart();
    var startCallback = function(selectedDate) {
      startElement.value = selectedDate;
      base.components['dateDomainStart'].setValue(selectedDate);
      var plus = 0;
      if (seasons) {
        var season = base.components['dateDomainEnd'].getSeason(startElement.value);
        switch (season) {
          case "low": plus = minLow; break;
          case "mid": plus = minMid; break;
          case "high": plus = minHigh; break;
        }
      }
      base.components['dateDomainEnd'].setStart(startElement.value, plus);
      if (strdatecmp(endElement.value, dateadd(startElement.value,plus)) < 0) {
        endElement.value = dateadd(startElement.value,plus);
        base.components['dateDomainStart'].setEnd(endElement.value);
      }
      if (totalPrice) me.updatePrice(startElement.value, endElement.value, totalPrice);
      base.components['dateDomainEnd'].repaint();
    }
    var endCallback = function(selectedDate) {
      endElement.value = selectedDate;
      if (totalPrice) me.updatePrice(startElement.value, endElement.value, totalPrice);
      base.components['dateDomainEnd'].setValue(selectedDate);
      base.components['dateDomainStart'].setEnd(endElement.value);
      base.components['dateDomainStart'].repaint();
    }
   
    base.components['dateDomainStart'].setValue(startElement.value);
    base.components['dateDomainEnd'].setValue(endElement.value);
    if (startElement.value != endElement.value) {
      base.components['dateDomainEnd'].setStart(startElement.value);
      base.components['dateDomainStart'].setEnd(endElement.value);
    }

    base.components['dateDomainStart'].setCallback(startCallback);
    base.components['dateDomainEnd'].setCallback(endCallback);
  },

  updatePrice: function (startDate, endDate, totalPriceElement)
  {
    var me = this;
    var itemElement = totalPriceElement.getElement("input[name=item_name]");
    if (!itemElement) return;
    var url = "/data/caravan/calc/"+itemElement.value+"/"+startDate+"/"+endDate+".html";
    var conn = new XHR({method: 'get', onSuccess: function(data) {
      var spanElement = totalPriceElement.getElement("span");
      if (!spanElement) return;
      spanElement.innerHTML = data;
      if (totalPriceElement.getStyle("display", "none")) {
        totalPriceElement.setStyle("display", "");
        if ($("caravanDetailLeft") && $("caravanDetailRight")) me.tabResize();
      }
    }}).send(url);
  },

  showImagePopup: function()
  {
    var images = $("caravan").getElements("img.imagePopup");
    if (!images) return false;

    images.each( function (image) {
      image.addEvent("mousemove",function(e) {
        var event = new Event(e);
        var src = image.src.replace(/thumb_/,"real_");
        $("imageLarge").setAttribute("src", src);
      });
    });
  },
/*
  showImagePopup: function()
  {
    var images = $("caravan").getElements("img.imagePopup");
    if (!images) return false;

    var count = 0;
    images.each( function (image) {
      image.id = "imagePopup_"+count;
      var popup = new Element("div", {
        "id": "imagePopup_"+count+"_large",
        "class": "imagePopupLarge",
        "styles": {
          "display": "none",
          "position": "absolute",
          "top": "0px",
          "left": "0px"
        }
      });
      var src = image.src.replace(/thumb_/,"");
      popup.innerHTML = "<img src='"+src+"'>";

      document.body.appendChild(popup);
      image.addEvent("mousemove",function(e) {
        var event = new Event(e);
        if (caravan.imagePopup && caravan.imagePopup != this.id) {
          $(caravan.imagePopup+"_large").setStyle("display","none"); 
          caravan.imagePopup = false;
        }
        $(this.id+"_large").setStyles({
          "display": "",
          "top": event.page.y+10+"px",
          "left": event.page.x+10+"px"
        });
        caravan.imagePopup = this.id;
      });

      image.addEvent("mouseout",function(e) { 
        var event = new Event(e);
        $(this.id+"_large").setStyle("display","none"); 
        caravan.imagePopup = false;
      });
      count++;
    });
  },
  */

  loadItem: function (name)
  {
    this.currentOpen = name;
    $("caravanDetailContainer").setStyles({ "overflow": "hidden" } );
    $("caravanDetailContainer").effects({
      duration: 200, 
      onComplete: function() {
        var url = "/data/caravan/view/"+name+".html";
        var conn = new XHR({method: 'get', onSuccess: caravan.showItem }).send("/data/caravan/view/"+name+".html");
      }
    }).start({'height': 0});
  },

  showItem: function (content)
  {
    var contentElement = $("caravanDetailContainer").getElement("div#caravanDetailContent");
    contentElement.innerHTML = content;
    base.parseElement(contentElement);

    $("caravanDetailContainer").setStyles({
      "overflow": "hidden",
      "opacity": 0,
      "display": "",
      "height": 0
    });
    $("caravanDetailContainer").effects({duration: 200}).start({'height': 363, opacity: 1});
  },

  checkWeight: function ( car, item, weightMsgId)
  {
    car = parseInt(car,10);    item = parseInt(item,10);    
    if (car <= 0 || item <= 0 || isNaN(car) || isNaN(item)) {
      $(weightMsgId).setStyle("display","none");
      return;
    }
    var msg = false;
    if (item < 750 || (car > item && car + item < 3500)) {
      $(weightMsgId).innerHTML 
      msg = "Rijbewijs B of E vereist.";
    } else {
      msg = "Rijbewijs E vereist.";
    }
    if (!msg) { $(weightMsgId).setStyle("display","none"); return; } else {
      msg += " <a href='javascript:base.components[\"rijbewijsInfo\"].show()'>Meer info</a>";
    }
    $(weightMsgId).innerHTML = msg;
    $(weightMsgId).setStyle("display","");
  }
});

/* Initialize caravan class */
var caravan;

window.addEvent('domready', function() { caravan = new Caravan(); });