/****************************************************
 * nikkei block replace program
 * 
 * 2010.02.22 takagi 
****************************************************/


/**
 * Avoid conflict
 */
jQuery.noConflict();

/**
 * Settings
 */
var DURATION = 500; // easing DURATION
var MOVE_EASING = "easeInOutCubic"; // easing type
var SIZE_EASING = "easeOutCubic"; // easing type
var W = 186;// base width
var M = 15; // margin
var WM = W+M; // width + margin;
var BOX_CLASS = ["single","double","triple"];
var MAX_SIZE = BOX_CLASS.length;
var MAX_CLASS = BOX_CLASS[BOX_CLASS.length-1];
var MIN_W = (MAX_SIZE*WM)-M;
var blocks = [];
var rBlocks = [];
var blocksList = {};
var rBlocksList = {};
var menu, footer, rBlock, root, wrapper, container;
var blocksLen = rBlocksLen = menuW = rBlockW = 0;
var existR = 0;


(function($){
$(document).ready(function(e){
	$("body").css("margin", "0px");
	root = $("#wrap");
	container = $("#wrapInner");
	wrapper = $("#contents");
	menu = $("#sidebar");
	menuW = menu.width();
	menu.height("auto");
	footer = $("#footer");
	
	//init
	container.css({position:"absolute", top: M+"px", left: "0px"});
	wrapper.css({position:"absolute", left: (menuW+M)+"px"});
	
	//text-resize-detector
	TextResizeDetector.TARGET_ELEMENT_ID = "wrap";
	
	//xml load
	$.ajax({
		url: dataFile,
		dataType:"xml",
		success: parseXML
	});
	 
});


//xml parse
var parseXML = function(xml) {
	var id, blks, b, n, i, size;
	var h = 0;
	
	//right block
	blks = $(xml).find("right_blocks>block");
	if( blks.length > 0 ){
		existR = 1;
		wrapper.append("<div id='rBlock' style='position:absolute;'></div>");
		rBlock = $("#rBlock");
		blks.each(function(idx){
			id = $(this).attr("id");
			if( id ) {
				b = $("#"+id);
				b.css({top:"0px", left: "0px", position:"relative", marginBottom:M+"px", paddingTop:1+"px"});
				size = Math.floor((b.outerWidth()+M) / WM);
				b.appendTo(rBlock);
				
				rBlocks.push({ id: id, block: b, initSize: size , size: size, idx: idx , selected: false , parent: 'right'
						,innerHTML: null
						,importHTML: b.find(".importLink").attr("href")
						,jumpHTML: b.find(".jumpLink").attr("href")});
				rBlocksList[id] = idx;
			}
		});
		rBlockW = WM;
		rBlock.width(W);
		rBlocksLen = rBlocks.length;
	}
	
	//liquid block
	$(xml).find("liquid_blocks>block").each(function(idx){
		id = $(this).attr("id");
		b = $("#"+id);
		if( b.length ){
			b.css({top:"0px", left: "0px"});
			size = Math.floor((b.outerWidth()+M) / WM);
			blocks.push({ id: id, block: b, initSize: size , size: size, idx: idx , selected: false , parent: 'liquid'
						,innerHTML: null
						,importHTML: b.find(".importLink").attr("href")
						,jumpHTML: b.find(".jumpLink").attr("href")});
			blocksList[id] = idx;
		}
	});
	blocksLen = blocks.length;
	
	//set link event
	initLinkEvent(wrapper);
	
	//resize event
	onResize({duration:0});
	$(window).bind("resize", onResize);
	
	//font resize event
	TextResizeDetector.addEventListener(onResize,null);
};


//set link event
var initLinkEvent = function(b){
	//link
	b.find(".importLink")
	.attr("href","javascript:void(0);")
	.click(onClickImportLink);
};

//importLink click
var onClickImportLink = function(e){
	var b, i, obj, id, idx;
	$(this).parents().each(function(){
		if( $(this).hasClass("box") ){
			b = $(this);
		}	
	});
	
	id = b.attr("id");
	idx = blocksList[id];
	if( idx != undefined ) {
		obj = blocks[idx];
		obj.size = MAX_SIZE;
		obj.selected = true;
		blocks.splice(idx,1);
		blocks.splice(0,0,obj);
	} else {
		idx = rBlocksList[id];
		obj = rBlocks[idx];
		obj.size = MAX_SIZE;
		obj.selected = true;
		var p = rBlock.position();
		var pX = p.left;
		var pY = p.top;
		p = b.position();
		pX += p.left;
		pY += p.top;
		rBlock.children("#"+id).remove();
		blocks.splice(0,0,obj);
		blocksLen = blocks.length;
		b.css({position:"absolute", marginBottom:"0px"});
		b.appendTo(wrapper);
		b.animate({left: pX , top: pY }, 0);
	}
	
	//blockList change
	for( i in blocks ){
		blocksList[blocks[i].id] = i;
	}
	
	//resize move
	onResize({selectedID:id});
};

//resize move completed
var onMoveCompleted = function(){
	var b = $(this);
	var bH = b.height();
	var bW = b.width();
	var obj = blocks[blocksList[b.attr("id")]];
	var inner = b.children(".inner");
	
	obj.innerHTML = inner.html();	
	inner.height(inner.height());
	inner.hide();
	inner.children().remove();
	
	
	//white filter
	b.removeClass(BOX_CLASS[obj.initSize-1]);
	b.width(bW);
	b.height(bH);
	
	//animate
	b.animate({ width: (obj.size*WM-M)+"px"}, { duration: DURATION, easing: MOVE_EASING , complete: onLoadImportHTML, queue: false });
	
	//scroll top
	$('html,body').animate({ scrollTop: 0 }, { duration: DURATION, easing: SIZE_EASING ,queue: false });
};

//import html
var onLoadImportHTML = function(){
	var b = $(this);
	var obj = blocks[blocksList[b.attr("id")]];
	var inner = b.children(".inner");
	b.addClass(MAX_CLASS);
	inner.show();
	
	//loading img
	var left = b.width()*0.5-8;
	var top = b.height()*0.5-8;
	b.append("<img src='./common/img/ajax-loader.gif' class='loadimg' style='position:absolute;top:"+top+"px;left:"+left+"px;'/>");
	
	//import html load
	inner.load( obj.importHTML+" .importArea", onLoadImportHTMLCompleted);
	
};

//import html completed
var onLoadImportHTMLCompleted = function(){
	var inner = $(this);
	var b = inner.parent();
	var obj = blocks[blocksList[b.attr("id")]];
	var importArea = inner.children(".importArea");
	
	//auto height
	inner.height("auto");
	b.height("auto");
	
	//remove loadimg
	b.children(".loadimg").remove();
	
	//close
	importArea.find(".importClose").click(onClickImportClose);
	
	//resize
	onResize(null);	
};

//importClose click
var onClickImportClose = function(){
	var b;
	$(this).parents().each(function () {
		if( $(this).hasClass("box") ){
			b = $(this);
		}
	});
	
	var inner = b.children(".inner");
	var importArea = inner.children(".importArea");
	var obj = blocks[blocksList[b.attr("id")]];
	
	
	//selected false
	obj.selected = false;
	obj.size = obj.initSize;
	
	//remove import area
	inner.height(inner.height());
	importArea.remove();
	
	//remove class
	b.removeClass(MAX_CLASS);

	//animate
	b.animate({ width: (obj.initSize*WM-M)+"px"}, { duration: DURATION, easing: MOVE_EASING , complete: onCompletedImportClose , queue: false });
	
};

//importClose complete
var onCompletedImportClose = function(){
	var b = $(this);
	var id = b.attr("id");
	var idx = blocksList[id];
	var obj = blocks[idx];
	var inner = b.children(".inner");
	
	//add class
	b.addClass(BOX_CLASS[obj.initSize-1]);
	
	//append inner
	inner.height("auto");
	inner.append(obj.innerHTML);
	obj.innerHTML = null;
	initLinkEvent(inner);
	
	//blocks change
	var i, blk;
	var selectBlocks = [];
	var noSelectBlocks = [];
	for( i in blocks ){
		blk = blocks[i];
		if( blk.id != obj.id ){
			if( blk.selected ){
				selectBlocks.push(blk);
			} else {
				noSelectBlocks.push(blk);
			}
		}
	}
	
	var n = noSelectBlocks.length-1;
	for(var i in noSelectBlocks ){
		if( noSelectBlocks[i].idx > obj.idx ){
			n = i;
			break;	
		}
	}
	
	if( obj.parent == "liquid" ){
		noSelectBlocks.splice(n,0,obj);
	} else {
		wrapper.children("#"+id).remove();
		var d = 0;
		while(true){
			var before = rBlocksList[id] - (++d);
			if( before < 0 ){
				b.prependTo(rBlock);
				break;
			} else {
				var beforeID = rBlocks[before].id;
				var beforeBlk = rBlock.find("#"+ beforeID);
				if( beforeBlk.length ){
					b.css({top:"0px", left: "0px", position:"relative", marginBottom:M+"px"});
					b.insertAfter(beforeBlk);					
					break;
				}
			}
		}
		initLinkEvent(b);
	}
	blocks = selectBlocks.concat(noSelectBlocks);
	blocksLen = blocks.length;
	
	//blocksList change
	blocksList = {};
	for( var i in blocks ){
		blocksList[blocks[i].id] = i;
	}
	
	//resize
	onResize(null);
}

//resize
var onResize = function(e){ 
	var winH = $(window).height();
	var winW = $(window).width();
	var layoutW = Math.max( MIN_W+M , winW - (menuW + M + rBlockW));
	var maxRow = parseInt(layoutW / WM);
	var i, n, nn, id, pX, pY, rX, ctnrW, block, blockH, size, blockRow, minY, maxY, maxRow2, blocksW, selected, duration;
	var minRowY = maxRowY = 0;
	var yList = [];
	var dRow = 0;
	var func = null;
	var duration = (e && e.duration != undefined ? e.duration : DURATION);
	
	for(i=0; i<maxRow; i++){
			yList[i] = 0;
	}
	
	if( existR ){
		maxRowY = yList[yList.length] = rBlock.height();
		maxRow += 1;
		dRow += 1;
	}
	
	//block move
	for( i=0; i<blocksLen; i++ ){
		block = blocks[i].block;
		selected = blocks[i].selected;
		size = blocks[i].size;
		id = blocks[i].id;
		blockH = block.outerHeight();
		minY = 0;
		maxRow2 = maxRow-(dRow+size-1);
		
		if( size == 1 ) {
			minY = minRowY;	
		}else{
			minY = maxRowY;	
			for(n=0; n<maxRow2; n++){
				maxY = yList[n];
				for(nn=1; nn<size; nn++){
					maxY = Math.max(yList[n], yList[n+nn]);
				}
				minY = Math.min(minY , maxY);
			}
		}
		
		blockRow = 0;
		for(n=0; n<maxRow; n++){
			if(minY == yList[n]){
				blockRow = n;
				break;
			}
		}
		
		pX = blockRow * WM;
		for(n=0; n<size; n++) {
			pY = Math.max( yList[blockRow] , yList[blockRow+n]);
		}
		
		func = (e && e.selectedID != undefined ? e.selectedID : e) == id && selected ? onMoveCompleted : null;
		block.animate({ left: pX + "px", top: pY+"px"}, {duration:duration, easing:MOVE_EASING, complete:func, queue: false});
		
		for(n=0; n<size; n++) {
			yList[blockRow+n] = pY + blockH + M;
		}
		
		for(n=0; n<yList.length; n++) {
			if( n == 0 ){
				minRowY = maxRowY = yList[n];
			} else {
				minRowY = Math.min( minRowY , yList[n] );
				maxRowY = Math.max( maxRowY , yList[n] );	
			}
		}
		
	}
	
	blocksW = WM*(maxRow-existR);
	
	//rBlock move
	if( rBlock ){
		rBlock.stop();
		rBlock.animate({ left: blocksW+"px"},duration,MOVE_EASING );
	}
	
	// container�@centering
	blocksW = blocksW - M;
	ctnrW = menuW + M + blocksW + rBlockW;
	container.width(ctnrW);
	container.stop();
	container.animate({ left: Math.max( 0 , parseInt((winW-ctnrW)*0.5))+"px" },duration,MOVE_EASING );
	
	// footer
	var fY = Math.max(maxRowY, menu.height()+M)+M*2;
	fY = Math.max( winH-(footer.height()) , fY );
	footer.stop();
	footer.animate({ top: fY+"px", width: layoutW+menuW+rBlockW+M }, 
															  { duration: duration, easing: MOVE_EASING, queue: false});

};
})(jQuery);