/*
------------------------------------------------------------------------------------------------------------
Script create for the needs Cocolico <http://cocolico.info> 
Author : Thuan Huynh <toluna@gmx.net>
Update : January 9, 2005
Some rights reserved. You can use all the following elements as long as you give me credit and 
keep your deritative works under the same Creative Commons licence and never try to use your 
work commercially. Please read the Creative Commons 'BY.SHARE.ALIKE.NON.COMMERCIAL' 
licence for further details : http://creativecommons.org/licenses/by-nc-sa/2.0/fr/
------------------------------------------------------------------------------------------------------------
*/

// The two following functions have been written by Sam Stephenson <sam@conio.net> 
var Class = {
  create: function() {
    return function() { 
      this.initialize.apply(this, arguments);
    }
  }
}

Function.prototype.bind = function(object) {
  var __method = this;
  return function() {
    __method.apply(object, arguments);
  }
}

function id(objectName) {
	return document.getElementById(objectName);
}

// ----------------
// ANIMATIONS

var FX = Class.create();
FX.prototype = {
	initialize: function() {},
	
	roll: function() {
		this.clearTimer();
		if (this.smooth <= 0) {
			this.clearTimer();
			this.show(this.headline);
			return;
		}
		this.now = Math.round((this.to - this.from) / this.smooth);
		this.xRoll(-this.now, this.now);
		this.from += this.now;
		this.smooth--;		
		this.timer = setInterval(this.roll.bind(this), 12);
	},

	reset: function(root) {
		this.clearTimer();
		this.element.style.display = (this.element.style.display == "none") ? "block" : "none";
		this.element.style.left = root.element.offsetLeft - root.delta[0] + "px";
		this.element.style.width = "0px";
		this.smooth = 8;
		this.from = 0;
	},
	
	pop: function() {
		this.bubble.reset(this);
		if (this.smooth > 0) {
			this.xRoll(-this.delta[0], 2*this.delta[0]);
			this.yRoll(-this.delta[1], 2*this.delta[1]);
			setTimeout(this.bubble.roll.bind(this.bubble), 280);
		}
		else {
			this.show(this.bubble.headline);
			this.xRoll(this.delta[0], -2*this.delta[0]);
			this.yRoll(this.delta[1], -2*this.delta[1]);
		}
		this.smooth = -this.smooth;
	},
	
	rollDown: function() {
		this.clearTimer();
		if (this.smooth <= 0) {
			this.clearTimer();
			this.content.className = "";
			return;
		}
		this.now = Math.round((this.to - this.from) / this.smooth);
		this.yRoll(0, this.now);
		this.from += this.now;
		this.smooth--;		
		this.timer = setInterval(this.rollDown.bind(this), 12);
	},
	
	xRoll: function(x, dx) {
		this.element.style.width = this.element.offsetWidth + dx + "px";
		this.element.style.left = parseInt(this.element.style.left) + x + "px";
	},
	
	yRoll: function(y, dy) {
		this.element.style.height = this.element.offsetHeight + dy + "px";
		this.element.style.top = parseInt(this.element.style.top) + y + "px";
	},
	
	show: function(elem) {
		elem.style.display = (elem.style.display == "none") ? "block" : "none";
	},
	
	clearTimer: function() {
		if (this.timer) clearInterval(this.timer);
	}
}

function Thumb(element, delta, smooth) {
  this.element = element;
	this.delta = delta;
	this.smooth = smooth;
  this.bubble = new Bubble(this.element);
  this.element.onmouseover = this.element.onmouseout = this.pop.bind(this);
}

Thumb.prototype = new FX();

function Bubble(root) {
  this.element = document.createElement('div');
  this.element.className += 'carre';
  this.headline = document.createElement('h3');
  this.text = document.createTextNode(this.getAlt(root));
	this.element.style.top = parseInt(root.style.top) - 17 + "px"; // Correctly position the block
  this.element.style.left = parseInt(root.style.left) + 3 + "px";
  this.element.style.display = this.headline.style.display = 'none'; 
	this.to = 135;
	this.from = 0;
	this.smooth = 8;
	root.parentNode.appendChild(this.element).appendChild(this.headline).appendChild(this.text);
}

Bubble.prototype = new FX();

Bubble.prototype.getAlt = function(elem) {
	return elem.getElementsByTagName("img")[0].getAttribute("alt");
}

var Thumbing = Class.create();
Thumbing.prototype = {
	initialize: function(root, nodeType, delta, smooth) {
		this.root = root;
		this.target = nodeType;
		this.delta = delta;
		this.smooth = smooth;
		this.thumblist = this.settle();
	},
	
	settle: function() {
		var o = document.getElementById(this.root);
		var thumbs = o.getElementsByTagName(this.target);
		var list = new Array(thumbs.length);
		var coord = new Array(thumbs.length);
		for (var i = 0; i < thumbs.length; i++) {
			coord[i] = [thumbs[i].offsetLeft, thumbs[i].offsetTop];
		}
		for (i = 0; i < thumbs.length; i++) {
			thumbs[i].className += ' frozen';
			thumbs[i].style.top = coord[i][1] + 'px';
			thumbs[i].style.left = coord[i][0] - 24 + 'px'; // Trick to overcome the thumbs left margin 
			list[i] = new Thumb(thumbs[i], this.delta, this.smooth);
		}
		return list;
	}
}


window.onload = function () {
	var showArchives = new Thumbing('armoire', 'dd', [21, 17], 1);
}