/**
 * This JavaScript provide 'Frame-like Page(CSS Frame)'.
 * require : jQuery v1.5 or higher
 *           and jQuery UI 1.8.9 or higher
 *           and ex.queryString (http://d.hatena.ne.jp/cyokodog/20090526/jQueryExQueryString01)
 * Copyright 2011, Project Feelgood
 * http://ek-pro.com/
 * Released under the MIT, BSD, and GPL Licenses.
 *
 * Date: 2011-02-22 v0.0.1
 * Date: 2011-04-25 v0.0.2
 */

/**
 * Create Master Object
 * This contains all objects used in this script.
 */
var CSF = {};

/*
 * Several ID,class
 * setting the value of each ID.
 */
//main
CSF.mainId = '#main_wrapper';
//menu
CSF.menuId = '#menu_wrapper';
//the element id to resize
CSF.resizerId = '#resizer';
//the element id that starts the removal event of cssframe.
CSF.csfRemoverId = '#csf-remove';
//the element id that restart the cssframe.
CSF.csfStarterId = '#csf-start';
//create a hyperlink to a print page in this class
CSF.csfPrintCls = '.cframe-print';

//The class value used in "jQuery Resizable".(Not need to change, probably)
CSF.uiResizableE = '.ui-resizable-e';
//Identify the elements to avoid conflict with other "jQuery Resizable".
CSF.targetRisizeBar = CSF.resizerId + ' ' + CSF.uiResizableE;

/*
 * Several Element Size(px)
 */
//menu width
CSF.menuWidth = 220;
//resizebar width
CSF.resizeBarWidth = 4;

/*
 * each html element's css
 */
//html
CSF.htmlElementCss = {
	'overflow' : 'hidden', 
	'margin' : '0px',
	'border' : '0px',
	'padding' : '0px',
	'width' : '100%',
	'height' : '100%'
};
//body
CSF.bodyElementCss = {
	'display' : 'hidden',
	'margin' : '0px',
	'border' : '0px',
	'padding' : '0px',
	'width' : '100%',
	'height' : '100%'
};
//main
CSF.mainCss = {
	'overflow' : 'auto',
	'position' : 'absolute',
	'top' : '0px',
	'left' : CSF.menuWidth,/*same as menu width*/
	'bottom' : '0px',
	'margin' : '0px',
	'border' : '0px',
	'padding' : '0px'
}
//menu
CSF.menuCss = {
	'overflow' : 'auto',
	'position' : 'absolute',
	'left' : '0px',
	'top' : '0px',
	'bottom' : '0px',
	'margin' : '0px',
	'border' : '0px',
	'padding' : '0px',
	'width' : CSF.menuWidth
}

/**
 * getCookie
 *
 * Get the value set in the cookie.
 * Notice: NOT validate the argument value.
 * @param String name  cookie name
 * @return String cookie value
 */
CSF.getCookie = function (name){
	var match = ('; ' + document.cookie + ';').match('; ' + name + '=(.*?);');
	return match ? decodeURIComponent(match[1]) : '';
};

/**
 * setCookie
 *
 * Set the value set in the cookie.
 * Notice: NOT validate the argument value.
 * @param String name  cookie name
 * @param String value cookie value 
 * @param String expires  If you set no expiration date on a cookie, it expires when the browser closes.
                          If you set an expiration date, the cookie is saved across browser sessions.
                          If you set an expiration date in the past, the cookie is deleted.
                          Use Greenwich Mean Time (GMT) format to specify the date.
 * @param String domain  If you set the domain of the cookie, documents on a domain made up of more than
                         one server can share cookie information. 
 * @param String path  If you set a path for the cookie, the current document can share cookie information
                       with other documents within the same domain--that is, if the path is set to /thispathname,
                       all documents in /thispathname and all documents in subfolders of /thispathname can access
                       the same cookie information.
 * @param Boolean secure  If you set a cookie as secure, the stored cookie information
                          can be accessed only from HTTPS.
 */
CSF.setCookie = function (name, value, expires, domain, path, secure) {
        var buffer = name + '=' + encodeURIComponent(value);
        if (expires != 'undefined') buffer += '; expires=' + new Date(expires).toUTCString();
        if (typeof domain != 'undefined') buffer += '; domain=' + domain;
        if (typeof path != 'undefined') buffer += '; path=' + path;
        if (secure) buffer += '; secure';
        document.cookie = buffer;
};

/**
 * main
 *
 * The cssframe runs by executed this function.
 * On IE6-IE8, This calls "location.reload" function when cssframe is disable.
 * Therefore, the second argument will NOT be called.
 * @param Function restartFunc  this function is called when cssframe restarts. 
 * @param Function removeFunc  this function is called when cssframe removes. 
 */
CSF.main = function(restartFunc,removeFunc){
	//Check whether css frame is enabled or disabled from the cookie value.
	//if enable, cssframe is let to run.
	if (CSF.getCookie('csf') != '0'){
		//Set the style of each element
		$('html').css(CSF.htmlElementCss);
		$('body').css(CSF.bodyElementCss);
		$(CSF.mainId).css(CSF.mainCss);
		$(CSF.menuId).css(CSF.menuCss);
		
		//On the menu, its width can be resized using "jQuery UI resizable".
		//Not to show a horizontal scrollbar, the child element of "menu_Warapper" can be resizale (NOT "menu_Warapper" element).
		//But when that child elemen is resized, "menu_Warapper" element is also automatically resized.
		//And, that child element's width make to be equal to the length which is that "menu_Warapper"'s width minus the resizebar's width.
		$(CSF.resizerId).resizable({
			handles: "e",
			autoHide: true,
			alsoResize : CSF.menuId,
			resize: function(){//Content in the resize operation
				//get the inside dimension of the browser
				CSF.browserWidth = $('body').outerWidth(true);
				CSF.browserHeight = $('body').outerHeight(true);
				//get the "menu" width when this function is called because it can be resized.
				CSF.menuWidth = $(CSF.menuId).outerWidth(true);
				//change the width of "main" element, and its left position.
				$(CSF.mainId).width(CSF.browserWidth-CSF.menuWidth).css("left",CSF.menuWidth);
			}
		});
		
		//Set the widht of resizebar. Do this after the "resizable" operation.
		$(CSF.targetRisizeBar).width(CSF.resizeBarWidth);
			
		//$(CSF.resizerId).width is as follows:
		//If "menu" has a vertical scroll......minus both resizebar widht and scroll bar width.
		//If "menu" has NO vertical scroll......minus resizebar widht only.
		//(Do this after the "resizable" operation.)
		var scrollBarWidth = $(CSF.menuId).attr('offsetWidth') - $(CSF.menuId).attr('clientWidth');
		$(CSF.resizerId).width(CSF.menuWidth - scrollBarWidth - $(CSF.targetRisizeBar).width());
		
		//Move resizebar to the left by its overflowing.
		$(CSF.targetRisizeBar).css('right', '-' + $(CSF.targetRisizeBar).css('width'));
		
		//Set the size of each part.
		_setSeveralElementSize();
		
		//Measures against that the resizebar would break at the height of the appearance of the menu.
		//Set the longer height value which "menu_Wrapper"'s height or its child element's.
		//(Do this after the "resizable" operation and setting the size of each part.)
		$(CSF.resizerId).height((function(){
			var m = $(CSF.menuId).height();
			var n = $(CSF.resizerId).attr('scrollHeight');
			return (m > n) ? m : n ;
		}()));


		//Resize Event
		//Set the size of each part when a brower resizes.
		$(window).resize(function(){
			_setSeveralElementSize();
			//If "CSF.resizerId" make to be higher than original, its height becomes invalid when a browser resizes so that a scrollbar appears.
			//->Get and set "CSF.resizerId"'s width to a temporary variable, its style does "removeAttr" and set its height and width again.
			var tempWidth = $(CSF.resizerId).width();
			$(CSF.resizerId).removeAttr('style');
			$(CSF.resizerId).height((function(){
				var m = $(CSF.menuId).height();
				var n = $(CSF.resizerId).attr('scrollHeight');
				return (m > n) ? m : n ;
			}())).width(tempWidth);
		});
	}
	

	//
	//Inner function
	//Set the size of each element based on an innerWidth and an innerHeight of the browser.
	function _setSeveralElementSize(){
		//Get an innerWidth and an innerHeight of the browser.
		CSF.browserWidth = $('body').outerWidth(true);
		CSF.browserHeight = $('body').outerHeight(true);

		//Get the size of the menu when this function is called because the menu can be resized.
		CSF.menuWidth = $(CSF.menuId).outerWidth(true);

		//Set each value as follows.
		//menu height
		$(CSF.menuId).height(CSF.browserHeight);
		
		//the main part's size, position
		$(CSF.mainId).width(CSF.browserWidth-CSF.menuWidth).height(CSF.browserHeight).css("left",CSF.menuWidth);
		

		//The innerWidth of "CSF.resizerId" changes
		//beceuse a horizontal scrollbar is appeared in the menu part when resizebar appears.
		var scrollBarWidth = $(CSF.menuId).attr('offsetWidth') - $(CSF.menuId).attr('clientWidth');
		$(CSF.resizerId).width(CSF.menuWidth - scrollBarWidth - $(CSF.targetRisizeBar).width());
	};
};

$(function(){
	//Get "queryString"
	var param = $.ex.queryString();

	//cssframe runs.
	if(param.cflame != 'print'){
		CSF.main(function(){
			alert('restart');
		},function(){
			alert('removed');
		});
	}
});