function init() {
	new Ajax.Request('data.json', {
		method:'post',
		onSuccess: function(transport){		  
			new DumpNavi(transport.responseText.evalJSON(true));
		}
	})
	
	Event.observe(window, 'scroll', windowScroll.bindAsEventListener(this));
}

function windowScroll(event) {
	var mainLeft = 25;

	var main = $('main');
	var mainWidth = Math.max(main.getWidth(), $('dumpApplet').getWidth() + 14) + 25;

	var mainX = mainLeft + PageInfo.getScrollLeft();
	var overflowX = Math.constrain((mainLeft + mainWidth) - PageInfo.getWidth(), 0, null);
	mainX -= Math.constrain(PageInfo.getScrollLeft(), 0, overflowX);

	$('main').setStyle({left: mainX + 'px'});
}

Math.constrain = function(value, min, max) {
	if ( max != null && value > max ) {
		value = max;	
	}
	
	if ( min != null && value < min ) {
		value = min;	
	}
	
	return value;
}

/******************************************************
 *  DumpApplet                                        *
 ******************************************************/
var DumpApplet = function() {};
DumpApplet.show = function() {
	try {
//		$('dumpApplet').show();
		$('dumpApplet').setStyle({visibility: 'visible'});
		$('dumpApplet').up().setStyle({borderColor: '#000000'});
	}
	catch(e) {
	}
}

DumpApplet.hide = function() {
	try {
//		$('dumpApplet').hide();
		$('dumpApplet').setStyle({visibility: 'hidden'});
		$('dumpApplet').up().setStyle({borderColor: '#00ADEE'});
	}
	catch(e) {
	}
}


/******************************************************
 *  PageInfo                                          *
 ******************************************************/
var PageInfo = function() {};
PageInfo.getWidth = function() {
	var result;
	
	if (self.innerHeight) {
		result = self.innerWidth;
	}
	else if (document.documentElement && document.documentElement.clientWidth) {
		result = document.documentElement.clientWidth;
	}
	else if (document.body) {
		result = document.body.clientWidth;
	}
	
	return result;	
}


PageInfo.getHeight = function() {
	var result;
	
	if (self.innerHeight) {
		result = self.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientHeight) {
		result = document.documentElement.clientHeight;
	}
	else if (document.body) {
		result = document.body.clientHeight;
	}
	
	return result;	
}

PageInfo.getScrollLeft = function() {
	var result;

	if (self.pageXOffset) {
		result = self.pageXOffset;
	}
	else if (document.documentElement && document.documentElement.scrollLeft) {
		result = document.documentElement.scrollLeft;
	}
	else if (document.body) {
		result = document.body.scrollLeft;
	}

	return result;	
}

PageInfo.getScrollTop = function() {
	var result;

	if (self.pageYOffset) {
		result = self.pageXOffset;
	}
	else if (document.documentElement && document.documentElement.scrollTop) {
		result = document.documentElement.scrollTop;
	}
	else if (document.body) {
		result = document.body.scrollTop;
	}

	return result;	
}

/******************************************************
 *  DumpNavi                                          *
 ******************************************************/
var DumpNavi = Class.create();
DumpNavi.active = false;
DumpNavi.prototype = {
	initialize: function(data) {
		this.isOver = false;
		this.isInArea = false;		
		
		this.c = document.createElement('div');
		Element.extend(this.c);
		this.c.addClassName('dumpNaviRoot');
		document.body.appendChild(this.c);
		
		this.containers = new Array();
		for ( var i = 0; i < data.length; i++ ) {
			var cnt = new ThumbContainer(data[i], this, this.c, i * 110, i);
			this.addContainerHeight(cnt.contentHeight);
			this.containers.push(cnt);
		}

		this.contentWidth = ((this.containers.length - 1) * 110) + 144;		
		this.containersZOrder();
				
		ThumbInfo.createInstance(this.c, this.containers.length);
		
		Event.observe(document, 'mousemove', this.documentMouseMove.bindAsEventListener(this));
		Event.observe(document, 'mouseout', this.documentMouseOut.bindAsEventListener(this));		
		Event.observe(this.c, 'mouseout', this.mouseOut.bindAsEventListener(this));
		Event.observe(this.c, 'mouseover', this.mouseOver.bindAsEventListener(this));		
	},
	
	documentMouseMove: function(event) {
		if ( Event.pointerY(event) < 200 ) {			
			this.isInArea = true;
			this.setActive(true);	
		}
		else {
			this.isInArea = false;
			if ( !this.isInArea && !this.isOver ) {
				this.setActive(false);
			}
		}
	},
	
	documentMouseOut: function(event) {	
		try {
			if ( (String(event.relatedTarget) != 'undefined' && event.relatedTarget == null) || (String(event.toElement) != 'undefined' && event.toElement == null) ) {
				this.isInArea = false;
				if ( !this.isInArea && !this.isOver ) {
					this.setActive(false);
				}
			}
		}
		catch(e) {	
		}
	},
	
	containerOver: function(position) {		
		for ( var i = 0; i < this.containers.length; i++ ) {
			if ( i < position ) {
				this.containers[i].setZIndex(i);
				this.containers[i].setDateLeft(true);
			}
			else {
				this.containers[i].setZIndex(this.containers.length - 1 + position - i);
				this.containers[i].setDateLeft(false);					
			}
		}
	},
	
	containersZOrder: function() {
		for ( var i = 0; i < this.containers.length; i++ ) {
			this.containers[i].setZIndex(this.containers.length - i - 1);
		}
	},
	
	mouseOut: function(event) {		
		if ( isOutOfContainer(this.c, event) ) {
			this.isOver = false;
			
			if ( !this.isInArea && !this.isOver ) {
				this.setActive(false);
			}
		}
	},
	
	mouseOver: function(event) {
		this.isOver = true;
	},

	addContainerHeight: function(height) {
		if ( (this.contentHeight < height) || (this.contentHeight == undefined) ) {
			this.contentHeight = height;
		}
	},
	
	setActive: function(isActive) {
		if ( DumpNavi.active != isActive ) {
			DumpNavi.active = isActive;
		
			if ( DumpNavi.active ) {
				DumpApplet.hide();
				this.c.setStyle({zIndex: 1, cursor: 'pointer'});			
			}
			else {
				this.c.setStyle({zIndex: 0, cursor: 'default'});
				DumpApplet.show();
	
				this.containersZOrder();
				for ( var i = 0; i < this.containers.length; i++ ) {		
					this.containers[i].setDateLeft(false);
				}			
			}
		}
	}

}


/******************************************************
 *  ThumbContainer                                    *
 ******************************************************/
var ThumbContainer = Class.create();
ThumbContainer.prototype = {
	initialize: function(dataCol, parent, parentNode, x, position) {
		this.parent = parent;
		this.position = position;
		this.heightVisible = Math.round(84 - (40/10) * Math.constrain(dataCol.length, 1, 10));
		
		this.c = document.createElement('div');
		Element.extend(this.c);
		this.c.addClassName('thumbContainer');
		this.c.setStyle({left:x + 'px'});		
		parentNode.appendChild(this.c);
		
		this.thumbs = new Array();
		for ( var i = 0; i < dataCol.length; i++ ) {
			this.thumbs.push(new Thumb(dataCol[i], this, this.c, i * this.heightVisible, i));
		}
		
		this.contentWidth = 144;
		this.contentHeight = ((this.thumbs.length -1) * this.heightVisible) + 109;
		
		Event.observe(this.c, 'mouseout', this.mouseOut.bindAsEventListener(this));
	},

	mouseOut: function(event) {
		if ( DumpNavi.active ) {
			if ( isOutOfContainer(this.c, event) ) {
				// children (thumb)
				ThumbInfo.getInstance().hide();
				
				for ( var i = 0; i < this.thumbs.length; i++ ) {
					this.thumbs[i].setZIndex(i);
					this.thumbs[i].dateAlign(null, true);
				}	
			}
		}
	},
	
	thumbOver: function(position) {	
		this.parent.containerOver(this.position);

		for ( var i = 0; i < this.thumbs.length; i++ ) {
			if ( i < position ) {
				this.thumbs[i].setZIndex(i);	
			}
			else {
				this.thumbs[i].setZIndex(this.thumbs.length - i + position - 1);
			}
			
			if ( i <= position ) {
				this.thumbs[i].dateAlign(null, true);
			}
			else {
				this.thumbs[i].dateAlign(null, false);
			}
		}
	},
	
	setZIndex: function(zIndex) {
		this.c.setStyle({zIndex: zIndex});	
	},
	
	setDateLeft: function(isLeft) {
		if ( (isLeft != null) && (this.dateLeft != isLeft) ) {
			this.dateLeft = isLeft;				
		
			for ( var i = 0; i < this.thumbs.length; i++ ) {
				this.thumbs[i].dateAlign(isLeft, null);	
			}
		}
	}
}

/******************************************************
 *  Thumb                                             *
 ******************************************************/
var Thumb = Class.create();
Thumb.prototype = {
	initialize: function(dataThumb, parent, parentNode, y, position) {	
		this.data = dataThumb;
		this.parent = parent;
		this.position = position;
	
		this.c = document.createElement('div');
		Element.extend(this.c);
		this.c.addClassName('thumb');
		this.c.setStyle({top:(y) + 'px', zIndex: position});		

		var img = document.createElement('img');
		Element.extend(img);
		img.setAttribute('src', this.data.src);
		img.setAttribute('width', 140);
		img.setAttribute('height', 105);
		this.c.appendChild(img);


		if ( this.data.dateDay && this.data.dateDate ) {
			this.divDay = document.createElement('div');
			Element.extend(this.divDay);
			this.divDay.addClassName('thumbDay');
			this.divDay.innerHTML = '<h2>' + this.data.dateDay + '</h2>';
			this.c.appendChild(this.divDay);
	
			this.divDate = document.createElement('div');
			Element.extend(this.divDate);
			this.divDate.addClassName('thumbDate');
			this.divDate.innerHTML = '<h1>' + this.data.dateDate + '</h1>';
			this.c.appendChild(this.divDate);
		}


		parentNode.appendChild(this.c);

		this.size = this.c.getDimensions();
		if ( this.data.dateDay && this.data.dateDate ) {
			this.divDaySize = this.divDay.getDimensions();
			this.divDateSize = this.divDate.getDimensions();
			this.dateAlign(false, true);
		}

		Event.observe(this.c, 'click', this.mouseClick.bindAsEventListener(this));
		Event.observe(this.c, 'mouseover', this.mouseOver.bindAsEventListener(this));
//		Event.observe(this.c, 'mouseout', this.mouseOut.bindAsEventListener(this));		
	},
	
	mouseClick: function() {
		if ( DumpNavi.active ) {
			window.location.href = 'index.php?id=' + this.data.id;
		}
	},
	
	mouseOver: function() {
		if ( DumpNavi.active ) {
//			this.c.setStyle({cursor:'pointer'});
	//		this.dateVisibility(false);
			var pos = Position.cumulativeOffset(this.c);
			ThumbInfo.getInstance().show(pos[0] + this.size.width + 1, pos[1] + this.size.height, this.data.author, this.data.title);
	
			this.parent.thumbOver(this.position);
		}
	},
	
	mouseOut: function() {
//		this.c.setStyle({cursor:'default'});
//		this.dateVisibility(true);
	},	
	
	setZIndex: function(zIndex) {
		this.c.setStyle({zIndex: zIndex});	
	},
	
	dateVisibility: function(show) {
		if ( this.divDate ) {
			if ( show ) {
				this.divDate.show();
				this.divDay.show();
			}
			else {
				this.divDate.hide();
				this.divDay.hide();
			}			
		}
	},
	
	dateAlign: function(isLeft, isTop) {
		if ( this.data.dateDay && this.data.dateDate ) {
			if ( (isLeft != null) && (this.dateLeft != isLeft) ) {
				this.dateLeft = isLeft;				
				var dayX = 0;				
				var dateX = 0;
	
				if ( isLeft ) {
					dateX = this.divDaySize.width - this.divDateSize.width;
					dayX = 0;
				}
				else {
					dayX = this.size.width - this.divDaySize.width;
					dateX = this.size.width - this.divDateSize.width;
				}
	
				this.divDate.setStyle({left: dateX + 'px'});
				this.divDay.setStyle({left: dayX + 'px'});
			}
				
			if ( (isTop != null) && (this.dateTop != isTop)	) {
				this.dateTop = isTop;				
				var dayY = 0;
				var dateY = 0;
		
				if ( isTop ) {
					dateY = 0;
					dayY = 5;
				}
				else {
					dayY = this.size.height - this.divDaySize.height;
					dateY = dayY - 5;
				}
				
				this.divDate.setStyle({top: dateY + 'px'});
				this.divDay.setStyle({top: dayY + 'px'});
			}
		}
	}	
	
}

/******************************************************
 *  ThumbInfo                                         *
 ******************************************************/
var ThumbInfo = Class.create();

ThumbInfo.createInstance = function(parentNode, zIndex) {
	if ( ThumbInfo.instance == undefined ) {
		ThumbInfo.instance = new ThumbInfo(parentNode, zIndex);
	}	
}

ThumbInfo.getInstance = function() {
	return ThumbInfo.instance;
}

ThumbInfo.prototype = {
	initialize: function(parentNode, zIndex) {
		new Insertion.Bottom(parentNode, '<div id="thumbAuthorBack"></div><div id="thumbTitle"><p>&nbsp;</p></div><div id="thumbAuthor"><p>&nbsp;</p></div>');
		
		this.thumbAuthor = $('thumbAuthor');
		this.thumbAuthorBack = $('thumbAuthorBack');
		this.thumbTitle = $('thumbTitle');
		this.height = this.thumbAuthor.getHeight() + this.thumbTitle.getHeight() - 2;

		this.thumbAuthor.setStyle({zIndex: zIndex});
		this.thumbAuthorBack.setStyle({zIndex: zIndex, height: $('thumbAuthor').getHeight() + 'px'});
		this.thumbTitle.setStyle({zIndex: zIndex});

		this.thumbAuthor.hide();
		this.thumbAuthorBack.hide();
		this.thumbTitle.hide();
	},
	
	show: function(left, bottom, author, title) {
		this.thumbAuthor.firstDescendant().innerHTML = author;
		this.thumbAuthorBack.setStyle({width: $('thumbAuthor').getWidth() + 'px'});
		this.thumbTitle.firstDescendant().innerHTML = title;
		
		this.thumbAuthor.setStyle({left: left + 'px', top: (bottom - this.height) + 'px'});
		this.thumbAuthorBack.setStyle({left: left + 'px', top: (bottom - this.height) + 'px'});
		this.thumbTitle.setStyle({left: left + 'px', top: (bottom - this.height + 9) + 'px'});	
		
		this.thumbAuthor.show();
		this.thumbAuthorBack.show();
		this.thumbTitle.show();			
	},
	
	hide: function() {
		this.thumbAuthor.hide();
		this.thumbAuthorBack.hide();
		this.thumbTitle.hide();			
	}
}

function isOutOfContainer(c, event) {
	try {
		return (
			(
				(
					String(event.relatedTarget) != 'undefined'
				)
				&&
				(
					(event.relatedTarget == null)
					||
					!event.relatedTarget.descendantOf(c)
				)
			)
			||
			(
				(
					String(event.toElement) != 'undefined'
				)
				&&
				(
					(event.toElement == null)
					||
					!Element.extend(event.toElement).descendantOf(c)
				)
			)
		);	
	}
	catch(e) {
	}
}

function debug(str) {
	$('debug').innerHTML += str + '<br />';	
}

function mse() {
	var s = '';
	
	for (var i = 0; i < mse.arguments.length; ++i) {
    	s += String.fromCharCode(mse.arguments[i] - (i%25));
	}
	
	document.write('<a href="mailto:' + s + '">');
}