Element.implement({
	isVisible: function() {
		return this.getStyle('display') != 'none';
	},
	toggle: function() {
		return this[this.isVisible() ? 'hide' : 'show']();
	},
	hide: function() {
		this.originalDisplay = this.getStyle('display'); 
		this.setStyle('display','none');
		return this;
	},
	show: function(display) {
		this.originalDisplay = (this.originalDisplay=="none")?'block':this.originalDisplay;
		this.setStyle('display', (display || this.originalDisplay || 'block'));
		return this;
	},
  dwindle: function () {
    var element = this;
    new Fx.Morph(element, {
  		duration: 600,
  		onComplete: function () { element.remove(); }
  	}).start({ 
  	  'opacity': 0,
  	  'width': 0,
  	  'height': 0
  	});
  }
});

String.implement({
  endsWith: function(pattern) {
    var d = this.length - pattern.length;
    return d >= 0 && this.lastIndexOf(pattern) === d;
  }
});

Window.implement({
	$E: function(selector){
		return this.document.getElement(selector);
	}
});

var i = null;
window.addEvent('domready', function(){
  i = new Interface();
	i.activate();
});

var Interface = new Class({
	initialize: function(){

	},
	activate: function () {
		this.nav = new NavBar();
    this.findTabs();
    // this.findEditables();
    this.findWatchButtons();
    this.fadeNoticesSoon();
    this.getForms();
    this.flashAnchor();
  },
  findTabs: function () {  
    $$('a.tab').each(function (element) { new Tab(element); });
  },
  findBanners: function () {
    $$('a.banner').each(function (element) { new BannerAd(element); });
  },
	closeEvent: function (e) {
		if (e) {
			if (e.target) e.target.blur();
			return new Event(e).stop();
		}
	},
  fadeNoticesSoon: function () {
    (function () { i.fadeNotices(); }).delay(2000);
  },
  fadeNotices: function () {
    var div;
    if (div = $E('div#notice')) div.fade('out');
    if (div = $E('div#error')) div.fade('out');
  },
  findEditables: function () {
//    var session = Cookie.read('_radiant_session');
//    console.log(session);
//    $$('.editme').each(function (element) { new Editable(element); });
    
  },
  getForms: function () {
    $$('a.get_form').each(function (a) { this.replaceWithDestination(a); }, this);
  },
  findWatchButtons: function () {
    $$('input.monitor_submit').each(function (element) { element.hide(); });
   FancyForm.start( 
     $$('input.monitor_checkbox'), {
     onSelect: function(chk){ i.remoteCheckBox(chk); },
     onDeselect: function(chk){ i.remoteCheckBox(chk); }
    });
  },
  remoteCheckBox: function (chk) {
    var form = this.findContainingForm(chk);
    if (form) {
      var methodfield = form.getElement('#_method');
      if (methodfield) methodfield.value = chk.hasClass('checked') ? '' : 'delete';
      var req = new Request.JSON({
        url: form.get('action'),
        onRequest: function () { chk.addClass('waiting'); },
        onSuccess: function (response) { chk.removeClass('waiting'); chk.highlight(); },
        onFailure: function (response) { chk.removeClass('waiting'); chk.addClass('error'); }
      }).post(form);
    }
  },
  findContainingForm: function (element) {
    var p = element.getParent();
    if (!p) return;
    if (p.get('tag') == 'form') return p;
    return this.findForm(p);
  },
  replaceWithDestination: function (a) {
    a.addClass('waiting');
    var formholder = a.getParent();
    formholder.load(a.get('href'));
  },
  flashAnchor: function () {
    var hash = window.location.hash;
    if (hash && $E(hash)) $E(hash).highlight();
  }
});

var NavBar = new Class({
	initialize: function () {
		this.div = $E('div#navigation');
		this.timer = null;
		this.opento = this.div.getHeight();
		this.closeto = 0;
		var nb = this;
    this.openFX = new Fx.Tween(this.div, {
      'property': 'height',
      'duration': 'normal', 
      'transition': 'bounce:out', 
      'onStart': function () { nb.div.addClass('open'); nb.state = 'opening';}, 
      'onComplete': function () { nb.state = 'open';}
    });
    this.closeFX = new Fx.Tween(this.div, {
      'property': 'height',
      'duration': 'long', 
      'transition': 'cubic:out', 
      'onStart': function () { nb.state = 'closing'; }, 
      'onComplete': function () { nb.div.removeClass('open'); nb.state = 'closed';}
    });
		this.closeFX.set(this.closeto);
		this.state = 'closed';
		this.div.setStyle('visibility', 'visible');
		
		var openbar = this.open.bindWithEvent(this);
		var closebar = this.close.bindWithEvent(this);
		var closebarsoon = this.closeSoon.bindWithEvent(this);
		var cancelclose = this.cancelClose.bindWithEvent(this);
		
 		this.div.addEvent('mouseenter', openbar);
		this.div.addEvent('mouseleave', closebarsoon);
 		$$('.hidenav').each(function (a) { 
			a.onclick = closebar;
		});
 		$$('.shownav').each(function (a) { 
			a.onmouseover = openbar;
			a.onmouseout = closebarsoon;
		});
	},
	open: function (e) {
		if (e) var event = i.closeEvent(e);
		this.cancelClose();
		if (this.state.contains('clos')) {
		  if (this.state == 'closing') this.closeFX.cancel();
		  this.openFX.start(this.opento);
	  }
	},
	close: function (e) {
		if (e) var event = i.closeEvent(e);
		if (this.state.contains('open')) {
		  if (this.state == 'opening') this.openFX.cancel();
		  this.closeFX.start(this.closeto);
	  }
	},
	closeSoon: function (e) {
		if (e) var event = i.closeEvent(e);
		var nb = this;
		this.timer = (function () { nb.close(); }).delay(500);
	},
	cancelClose: function (e) {
		var event = i.closeEvent(e);
		$clear(this.timer);
	}
});


var Tab = new Class({
	initialize: function(element){
		this.tabhead = element;
		this.name = this.tabhead.get('text');
    var parts = element.id.split('_');
		this.tag = parts.pop();
		this.settag = parts.pop();
		this.tabbody = $E('#' + this.settag + '_' + this.tag);
    this.tabset = i.tabsets[this.settag] || new TabSet(this.settag);
    this.tabset.addTab(this);
 		this.tabhead.onclick = this.select.bind(this);
 		this.colour = null;
    ['blue', 'green', 'orange', 'midgrey'].each(function (c) {
      if (this.tabhead.hasClass(c)) this.colour = c;
    }, this);
 		i.tabs.push(this);
	},
	select: function (e) {
	  if (e) {
	    e = new Event(e).stop();
	    e.preventDefault();
	  }
	  this.tabhead.blur();
    this.tabset.select(this);
	},
  show: function(){
    this.tabhead.addClass('fg');
    this.tabbody.show();
  },
  hide: function(){
    this.tabbody.hide();
    this.tabhead.removeClass('fg');
  }
});

var TabSet = new Class({
	initialize: function(tag){
	  this.tabs = [];
    this.tag = tag;
    this.foreground = null;
    this.rolling = false;
 		i.tabsets[this.tag] = this;
	},
	addTab: function (tab) {
    this.tabs.push(tab);
    if (this.tabs.length == 1) {
      tab.show();
      this.foreground = tab;
    } else {
      tab.hide();
    }
	},
	select: function (tab) {
	  this.tabs.each(function (t) { 
	    if (t.tag == tab.tag) {
	      t.show();
	      this.foreground = t;
	    } else {
        t.hide();
	    }
	  }, this);
	},
  next: function (tab) {
    if (!tab) tab = this.foreground;
    var i = this.tabs.indexOf(tab);
    return (i == this.tabs.length-1) ? this.tabs[0] : this.tabs[i+1];
  },
  previous: function (tab) {
    if (!tab) tab = this.foreground;
    var i = this.tabs.indexOf(tab);
    return (i == 0) ? this.tabs.getLast() : this.tabs[i-1];
  },
  showNext: function (e) { 
		i.closeEvent(e);
    this.select(this.next()); 
  },
  showPrev: function (e) { 
		i.closeEvent(e);
    this.select(this.previous()); 
  },
	play: function () {},
	stop: function () {}
});

var Editable = new Class({
  initialize: function (element) {
    var ed = this;
    this.header = element;
    var parts = this.header.id.split('_');
    var url = '/admin/' + parts[parts.length-2] + 's/edit/' + parts[parts.length-1];
    this.header.addEvent('mouseenter', function () { ed.up(); });
    this.header.addEvent('mouseleave', function () { ed.down(); });
    this.pilcrow = new Element('a', {'href': url, 'class': 'editmarker', 'title': 'edit or delete this'}).set('html', ' ¶').inject(this.header, 'bottom');
    this.down();
  },
  up: function(e){
    this.pilcrow.setStyle('opacity', 1);
  },
  down: function(e){
    this.pilcrow.fade(0.1);
  }
});