if (!Kwo) var Kwo = {};

Kwo.viewPhoto = Class.create(Kwo.Dialog, {
  initialize: function($super, opts, elt) {
    elt = $(elt);
    this.height = 150;
    this.width = 150;

    this.name = "photo";
    this.title = '';
    this.image = null;
//    this.className = "layout-hbox";
    this.opts = opts || {};

    if (elt.readAttribute("title")) {
      this.title = elt.readAttribute("title");
    }
    $super(this.onDisplay.curry(elt));
  },

  onDisplay: function(elt) {
    this.support.update('<img src="/app/sys/pix/loading.gif" style="margin:65px 0 0 11px;" />');
    if (elt.readAttribute("href")) {
      this.image = new Image();
      this.image.src = elt.readAttribute("href");
      this.image.onload = this.onLoad.bind(this);
      this.image.onerror = this.onError.bind(this);
    } else {
      this.close();
    }
  },

  onLoad: function () {
    var dimensions = document.viewport.getDimensions();
    dimensions.width = 960;
    if (dimensions.width < 960) dimensions.width = 960;
    if (dimensions.height < 600) dimensions.height = 600;

/*
    var ratio = this.image.width / this.image.height;
    var dim = document.viewport.getDimensions();
    if (this.image.width > dim.width) {
      this.image.width = dim.width - 50;
      this.image.height = this.image.width / ratio;
    }
    if (this.image.height > dim.height) {
      this.image.height = dim.height - 50;
      this.image.width =  this.image.height * ratio;
    }
    this.height = this.image.height;
    this.width = this.image.width;
*/
    var ratio = this.image.width / this.image.height;

    this.image.width = dimensions.width - 50;
    this.image.height = this.image.width / ratio;

    if (this.image.height > dimensions.height) {
      this.image.height = dimensions.height - 50;
      this.image.width =  this.image.height * ratio;
    }
    this.height = this.image.height;
    this.width = this.image.width;
    this.support.update(this.image);

    this.support.setStyle({overflow:'hidden'});
    this.support.update(this.image);
    this.place();
  },

  onError: function() {
    alert("image introuvable : " + this.image.src);
    this.close();
  },

  place: function () { 
    var dimensions = document.viewport.getDimensions();
    var offsets = document.viewport.getScrollOffsets();
    var height = this.height;

    if (Object.isString(height) && height.endsWith("%")) {
      height = height.substr(0, height.length - 1);
      height = parseInt(dimensions.height * height / 100);
    }
    var dh = height;
    if (dh >= dimensions.height) {
      dh = dimensions.height - 30;
    }
    var width = this.width;
    if (Object.isString(width) && width.endsWith("%")) {
      width = width.substr(0, width.length - 1);
      width = parseInt(dimensions.width * width / 100);
    }

    var left = parseInt(offsets.left + ((dimensions.width - width)/ 2));
    var top = parseInt(offsets.top + ((dimensions.height - dh)/ 2));
    top = top < 0 ? 0 : top;
    left = left < 0 ? 0 : left;

    var oh = dimensions.height;
    if (Prototype.Browser.Gecko) {
      oh = document.documentElement.scrollHeight;
    }

    this.overlay.setStyle({width: dimensions.width + "px",
                           height: oh + "px",
                           left: offsets.left + "px",
                           top: offsets.top + "px"});
    this.shadow.setStyle({width: width + "px",
                          height: dh + "px",
                          left: left + "px",
                          top: top + "px"
                         });
    this.shadow.setStyle('border-radius : 0; -moz-border-radius : 0; -webkit-border-radius : 0');
    this.support.setStyle({width: width + "px",
                           height: dh + "px"});
    this.support.setStyle('border-radius : 0; -moz-border-radius : 0; -webkit-border-radius : 0');

    if (this.image) {
      clearTimeout(this.timer);
      this.timer = setTimeout(this.onLoad.bind(this),200);
    }

  }

});

/*
args = [{value:1, label:'aaaaaaaaaaaa'},
        {value:2, label:'bbbbbbbbbbbb'},
        {value:3, label:'cccccccccccc'},
        {value:4, label:'dddddddddddddddddddddddddddddddddddd'}
       ];

args = <?=Hash::toJSON($trainingsHash)?>;
opts = { name:'training', id:'training', first:{value:0, label:'Sélectionner une entrée'}, onclick:console.log, container:'azeee'};
new Kwo.virtualSelect(args, opts).render();
Kwo.virtualSelect = Class.create({
  initialize: function(args, opts) {
    this.opts = opts || {name:'virtual-select'};
    this.hash = args || [];
    this.name = this.opts.name;
    this.selectBox = new Element('div', {class:'virtual-select', id:(opts.id || 'virtual-select-' + Math.floor(Math.random()*100000))});
    this.selectBox.observe('click', this.show.bindAsEventListener(this));
    this.selectBox.observe('blur', this.hide.bindAsEventListener(this));

    var inputHidden = new Element('input', {name:this.name, type:'hidden'});
    var divSelected = new Element('div', {class:'virtual-select-selected'});
    if (opts.first) {
      inputHidden.value = opts.first.value;
      divSelected.update(opts.first.label);
      this.hash.unshift(opts.first);
    }
    this.selectBox.insert(inputHidden);
    this.selectBox.insert(divSelected);

    this.optionsBox = new Element('div', {class:'virtual-select-options'}).setStyle({display:'none'});
    this.optionsBox.observe('click', this.selectOption.bindAsEventListener(this));

    this.addOptions(this.hash);
    this.selectBox.insert(this.optionsBox);
  },
  render : function() {
    if (this.opts.container) {
      $(this.opts.container).insert(this.selectBox);
    }
  },
  show : function () {
    $(this.selectBox).focus();
    $(this.selectBox).down('div.virtual-select-options').show();
  },
  hide : function () {
    $(this.selectBox).down('div.virtual-select-options').hide();
  },
  toggle : function () {
    $(this.selectBox).down('div.virtual-select-options').toggle();
  },
  selectOption : function (event) {
    event.stop();
    var elt = event.originalTarget;
    if (elt.tagName.toUpperCase() != 'A') {
      this.hide();
      return false;
    }
    var selected = $(this.selectBox).down('div.virtual-select-selected');
    selected.update($(elt).innerHTML);
    selected.writeAttribute('data-value', $(elt).readAttribute('data-value'));
    $(this.selectBox).down('input[type="hidden"]').value = $(elt).readAttribute('data-value');
    this.hide();
  },
  addOptions : function (opts) {
    opts.each(this.addOption.bind(this));
  },
  addOption : function (hash) {
    var option = new Element('a', {class:'virtual-select-option', 'data-value':hash.value}).update(hash.label);
    if (Object.isFunction(this.opts.onclick)) {
      this.optionsBox.observe('click', this.opts.onclick);
    }
    this.optionsBox.insert(option);
  }
});
*/
/*
var EssForm = {
  virtualSelect : {
    show : function (elt) { $(elt).down('div.virtual-select-options').toggle(); },
    hide : function (elt) { $(elt).down('div.virtual-select-options').hide(); },
    toggle : function (elt) { $(elt).down('div.virtual-select-options').toggle(); },
    selectOption : function (elt) {
      $(elt).up().previous('div.virtual-select-selected').update($(elt).innerHTML);
      $(elt).up().previous('input[type="hidden"]').value = $(elt).readAttribute('data-value');
    }
  }/*,
  homeSearchLoadPlace : function(elt) {
    $('searchSelectPlace').setStyle({position:'relative'});
    Kwo.exec('/essform/data.places', {id:$(elt).readAttribute('data-value')}, {callback:EssForm.homeSearchLoadPlace_callback});
    return false;
  },
  homeSearchLoadPlace_callback : function(r) {
    $('searchSelectPlace').down('div.virtual-select-selected').update($('searchSelectPlace').readAttribute('data-first'));
    var optionsBox = $('searchSelectPlace').down('.virtual-select-options');
    optionsBox.update('');
    if (r['error'] > 0) return false;
    if (r['result']['places'] && r['result']['places'].length > 0) {
      r['result']['places'].each(function (elt){
          optionsBox.insert({bottom:'<a href="javascript:void(0)" class="virtual-select-option" data-value="' + elt.id + '" onclick="EssForm.virtualSelect.selectOption(this);"  title="' + elt.name.replace('"','') + '">' + elt.name + '</a>'});
        });
    } else {
      $('searchSelectPlace').setStyle({position:'static'});
      $('searchSelectTraining').down('input[type="hidden"]').value = 0;
      alert('Pas de centre de formation disponible pour cette formation');
      return false;
    }
  }
};
*/
var EssForm = {};
EssForm.Carrousel = {
  init: function () {
    var slide = $('wrapper-carousel-content').down('div.slide').clone(true);
    slide.removeAttribute('id');
    $('wrapper-carousel-content').insert({bottom:slide});
    var selectAnchorJumper = function(e) {
        try {
          $$('.wrapper-carousel-box .controls-box li').invoke('removeClassName', 'hover');
          $$('.wrapper-carousel-box .controls-box li').invoke('removeClassName', 'selected');
          $$('.wrapper-carousel-box .controls-box li a.carousel-jumper[rel="' + (this.current.id || this.slides[0].id) + '"]')[0].up('li').addClassName('selected');
        } catch(ex) { console.log(ex); }
      };
    new Carousel('wrapper-carousel', $$('#wrapper-carousel-content .slide'), $$('.wrapper-carousel-box a.carousel-control, .wrapper-carousel-box .controls-box a.carousel-jumper'),
                  {circular:true, wheel:false, auto:true, frequency:8, duration:0.5, beforeMove:selectAnchorJumper, initial:'carousel-slide-1'});
    $$('.wrapper-carousel-box .controls-box li a.carousel-jumper').invoke('observe', 'mouseover', function() { if (!$(this).up('li').hasClassName('selected')) $(this).up('li').addClassName('hover'); });
    $$('.wrapper-carousel-box .controls-box li a.carousel-jumper').invoke('observe', 'mouseout', function() { if (!$(this).up('li').hasClassName('selected')) $(this).up('li').removeClassName('hover'); });
  }
};

EssForm.Menu = {
  init: function () {
    $$('.wrapper-header > ul.nav > li').each(
      function(el) {
        if (el.down('ul.nav-sub')) {
          el.observe('mouseover', (function() { $(this).down('a').addClassName('mouseover'); $(this).down('ul.nav-sub').show(); }).bind(el) );
          el.observe('mouseout', (function() { $(this).down('a').removeClassName('mouseover'); $(this).down('ul.nav-sub').hide(); }).bind(el) );
        }
      });
  }
};

EssForm.virtualSelect = {
  overlay : null,
  opener : null,
  init : function () {
    $$('#searchSelectTraining, #searchSelectPlace, #contactSelectRenseignement').each(function(elt) { elt.observe('click', EssForm.virtualSelect.show.bindAsEventListener(elt, elt)); });
    $$('.virtual-select a.virtual-select-option').each(function(elt) { elt.observe('click', EssForm.virtualSelect.selectOption.bindAsEventListener(elt, elt)); });
  },
  show : function (event, elt) {
    event.stop();

    if (EssForm.virtualSelect.opener != null) {
      if (EssForm.virtualSelect.opener == elt) {
        EssForm.virtualSelect.close(event);
        return;
      } else {
        EssForm.virtualSelect.close(event);
      }
    }
    if ($(event.findElement()).tagName.toUpperCase() == 'A') return false;
    EssForm.virtualSelect.opener = $(elt);
    var layout = EssForm.virtualSelect.opener.positionedOffset();
    var t = layout.top + EssForm.virtualSelect.opener.getHeight();
    var l = layout.left;
    EssForm.virtualSelect.opener.down('div.virtual-select-options').setStyle({top:t+'px', left:l+'px', zIndex:1}).show();
    var fn = function () {
       EssForm.virtualSelect.close(event);
       document.body.stopObserving('click', fn);
    }
    Event.observe(document.body, "click", fn);
  },
  onEscape: function (event) {
    if (event.keyCode == Event.KEY_ESC) {
      event.stopPropagation();
      EssForm.virtualSelect.close();
    }
  },
  close : function (event) {
    if (!EssForm.virtualSelect.opener || !$(event.findElement()).hasClassName('virtual-select-option') && !$(event.findElement()).hasClassName('virtual-select-selected')) return false;
    $(EssForm.virtualSelect.opener).down('div.virtual-select-options').hide();
    EssForm.virtualSelect.opener = null;
  },
  selectOption : function (event, elt) {
    $(elt).up().previous('div.virtual-select-selected').update($(elt).innerHTML);
    $(elt).up().previous('input[type="hidden"]').value = $(elt).readAttribute('data-value');
    EssForm.virtualSelect.close(event);
  }
};

EssForm.Polaroid = {
  box : 'wrapper-polaroid',
  load : function() {
    new Carousel(EssForm.Polaroid.box, $$('#wrapper-polaroid .wrapper-polaroid-content .slide'), null,
                 {effect:'fade', circular:true, wheel:false, auto:true, frequency:3, duration:0.5});
  },
  go : function (offset){
    Kwo.exec('/essform/polaroid', {offset:offset}, {container:$(EssForm.Polaroid.box).up('.polaroid-box'), callback:EssForm.Polaroid.load})
  }
};

EssForm.trainingSearch = {
  offset : function (elt, offset) {
    var form = $(elt).up('form');
    form.down('input[name="offset"]').value = offset;
    form.submit();
    return false;
  },
  order : function (elt, args) {
    var form = $(elt).up('form');
    form.down('input[name="order"]').value = args.order;
    form.down('input[name="desc"]').value = args.desc || 0;
    form.submit();
    return false;
  }
};

EssForm.trainingNav = {
  current: false,
  init : function () { $$('body > .wrapper > .wrapper-content > .trainings-nav-box > ul.menu > li.lv1 > a').each(EssForm.trainingNav.addObservers); },
  addObservers : function (elt) { elt.observe('click', EssForm.trainingNav.addObserver.bindAsEventListener(elt)); },
  addObserver : function(event){
    event.stop();
    if (EssForm.trainingNav.current) return false;
    Effect.toggle($(this).next('ul.smenu'), 'blind', { duration: 0.3,
                                                       afterFinish:EssForm.trainingNav.effectCallback.curry(1).bind(this),
                                                       afterUpdate:EssForm.trainingNav.effectCallback.bind(this) });
    $$('body > .wrapper > .wrapper-content > .trainings-nav-box > ul.menu > li.lv1 > a').each(EssForm.trainingNav.hideAll.bind(this));
    EssForm.trainingNav.current = true;
  },
  hideAll : function(elt) {
    if (elt != this) {
      Effect.BlindUp($(elt).next('ul.smenu'), { duration: 0.2,
                                                afterFinish:EssForm.trainingNav.effectCallback.bind(elt),
                                                afterUpdate:EssForm.trainingNav.effectCallback.bind(elt) });
    }
  },
  effectCallback : function(finish) {
    if ($(this).next('ul.smenu').visible()) {
      $(this).up('li.lv1').addClassName('selected');
    } else {
      $(this).up('li.lv1').removeClassName('selected');
    }
    if (finish == 1) {
      EssForm.trainingNav.current = false;
    }
  }
}

EssForm.Tabs = {
  init : function() {
    $$('body > .wrapper > .wrapper-content > .col-left > .tabs .tab').each(function(elt) { elt.observe('click', EssForm.Tabs.showTab.bindAsEventListener(elt)); });
/*
    if (window.location.hash) {
      var tabs = $$('body > .wrapper > .wrapper-content > .col-left > .tabs .tab[href="' + window.location.hash + '"]');
      var tabContainer =  $(window.location.hash.substr(1));
      if(tabContainer && tabs.length == 1) {
        window.setTimeout( EssForm.Tabs.showTab.bindAsEventListener(tabs[0]) , 750, null);
      }
    }
*/
  },
  showTab : function(event) {
    event.stop();
    this.up('.tabs').select('.tab').each(EssForm.Tabs.hideTab);
    this.addClassName('selected-tab');
    $('tab-' + this.readAttribute('data-tab')).show();
  },
  hideTab : function(elt) {
    elt.removeClassName('selected-tab');
    $('tab-' + elt.readAttribute('data-tab')).hide();
  }
};

EssForm.Gmap = {
  map : null,
  init : function(lat, lng, z, elt) {
    try {
      if (elt && !$('tab-' + elt).visible()) {
        $$('.place-box .tabs .tab[data-tab="' + elt + '"]')[0].observe('click', EssForm.Gmap.init.curry(lat, lng, z, elt));
        return false;
      }
      if (EssForm.Gmap.map || elt && !$('tab-' + elt).visible()) return false;
      google.load('maps', 3, {"other_params": "sensor=false",
                              "callback": EssForm.Gmap.google_callback.curry(lat, lng, z)});
    } catch (e) { console.log(e); }
  },
  google_callback : function(lat, lng, z){
    var point = new google.maps.LatLng(lat, lng);
    var opts = {"zoom": z, "center": point, "mapTypeId": google.maps.MapTypeId.ROADMAP, "scrollwheel": false};
    EssForm.Gmap.map =  new google.maps.Map(document.getElementById('gmap-container'), opts);
    new google.maps.Marker({"map": EssForm.Gmap.map,
                            "position": point,
                            "shadow": null,
                            "clickable":false});
  }
}