var HSG = {};
var hs_extension 	= HSG.extension = {},	hs_load_extension,
	hs_browser		= HSG.browser	= {},
	hs_cssStyle		= HSG.cssStyle	= {},
	hs_regExp		= HSG.regExp	= {},
	hs_number		= HSG.number	= {},
	hs_array		= HSG.array		= {},
	hs_dom			= HSG.dom		= {},
	hs_restrict		= HSG.restrict	= {},
	hs_image		= HSG.image		= {},
	hs_mouse		= HSG.mouse		= {},
	hs_object		= HSG.object	= {},
	hs_quickText	= HSG.quickText = {},
	
	hs_storage		= HSG.storage	= {},
	hs_layout		= HSG.layout	= {},
	hs_debug		= HSG.debug		= {}
	
	;

function htmlspecialchars(p_string) {
	p_string = p_string.replace(/&/g, '&');
	p_string = p_string.replace(/</g, '&lt;');
	p_string = p_string.replace(/>/g, '&gt;');
	p_string = p_string.replace(/"/g, '&quot;');
//	p_string = p_string.replace(/'/g, '&#039;');
	return p_string;
};

	
(function(jQuery)
	{
	
	// >> layout
	(function()
		{
			
		
			hs_layout.extract_xywh	= function(jTargets)
				{
					var debug = "",
						return_object = {};
						return_object.general 	= [];
						return_object.jObject	= [];
						return_object.domElement= [];
						return_object.idName	= [];
						return_object.idx		= [];
						return_object.x			= [];
						return_object.y			= [];
						return_object.w			= [];
						return_object.h			= [];
							
							return_object.mT = [];
							return_object.mR = [];
							return_object.mB = [];
							return_object.mL = [];
							return_object.mH = [];
							return_object.mV = [];
							
							return_object.pT = [];
							return_object.pR = [];
							return_object.pB = [];
							return_object.pL = [];
							return_object.pH = [];
							return_object.pV = [];
							
							return_object.bT = [];
							return_object.bR = [];
							return_object.bB = [];
							return_object.bL = [];
							return_object.bH = [];
							return_object.bV = [];
						
							return_object.wC = [];
							return_object.hC = [];
							
							return_object.posXY_id = [];
							
					jTargets.each(function(index,domElement)
						{
							var jObject = jQuery(domElement),
								
								target_mL,
								target_mT,
								
								x,y,w,h,
								
								mT,mR,mB,mL,
								mH,mV,
								pT,pR,pB,pL,
								pH,pV,
								bT,bR,bB,bL,
								bH,bV,
								
								wC,hC
								;
									
									target_mL = parseInt(jObject.css("marginLeft"));
									target_mT = parseInt(jObject.css("marginLeft"));
										
										target_mL = isNaN(target_mL)?0:target_mL;
										target_mT = isNaN(target_mT)?0:target_mT;
										
								x = hs_dom.offset(domElement,"offsetLeft") 	- target_mL;
								y = hs_dom.offset(domElement,"offsetTop")	- target_mT;
								
								jObject[0].innerHTML = x + "<BR/>" + y + "<BR/>" + index; 
								
								w = jObject.width();
								h = jObject.height();
								
								mT = parseInt(jObject.css("marginTop"));
								mR = parseInt(jObject.css("marginRight"));
								mB = parseInt(jObject.css("marginBottom"));
								mL = parseInt(jObject.css("marginLeft"));
								
									mT = isNaN(mT)?0:mT;
									mR = isNaN(mR)?0:mR;
									mB = isNaN(mB)?0:mB;
									mL = isNaN(mL)?0:mL;
								
								mH = mL + mR;
								mV = mT + mB;
								
								pT = parseInt(jObject.css("paddingTop"));
								pR = parseInt(jObject.css("paddingRight"));
								pB = parseInt(jObject.css("paddingBottom"));
								pL = parseInt(jObject.css("paddingLeft"));
								
									pT = isNaN(pT)?0:pT;
									pR = isNaN(pR)?0:pR;
									pB = isNaN(pB)?0:pB;
									pL = isNaN(pL)?0:pL;
								
								pH = pL + pR;
								pV = pT + pB;
								
								bT = parseInt(jObject.css("borderTopWidth"));
								bR = parseInt(jObject.css("borderRightWidth"));
								bB = parseInt(jObject.css("borderBottomWidth"));
								bL = parseInt(jObject.css("borderLeftWidth"));
									
									bT = isNaN(bT)?0:bT;
									bR = isNaN(bR)?0:bR;
									bB = isNaN(bB)?0:bB;
									bL = isNaN(bL)?0:bL;
									
								bH = bL + bR;
								bV = bT + bB;
								
								wC = w + pH + bH;
								hC = h + pV + bV;
								
							domElement.idx = index;
							domElement.x = x;
							domElement.y = y;
							domElement.w = w;
							domElement.h = h;
							
								domElement.mT = mT;	
								domElement.mR = mR;
								domElement.mB = mB;
								domElement.mL = mL;
								domElement.mH = mH;
								domElement.mV = mV;
								
								domElement.pT = pT;	
								domElement.pR = pR;
								domElement.pB = pB;
								domElement.pL = pL;
								domElement.pH = pH;
								domElement.pV = pV;
								
								domElement.bT = bT;	
								domElement.bR = bR;
								domElement.bB = bB;
								domElement.bL = bL;
								domElement.bH = bH;
								domElement.bV = bV;
								
								domElement.wC = wC;
								domElement.hC = hC;
								
								return_object.general[index] = [[jObject,domElement],[index],[x,y,w,h]];
								return_object.jObject[index] = jObject;
								return_object.domElement[index] = domElement;
								return_object.idName[index]	= jObject.attr("id");
								return_object.idx[index] = index;
								return_object.x[index] = x;
								return_object.y[index] = y;
								return_object.w[index] = w;
								return_object.h[index] = h;
				
								return_object.mT[index] = mT;
								return_object.mR[index] = mR;
								return_object.mB[index] = mB;
								return_object.mL[index] = mL;
								return_object.mH[index] = mH;
								return_object.mV[index] = mV;
								
								return_object.pT[index] = pT;
								return_object.pR[index] = pR;
								return_object.pB[index] = pB;
								return_object.pL[index] = pL;
								return_object.pH[index] = pH;
								return_object.pV[index] = pV;
								
								return_object.bT[index] = bT;
								return_object.bR[index] = bR;
								return_object.bB[index] = bB;
								return_object.bL[index] = bL;
								return_object.bH[index] = bH;
								return_object.bV[index] = bV;
								
								return_object.wC[index] = wC;
								return_object.hC[index] = hC;
								
								if(!return_object.posXY_id[x])
								return_object.posXY_id[x] = [];
								return_object.posXY_id[x][y] = [domElement,index];
						});
						
						//var arr = return_object.x;
						//var arr1a = return_object.x.array_flipflip();
						//var arr1b = return_object.x.array_flipflip(true);
						//var arr2a = return_object.y.array_flipflip();
						//var arr2b = return_object.y.array_flipflip(true);
						
						//var text_arra = arr1a[420].array_throw_differ(arr2a[280]);
						
						//hs_debug.show(hs_array.parse_array(arr));
						//hs_debug.show(hs_array.parse_array(text_arra),true);
						//hs_debug.show(hs_array.parse_array(arr1a),true);
						//hs_debug.show(hs_array.parse_array(arr2a),true);
						
						//hs_debug.show(hs_array.parse_array(return_object.x));
						
					//	hs_debug.show(hs_array.parse_array(return_object.pH),true);
						//hs_debug.show(hs_array.parse_array(debug),true);
						//hs_debug.show(hs_array.parse_array(arr1a),true);
						//hs_debug.show(hs_array.parse_array(return_object.x),true);
						return return_object;	
				}

		})();
			
			
			// >>>>>>>
			// >> extension
			(function()
				{
					hs_extension.is_array = function()
						{
							Array.prototype.is_array = function()
								{
									return typeof(this)=='object'&&(this instanceof Array); 
								};
						};
					hs_extension.outerHTML = function()
						{
							try
							{
								if(HTMLElement.prototype.__defineGetter__)
								{
									HTMLElement.prototype.__defineGetter__("outerHTML",function()
									{
										var parent = this.parentNode;
										var el = document.createElement(parent.tagName);
										
											el.appendChild(this);                                   
										var shtml = el.innerHTML;                                   
											parent.appendChild(this);                                   
											
										return shtml;
									});	
								}	
							}
							catch(ex){}
						};	hs_extension.outerHTML();
					hs_extension.array_key_exists = function()
						{
							Array.prototype.array_key_exists = function(key)
							{
								return (typeof this[key] != 'undefined');
							}
						};
					hs_extension.in_array = function()
						{
							Array.prototype.in_array = function(p_val) {
									for(var i = 0, l = this.length; i < l; i++) 
										if(this[i].toUpperCase() == p_val.toUpperCase())
											return true;
									return false;
								}
						};
					hs_extension.array_filter = function()
						{
							Array.prototype.array_filter = function()
								{
									var tmp_store_object = [],
										tmp_store_obejct_lv2 = [];
									var k = null;
										for(k in this)
										{
											if([].array_key_exists(k))
											continue;
											
											tmp_store_object[this[k].toString()] = k;
										};
										
										for(k in tmp_store_object)
										{
											if([].array_key_exists(k))
											continue;
											tmp_store_obejct_lv2.push(k);
										
										};
										
										
									return tmp_store_obejct_lv2;
										
								};
						};
					
					hs_extension.array_throw_differ = function()
						{
							Array.prototype.array_throw_differ = function(compare_array)
								{
									var THIS = this,
										return_array = [],
										
										v,
										sub_v
										;
									for(var k in THIS)
									{
										if([].array_key_exists(k))
										continue;
										
										v = THIS[k];
											for(var sub_k in compare_array)
											{
												if([].array_key_exists(k))
												continue;
												
												sub_v = compare_array[sub_k];
												
												if(v == sub_v)
												{
													// mark down the same value from both array
													return_array.push(sub_v,[[k,v],[sub_k,sub_v]]);
												}
											}
									}
									return return_array;
								}
							
						};
						hs_extension.array_throw_differ();
					
					hs_extension.array_flipflip = function()
						{
							Array.prototype.array_flipflip = function(reindex)
								{
									reindex = reindex == undefined ? false : true;
										
									var THIS = this,
										first_value = [],
										return_array = [],
										v;
										
										new_index = -1;
										for(var k in THIS)
										{
											if([].array_key_exists(k))
											continue;
											
											v = THIS[k];
											
											
												if(typeof v == "string" || typeof v == "number")
												{
													if(return_array[v] == undefined)
													{
														first_value[v] = k;
														return_array[v] = k;
													}
													else if(!hs_array.is_array(return_array[v]))
													{
														return_array[v] = [];
														return_array[v].push(first_value[v]);
														return_array[v].push(k);
														
													}
													else
														{
															return_array[v].push(k);
														}
												}
												else
												{
													if(return_array["_forbidden_type"] == undefined)
													{
														first_value[v] = k;
														return_array["_forbidden_type"] = k;
													}
													else if(!hs_array.is_array(return_array[_forbidden_type]))
													{
														return_array["_forbidden_type"] = [];
														return_array["_forbidden_type"].push(first_value[v]);
														return_array["_forbidden_type"].push(k);
													}
													else
														{
															return_array["_forbidden_type"].push(k);
														}
												}
											
										}
										
										if(reindex)
										(function()
											{
												var tmp_return_array = [],
													new_index = 0;
													for(var k in return_array)
													{
														if([].array_key_exists(k))
														continue;
														
														tmp_return_array[new_index] = return_array[k];
														tmp_return_array[new_index]["oKey"] = k;
														++new_index;
													}
													return_array = tmp_return_array;
											})();
										
										return return_array;
								}
						};
						hs_extension.array_flipflip();
						
						
					hs_extension.array_flip = function()
						{
							Array.prototype.array_flip = function()
								{
									var returnArray = [this,this];
									var tmp_array1 = [];
									var tmp_array2 = [];
									var tmp_array3 = [];
									var tmp_array4 = [];
									// you will know how many 
									var counter = 0;
									for(var k in returnArray[0])
									{
										if([].array_key_exists(k))
										continue;
										
										if(!tmp_array1.array_key_exists(returnArray[0][k].toString()))
										{	
											counter += 1;
											tmp_array1[returnArray[0][k].toString()] = k;
										}
										
										if(!tmp_array2[counter-1])
										tmp_array2[counter-1] = [];
										
										tmp_array2[counter-1].push(k);
										
										tmp_array3.push(returnArray[0][k]);

									}
									
									returnArray[0] = [counter];
									returnArray[1] = tmp_array2;
									returnArray[2] = this;						// original model
									returnArray[3] = tmp_array3.array_filter();
									
									return returnArray;
								}
						};
					
				})();

			// >>>>>>>
			// >> browser
				(function()
					{
						hs_browser.isIE = function()
							{
								return jQuery.browser.msie;
							};
						hs_browser.browserVersion = function()
							{
								return parseInt(jQuery.browser.version);
							};
					
					})();
				
			// >>>>>>>
			
			// >> cssStyle
				(function()
					{
						hs_cssStyle.getElementStyle = 	function(jObject,IE_StyleAttribute,NonIE_StyleAttribute)
							{
								NonIE_StyleAttribute = !NonIE_StyleAttribute?IE_StyleAttribute:NonIE_StyleAttribute;
								var returnVal = "",
									domObject = jObject.get(0)
									;
									
									if(domObject.currentStyle)
									returnVal = domObject.currentStyle[IE_StyleAttribute];
									else if(window.getComputedStyle)
									returnVal = window.getComputedStyle(domObject,'').getPropertyValue(NonIE_StyleAttribute);
									
								return returnVal;
							};
						hs_cssStyle.hAlignment		=	function(jObject,attr,doReturn,simpleConfig)		
							{
								var objectW_self,objectW_parent,
									marginX=[],
									x,
									simpleConfig = !simpleConfig ? {} : simpleConfig;
									;
									
					var returnPosition = !simpleConfig.returnPosition ? false : simpleConfig.returnPosition;
					var sampleW = !simpleConfig.sampleW ? jObject.width()	: simpleConfig.sampleW;
					var sampleH = !simpleConfig.sampleH ? jObject.height()	: simpleConfig.sampleH;
					
									objectW_self 	= sampleW;
									objectW_parent 	= jObject.parent().width();
									
									doReturn = doReturn==undefined?false:doReturn;
									marginX = [0,(objectW_parent - objectW_self)/2,objectW_parent - objectW_self];
									
										if(attr == "left")
										x = marginX[0];
										else if(attr == "center")
										x = marginX[1];
										else if(attr == "right")
										x = marginX[2];
										
									if(doReturn)
									return x;
									else
									{
										if(returnPosition)
										jObject.css("left",x);
										else
										jObject.css("marginLeft",x);
									}
							};
						hs_cssStyle.vAlignment		=	function(jObject,attr,doReturn,simpleConfig)		
							{
								var objectH_self,objectH_parent,
									marginY=[],
									y,
									simpleConfig = !simpleConfig ? {} : simpleConfig;
									;
					var returnPosition = !simpleConfig.returnPosition ? false : simpleConfig.returnPosition;
					var sampleW = !simpleConfig.sampleW ? jObject.width()	: simpleConfig.sampleW;
					var sampleH = !simpleConfig.sampleH ? jObject.height()	: simpleConfig.sampleH;
					
					
									objectH_self 	= sampleH;
									objectH_parent 	= jObject.parent().height();
									
									doReturn = doReturn==undefined?false:doReturn;
									marginY = [0,(objectH_parent - objectH_self)/2,objectH_parent - objectH_self];
									
										if(attr == "top")
										y = marginY[0];
										else if(attr == "middle")
										y = marginY[1];
										else if(attr == "bottom")
										y = marginY[2];
									
									if(doReturn)
									return y;
									else
									{
										if(returnPosition)
										jObject.css("top",y);
										else
										jObject.css("marginTop",y);
									}
							};
						hs_cssStyle.hvAlignment		= 	function(jObject,attr,doReturn,simpleConfig)
							{
								var objectW_self,	objectH_self,
									objectW_parent,	objectH_parent,
									marginX=[],marginY=[],
									x,y,
									returnPosition,
									sampleW,sampleH
									;
							
							simpleConfig = !simpleConfig ? {} : simpleConfig;
							
					try{
					returnPosition = !simpleConfig.returnPosition ? false : simpleConfig.returnPosition;
					sampleW = !simpleConfig.sampleW ? jObject.width()	: simpleConfig.sampleW;
					sampleH = !simpleConfig.sampleH ? jObject.height()	: simpleConfig.sampleH;
						
									objectW_self 	= sampleW;
									objectH_self	= sampleH;
									objectW_parent 	= jObject.parent().width();
									objectH_parent	= jObject.parent().height();
									
									doReturn = doReturn==undefined?false:doReturn;
									
									marginX = [0,(objectW_parent - objectW_self)/2,objectW_parent - objectW_self];
									marginY = [0,(objectH_parent - objectH_self)/2,objectH_parent - objectH_self];
								}
								catch(ex)
								{
									alert("error");
								}
								
									if(hs_array.is_array(attr))
									{
										if(attr[0] == "left")
										x = marginX[0];
										else if(attr[0] == "center")
										x = marginX[1];
										else if(attr[0] == "right")
										x = marginX[2];
										if(attr[1] == "top")
										y = marginY[0];
										else if(attr[1] == "middle")
										y = marginY[1];
										else if(attr[1] == "bottom")
										y = marginY[2];
									
									
										if(doReturn)
										return [x,y];
										else
										{
											if(returnPosition)
											jObject.css({left:x,top:y});
											else
											jObject.css({marginLeft:x,marginTop:y});
										}
									}
									else
									return [];
							};
						hs_cssStyle.hvAlignment_virtual	= function(attr,size_groupA,size_groupB)
							{	
								//size_groupA = object w&h
								//size_groupB = wrapper / object parent w&h
							
								var w = [size_groupA[0],size_groupB[0]],
									h = [size_groupA[1],size_groupB[1]],
									posX = [],posY = []
									;
							
									posX = [0,(w[1] - w[0])/2,w[1] - w[0]];
									posY = [0,(h[1] - h[0])/2,h[1] - h[0]];
									
										if(attr[0] == "left")
										x = posX[0];
										else if(attr[0] == "center")
										x = posX[1];
										else if(attr[0] == "right")
										x = posX[2];
										if(attr[1] == "top")
										y = posY[0];
										else if(attr[1] == "middle")
										y = posY[1];
										else if(attr[1] == "bottom")
										y = posY[2];
									
										return [x,y];
										
							};
						hs_cssStyle.max_zIndex		=	function(jObject)
							{
								var zIndex = 0,
									zIndex_array = []
									;
								jObject.each(function(k,v)
									{
										var jTHIS = $(this);
											
											zIndex = parseInt(jTHIS.css("zIndex"));
											zIndex = isNaN(zIndex)?0:zIndex;
											
											zIndex_array.push(zIndex);
									});
								
								return [Math.max.apply({},zIndex_array),zIndex_array];
							};
						hs_cssStyle.get_xywh		=	function(jObject)
							{
								var position,x,y,w,h,
									array_object		= [],
									array_objectProp 	= [],
									array_position 		= [],
									array_x = [],	min_x = 0,max_x = 0,
									array_y = [],	min_y = 0,max_y = 0,
									array_w = [],	min_w = 0,max_w = 0,
									array_h = [],	min_h = 0,max_h = 0,
									
									array_draggable_id = [],
									array_flip_result = [],
									
									array = []
									;
								jObject.each(function(index,domElement)
									{
										var jTHIS = $(domElement);
										var jTHIS_id = jTHIS.attr("id") == "" ? "[NULL ID]" : jTHIS.attr("id");
											position = jTHIS.css("position");
											
											if((position == "absolute") || (position == "relative"))
											{	
												x = parseInt(jTHIS.css("left"));
												y = parseInt(jTHIS.css("top"));
											}
											else
											{
												x = parseInt(hs_dom.offset(jTHIS.get(0),"offsetLeft",0));
												y = parseInt(hs_dom.offset(jTHIS.get(0),"offsetTop",0));
											}
											w = parseInt(jTHIS.width());
											h = parseInt(jTHIS.height());
												
												x = isNaN(x)?0:x;
												y = isNaN(y)?0:y;
												w = isNaN(w)?0:w;
												h = isNaN(h)?0:h;
											
											
											array_object.push([jTHIS,index,jTHIS_id]);
											
											array_position.push(position);
											array_x.push(x);
											array_y.push(y);
											array_w.push(w);
											array_h.push(h);
											
											array_draggable_id.push(index);
											
												if(domElement.hs_cssStyle == undefined)
												domElement.hs_cssStyle = {};
												domElement.hs_draggable_id = index;
												domElement.hs_cssStyle.x = x;
												domElement.hs_cssStyle.y = y;
												domElement.hs_cssStyle.w = w;
												domElement.hs_cssStyle.h = h;
											
									});
									min_x = Math.min.apply({},array_x);	max_x = Math.max.apply({},array_x);	
									min_y = Math.min.apply({},array_y);	max_y = Math.max.apply({},array_y);
									min_w = Math.min.apply({},array_w);	max_w = Math.max.apply({},array_w);
									min_h = Math.min.apply({},array_h);	max_h = Math.max.apply({},array_h);
									
									
									array_flip_result = array_y.array_flip();
									
									// >>> additional ==> maybe optional
									var marking = [],
										first_lv_result_len = array_flip_result[1].length,
										second_lv_result_len = 0;
										
										for(var i = 0 ; i<first_lv_result_len ; i++)
										{
											second_lv_result_len = array_flip_result[1][i].length;
											for(var j = 0 ; j<array_flip_result[1][i].length ; j++)
											{	
												marking = [i,j];
												
												array_object[array_flip_result[1][i][j]][0][0].hs_cssStyle.line_no = i;
												array_object[array_flip_result[1][i][j]][0][0].hs_cssStyle.line_id = j;
												
												// first line objects
												if(i==0)
												marking[2] = true;
												else
												marking[2] = false;
												
												// last line objects
												if(i==first_lv_result_len-1)
												marking[4] = true;
												else
												marking[4] = false;
												
												// first one object of each line
												if(j==0)
												marking[5] = true;
												else
												marking[5] = false;
												
												// last one object of each line
												if(j==second_lv_result_len-1)
												marking[3] = true;
												else
												marking[3] = false;
												
												if( i==0 && j==0 
													||
													i==first_lv_result_len-1 && j==second_lv_result_len-1
													)
												marking[6] = true;
												else
												marking[6] = false;
												
												
												array_object[array_flip_result[1][i][j]].push(marking);
												//array_flip_result[1][i][j] = [array_object[array_flip_result[1][i][j]][0],array_flip_result[1][i][j],marking]
											}
										}
									// <<< 
										
									
									return [[min_x,min_y,min_w,min_h],[max_x,max_y,max_w,max_h],[array_object,array_position,array_x,array_y,array_w,array_h,array_draggable_id,array_flip_result]];
							};
						hs_cssStyle.dropShadow		= 	function(jObject,simpleConfig)
							{
								simpleConfig = !simpleConfig?{}:simpleConfig;
								simpleConfig.color = !simpleConfig.color?"#000000":simpleConfig.color;
								
								var domElement = jObject[0].outerHTML,
									self_object,
									dropShadow_object;
									jObject[0].innerHTML = jObject[0].outerHTML + jObject[0].outerHTML;
									
									self_object			= jObject.children().first();
									dropShadow_object 	= jObject.children().last();
								
								self_object.css({position:"absolute",top:0,left:0,zIndex:100});
								dropShadow_object.css({position:"absolute",top:1,left:1,zIndex:99,color:simpleConfig.color});
								
								
							};
					})();
			
			// >>>>>>>
			
			// >> regExp
				(function()
					{
						hs_regExp.valueType = function(s)
							{
								if(new RegExp("^[0-9]{1,}[%]{1}$","g").test(s))
								return "%";
								else if(new RegExp("^[0-9]{1,}px$","g").test(s))
								return "px";
								else if(new RegExp("^[0-9]{1,}$","g").test(s))
								return "px";
								else
								return "string";
							};
						
						hs_regExp.isColor = function(s)
							{
								return /^#[0-9a-fA-F]{6}$/.test(s);
							};
						
					})();
			
			// >>>>>>>
			
			// >> number
				(function()
					{
						hs_number.getValue = function(v,s,fv,output_type,debug)
							{	
								// 01. you give value to this function, 
								// 02. the function will know it is % / px type
								// 		a. if % type, it will calculate according to fv (must be int/float)
								// 		b. if px return int number only
								// 		c. if !% AND !px no cal. 
								v 	= v;			// default return value
								s 	= s;			// base value for cal. should be not change as for checking type
								fv 	= !fv?v:fv;		// [optional] for % and it is also the max. value
								
								output_type = !output_type?"px":output_type;			// output type
									output_type = output_type != "%"?"px":output_type;	// data checking
								
								debug = !debug ? false : debug;
									
								//if(isNaN(parseInt(s)))
								//return v;
								
								var type,
									tmpV,
									returnValue = v;
									
								if(s instanceof Array)
								{	
									returnValue = [];
									for(key in s)
									{
										tmpV = s[key];
										
										if(tmpV.constructor == String)
										{
											type = hs_regExp.valueType(tmpV);
												
											if((type == "%") || (type == "px"))
											tmpV = Math.abs(parseFloat(tmpV));
								
											if(type == "%")
											{
												if(tmpV >= 100)
												tmpV = (tmpV - 1) % 100 + 1;
													
													if(output_type == "px")
													tmpV = tmpV/100 * fv;
													if(output_type == "%")
													tmpV = tmpV + "%";
											}
											if(type == "px")
											{
												tmpV = tmpV > fv ? fv : tmpV;
												
												if(output_type == "%")
												tmpV = (tmpV/fv * 100) + "%";
												
											}
										}
										returnValue[key] = tmpV;
									}
								}
								
								if((typeof s == "string") || (typeof s == "number"))
								{
									tmpV = s;
									type = hs_regExp.valueType(tmpV);
									tmpV = Math.abs(parseFloat(tmpV));
									
									if(type == "%")
									{
										if(tmpV >= 100)
										tmpV = (tmpV - 1) % 100 + 1;
										
											if(output_type == "px")
											tmpV = tmpV/100 * fv;
											if(output_type == "%")
											tmpV = tmpV + "%";
									}
									if(type == "px")
									{
										tmpV = tmpV > fv ? fv : tmpV;
											
											if(output_type == "%")
											tmpV = (tmpV/fv * 100) + "%";
									}
								
									returnValue = tmpV;
								}
								
								return returnValue;
								
							};
						
					})();
			
			// >>>>>>>
			
			// >> array
				(function()
					{
						// any extension will be initial here as they are family
						hs_extension.is_array();
						hs_extension.in_array();
						hs_extension.array_key_exists();
						hs_extension.array_filter();		// this function is to filter the array that value are the same
						hs_extension.array_flip();
						
						hs_array.parse_array = function(array,doAlert)
							{
								
								/*
									// you can try to parse below array
									var sample_array = 
									[
									0,
									[1],
									[2,[3,[4,5,6,7,8,[9],10]]],
									[11],
									12,13,14,15,
									[16,17,18,19,20]
									];
									
									// usage:
										// alert
										hs_array.parse_array(sample_array,true);
										// return html
										$("div#debug").get(0).innerHTML = hs_array.parse_array(sample_array);
							
								*/
							
								doAlert = doAlert == undefined ? false:doAlert;
								
								var parse_result = "";
									parse_result += "["+(!doAlert?"<BR/>":"\r\n");
									
									
									var looping = function(array,lv)
										{
											var tmp = "";
											var get_level = lv==undefined?-1:lv;
											if(!hs_array.is_array(array))
											{
												return array+"";
											}
											else
											{	get_level += 1;
												tmp += "Array:";
												for(var k in array)
												{
													if([].array_key_exists(k))
													continue;
													
													tmp += !doAlert?"<BR/>":"\r\n";
													for(var i=0;i<get_level;i++)
													{
														tmp += !doAlert?"&#9":"\t";
													}
													
													tmp += "[" +k+ "] => " + looping(array[k],get_level);
												}
												
												return tmp;
											}
										};
									parse_result += looping(array);
									parse_result += (!doAlert?"<BR/>":"\r\n")+"]";
								
								if(doAlert)
								alert(parse_result);
								else
								return "<pre style='font-size:10px'>"+parse_result+"</pre>";
								
							};
						hs_array.is_array = function(input)
							{
								return typeof(input)=='object'&&(input instanceof Array); 
							};
						// getIndex : old name is : key_in_array = function() {...}
						hs_array.getIndex = function(s,split,debug)
						{
							split = split==undefined?[]:split;
							debug = debug==undefined?false:debug;
							
							var test_re    		= new RegExp("^[a-zA-Z0-9_-]{1,}","g");
							var test_re_match 	= test_re.test(s);
							
							 var re = null;
							 var re_match = new Array(-1,-1);
								
							var pattern,pattern_result;
							
								if(!test_re_match)
								{	
									if(debug)
									alert(s + " is not a valid array");
								}
								else
								{
									re         = new RegExp("^[a-zA-Z0-9_-]{1,}\\\[([\\\[a-zA-Z0-9_\.\\\-\/:\?=\&,%\\\]]{1,})\\\]","g");
									re_match   = re.exec(s);
									
									/*
									
									HS-LightBox[group[img],uniqueId2,detail1[title:image01_title,description:image01_description],detail2[title:image01_title,description:image01_description]]
									var pattern = /[a-zA-Z0-9_-]{1,}(\[)([^\]]{1,},(.*?)\])/g;
									var pattern_result = re_match[1].toString().match(pattern);
									
										pattern_result match : 
											detail1[title:image01_title,description:image01_description]
											detail2[title:image01_title,description:image01_description]
									*/
									pattern = /[a-zA-Z0-9_-]{1,}(\[)([^\]]{1,},(.*?)\])/g;
									pattern_result = re_match[1].toString().match(pattern);
										
										try
										{
											if(pattern_result)
											{
												for(var i=0;i<pattern_result.length;i++)
												{
													re_match[1] = re_match[1].toString().replace(pattern_result[i],"{"+i+"}");
												}
											}
											//hs_debug.show(hs_array.parse_array(re_match[1]),true);
										}catch(ex)
											{
												
											}
								}
							try	{
								var r;
									if(!this.is_array(split))
									r = re_match[1];
									else if((split.length<1) || (split[0] == ""))
									r = re_match[1].split(",");
									else 
									r = re_match[1].split(split[0]);
									
									
									if(this.is_array(r) && pattern_result)
									for(var i=0;i<r.length;i++)
										{
											if(/^\{\d+\}$/.test(r[i]))
											{
												var mR = r[i].match(/(\d+)/g);
													r[i] = r[i].replace("{"+mR+"}",pattern_result[mR]);
											}
										}
										
								return r;
								/*
								if(!this.is_array(split))
								return re_match[1];	
								else if((split.length<1) || (split[0] == ""))
								return re_match[1].split(",");
								else
								return re_match[1].split(split[0]);
								*/
								
								}
								
							catch(ex)	{
									if(debug)
									alert("Function: getIndex() Got ERROR!");
									return null;
										}
						};
						hs_array.getArrayName = function(s,debug)
						{
							debug = debug==undefined?false:debug;
							var test_re    		= new RegExp("^[a-zA-Z0-9_-]{1,}","g");
							var test_re_match 	= test_re.test(s);
							
							if(!test_re_match)
								{	
									if(debug)
									alert(s + " is not a valid array");
								}
								else
								{
									re         = new RegExp("^([a-zA-Z0-9_-]{1,})\\\[([\\\[a-zA-Z0-9_\.\\\-\/:\?=\&,%\\\]]{1,})\\\]","g");
									re_match   = re.exec(s);
								}
							try	{	
								return re_match;
							}catch(ex)	{
									if(debug)
									alert("Function: getArrayName() Got ERROR!");
									return null;
										}
						};
					})();
			
			// >>>>>>>
			
			// >> dom
				(function()
					{
						hs_dom.parse_document = function(jObject,setting)
							{
								/*	// usage:
									// return to "returnObject" structure is:
										
									object = {};
									object.domObject 	= document.body;			// HTML BODY DOM
									object.jgyObject 	= jQuery(document.body);	// HTML BODY DOM in jQuery mode
									object.nodeName		= "body";					// nodeName
									object.childrens	= [];						// store the childrens
										
										// 01 object
										object.childrens[0]	= {};							// declare that mode is in object
										object.childrens[0].domObject = Child DOM Object	
										object.childrens[0].jgyObject = Child DOM Object in jQuery mode
										object.childrens[0].nodeName  = Child nodeName
										object.childrens[0].childrens = []					// declare that childrens in array mode to store the coming childrens
										
											// 01 - 01 object
											object.childrens[0].childrens[0]	= {};						// declare that mode is in object
											object.childrens[0].childrens[0].domObject = Child DOM Object	
											object.childrens[0].childrens[0].jgyObject = Child DOM Object in jQuery mode
											object.childrens[0].childrens[0].nodeName  = Child nodeName
											object.childrens[0].childrens[0].childrens = []					// declare that childrens in array mode to store the coming childrens
											
											// 01 - 02 object
											object.childrens[0].childrens[1]	= {};						// declare that mode is in object
											object.childrens[0].childrens[1].domObject = Child DOM Object	
											object.childrens[0].childrens[1].jgyObject = Child DOM Object in jQuery mode
											object.childrens[0].childrens[1].nodeName  = Child nodeName
											object.childrens[0].childrens[1].childrens = []					// declare that childrens in array mode to store the coming childrens
											
										
										// 02 object
										object.childrens[1]	= {};							// declare that mode is in object
										object.childrens[1].domObject = Child DOM Object	
										object.childrens[1].jgyObject = Child DOM Object in jQuery mode
										object.childrens[1].nodeName  = Child nodeName
										object.childrens[1].childrens = []					// declare that childrens in array mode to store the coming childrens
										
										// 03 object
										object.childrens[2]	= {};							// declare that mode is in object
										object.childrens[2].domObject = Child DOM Object	
										object.childrens[2].jgyObject = Child DOM Object in jQuery mode
										object.childrens[2].nodeName  = Child nodeName
										object.childrens[2].childrens = []					// declare that childrens in array mode to store the coming childrens
										
											// 03 - 01 object
											object.childrens[2].childrens[0]	= {};						// declare that mode is in object
											object.childrens[2].childrens[0].domObject = Child DOM Object	
											object.childrens[2].childrens[0].jgyObject = Child DOM Object in jQuery mode
											object.childrens[2].childrens[0].nodeName  = Child nodeName
											object.childrens[2].childrens[0].childrens = []					// declare that childrens in array mode to store the coming childrens
											
											// 03 - 02 object
											object.childrens[2].childrens[1]	= {};						// declare that mode is in object
											object.childrens[2].childrens[1].domObject = Child DOM Object	
											object.childrens[2].childrens[1].jgyObject = Child DOM Object in jQuery mode
											object.childrens[2].childrens[1].nodeName  = Child nodeName
											object.childrens[2].childrens[1].childrens = []					// declare that childrens in array mode to store the coming childrens
										
									// ************************************
									
									
									
									// ************************************
										
										var body = $("body");			// DOM Document you are going to parse
										var parseSetting = 	{
												output_mode	: [false],	// alert the parse result or return the parse result
												dom_filters	: ["div"],	// filter tagName, this mean will only scan the DOM with tagName is DIV
												returnObject	: {}	// a large Result (object/array+object) is return, the mode is shown above
														};
										
										// if you want return the parse result, it will like below
										//$("div#debug").get(0).innerHTML = hs_dom.parse_document(body,parseSetting);
										
										// parse finished, you can try below alert to get object_id you want
										
										try	{
												alert(parseSetting.returnObject.childrens[0].childrens[0].object_id);
											} catch(ex)
											{
												alert("The childrens you are going to call is not exists.");
											}
										
									*/
							
								var parse_result = "",
									output_mode = [],
									dom_filters = [],
									returnObject = {},
									alertResult = false,
									show_result = null,
									
									jChildren = jObject.children(),
									looping = null
									
									;
								setting = setting == undefined || typeof setting != "object" ?{}:setting;
								try
									{
										output_mode = setting.output_mode;
										dom_filters = setting.dom_filters;
										returnObject = setting.returnObject;
										
										alertResult = output_mode[0];
											
											if(!alertResult)
											show_result = output_mode[1];
											
									}catch(ex)	{
										alert("Your setting has problem, please check it.");		
												}
							
									parse_result += "["+(!alertResult?"<BR/>":"\r\n");
										
										returnObject.domObject 	= jObject.get(0);
										returnObject.jgyObject 	= jObject;
										returnObject.object_id 	= jObject.attr("id");
										returnObject.nodeName 	= jObject.attr("nodeName");
										returnObject.childrens 	= [];
										
										looping = function(jChildren,lv,returnObject)
										{
											var key = 0,	// key should belong to this function, so everytime, call the function, key is = 0, and when looping, will not interaction of key
												tmp = "",
												tmp_array 	= [],
												variedObject 	= {},
												tmp_object 		= {},
												get_level 	= (lv==undefined || lv == null?-1:lv)
												;
												
													// can : tmp_object = returnObject ? or directly : variedObject = returnObject ? NO! WHY?
													// returnObject is the full object, variedObject will be to part of returnObject, and continuous change variable 
													// variedObject may be different in every looping function
													tmp_object = returnObject;	
													
											if(jChildren.length==0)
											{
												return "[text]";
											}
											else
											{	get_level += 1;
												tmp += "Children:";
												
												jChildren.each(function(k,v)
													{
														if(dom_filters.in_array($(this).attr("nodeName"))||dom_filters.length == 0)
														{
															tmp += !alertResult?"<BR/>":"\r\n";
															for(var i=0;i<get_level;i++)
															{
																tmp += !alertResult?"&#9":"\t";
															}
															
															
															tmp_array[key] 				= {};
															tmp_array[key].domObject 	= this;
															tmp_array[key].jgyObject 	= $(this);
															tmp_array[key].object_id 	= $(this).attr("id");
															tmp_array[key].nodeName 	= $(this).attr("nodeName");
															tmp_array[key].childrens 	= [];
																
																
															tmp_object.childrens[key] 	= tmp_array[key];
															variedObject = tmp_object.childrens[key];
															
															tmp += "[" +key+ "] = "+$(this).attr("nodeName")+" => " + looping($(this).children(),get_level,variedObject);
															key += 1;
														}
													});
												
												return tmp;
											}
										};
									parse_result += looping(jChildren,null,returnObject);
									
									parse_result += (!alertResult?"<BR/>":"\r\n")+"]";
								
								if(alertResult)
								alert(parse_result);
								else
								return "<pre style='font-size:10px'>"+parse_result+"</pre>";
							};
						
						hs_dom.vAlign	= function(jObject)
							{
								var returnChain	= {},
									jTarget 	= jObject,
									jTarget_p 	= jTarget.parent(),
									
									outerElement	= hs_dom.append(jTarget_p,"<div class='outerElement'></div>"),
									innerElement	= hs_dom.append(outerElement,"<div class='innerElement'></div>"),
									closestElement	= hs_dom.append(innerElement,"<div class='closestElement'></div>")
									;
									closestElement.append(jTarget);
									
									
									if(hs_browser.isIE() && hs_browser.browserVersion()<=7)
									outerElement.css({
										position:"relative",top:0,left:0,
										width:"100%",height:"100%"
									});
									else
									outerElement.css({
										position:"relative",top:0,left:0,
										width:"100%",height:"100%",
										display:"table"
									});
									
									if(hs_browser.isIE() && hs_browser.browserVersion()<=7)
									innerElement.css({
										position:"absolute",top:"50%",left:0,
										width:"100%",height:"auto"
									});
									else
									innerElement.css({
										verticalAlign:"middle",
										display:"table-cell"
									});
									
									returnChain.self 	= closestElement.children().last();
									
									if(hs_browser.isIE() && hs_browser.browserVersion()<=7)
									closestElement.css({
										position:"relative",top:"-50%",
										width:"auto",height:"auto"
									});
									else
									closestElement.css({
										position:"relative",
										width:"auto",height:"auto"
									});
									
									
									returnChain.family 	= {};
									returnChain.family.outer 	= outerElement;
									returnChain.family.inner 	= innerElement;
									returnChain.family.parent 	= closestElement;
									returnChain.family.self 	= returnChain.self;
									
								return returnChain;
							};
						hs_dom.hvAlign	= function(jObject,simpleConfig)
							{
								var returnChain	= {},
									jTarget 		= jObject,
									jTarget_p 		= jTarget.parent(),
									
									outerElement	= hs_dom.append(jTarget_p,"<div class='outerElement'></div>"),
									innerElement	= hs_dom.append(outerElement,"<div class='innerElement'></div>"),
									closestElement	= hs_dom.append(innerElement,"<div class='closestElement'></div>")
									;
									closestElement.append(jTarget);
									
									if(!jTarget[0]._width)
									jTarget[0]._width = "auto";
									
									if(!jTarget[0]._height)
									jTarget[0]._height = "auto";
									
									if(hs_browser.isIE() && hs_browser.browserVersion()<=7)
									outerElement.css({
										position:"relative",top:0,left:0,
										width:"100%",height:"100%"
									});
									else
									outerElement.css({
										position:"relative",top:0,left:0,
										width:"100%",height:"100%",
										display:"table"
									});
									
									
									if(hs_browser.isIE() && hs_browser.browserVersion()<=7)
									innerElement.css({
										position:"absolute",top:"50%",left:"50%",
										width:jTarget[0]._width,height:jTarget[0]._height
									});
									else
									innerElement.css({
										verticalAlign:"middle",
										textAlign:"center",
										width:"100%",height:"100%",
										display:"table-cell"
									});
									
									returnChain.self 	= closestElement.children().last();
									
									if(hs_browser.isIE() && hs_browser.browserVersion()<=7)
									closestElement.css({
										position:"relative",top:"-50%",left:"-50%",
										width:jTarget[0]._width,height:jTarget[0]._height
									});
									else
									closestElement.css({
										position:"relative",
										margin:"auto",
										width:jTarget[0]._width,height:jTarget[0]._height
									});
									
									
									
									returnChain.family 	= {};
									returnChain.family.outer 	= outerElement;
									returnChain.family.inner 	= innerElement;
									returnChain.family.parent 	= closestElement;
									returnChain.family.self 	= returnChain.self;
									
								return returnChain;
							};
						
						hs_dom.append 	= function(jObject,html)
							{
								return jObject.append(html).children().last();
							};
						hs_dom.prepend	= function(jObject,html)
							{
								return jObject.prepend(html).children().first();
							};
							
						hs_dom.cloneElement	=	function(object1,object2,moveObject,scope,keepOrginal)	
							{
								// ! object1 shouldn't be string and should be only 1 HTML Dom object after extracted from JqueryObject
								moveObject = moveObject==undefined?true:moveObject;
								scope = scope==undefined?"outer":scope;
								keepOrginal = keepOrginal == undefined ? false : keepOrginal;
								
								if(scope == "inner")
								{
									if(object1.children().length == 0) 
									{
										alert("No dom is found, error is from : HSDom.cloneElement, check where to call this object.");
										return null;
									}
									if(object1.children().length > 1)
									{
										alert("There is only one dom object is allowed, error is from : HSDdom.cloneElement, check where to call this object.");
										return null;
									}
								}

								if(scope == "outer")
									if(keepOrginal)
									object2.append(object1.get(0).outerHTML);
									else
									object2.get(0).innerHTML = object1.get(0).outerHTML;
									
								if(scope == "inner")
									if(keepOrginal)
									object2.append(object1.get(0).innerHTML);
									else
									object2.get(0).innerHTML = object1.get(0).innerHTML;
									
								if(moveObject)
								object1.remove();					
								return object2.children().last();
							};
						
						hs_dom.insertHTML = function(jObject,htmlContent)	
							{
								jObject.get(0).innerHTML = htmlContent;
								return jObject.children().first();
							};
						
						hs_dom.clearHTML = function(jObject)
							{
								jObject.get(0).innerHTML = "";
							};
						
						hs_dom.offset = function(DOMElement,offsetType,lv)
							{
								lv = lv == undefined ? -1 : lv;
									lv = isNaN(parseInt(lv))?-1:parseInt(lv);
								
								// IE include border width & height
								// firefox non-included border width & height
									
									
								if(lv == -1)
								{
									var offsetResult = (DOMElement.offsetParent)? DOMElement[offsetType]+this.offset(DOMElement.offsetParent,offsetType,lv) : DOMElement[offsetType];
									var debug = "";
										debug += "<div style='font-size:11px;'>";
										debug += "DOMElement.offsetParent : " + DOMElement.offsetParent +"<BR/>";
										debug += "ID : " + jQuery(DOMElement).attr("id") +"<BR/>";
										debug += "Class : " + jQuery(DOMElement).attr("class") +"<BR/>";
										debug += "offsetType : " + offsetType +"<BR/>";
										debug += "DOMElement[offsetType] : " + DOMElement[offsetType] + "<BR/>";
										debug += "</div>";
									//hs_debug.show(debug,true);
									return offsetResult;
								}
								if(lv == 0)
								return DOMElement[offsetType];
								if(lv > 0)
								{
									lv -=1;
									return (DOMElement.offsetParent) ? DOMElement[offsetType]+this.offset(DOMElement.offsetParent,offsetType,lv) : DOMElement[offsetType];
								}
							};
						
						hs_dom.iframeLoaded = function(url,callback)	
							{
								var iframe = document.createElement("IFRAME");
									iframe.src = url;
									THIS.append($(document.body),iframe);
									$(iframe).css({"opacity":0});
							
											$(iframe).load(function()	{
														$(iframe).remove();
														callback();
																		});

							};
						
						hs_dom.lightBox_background = function(literalObject)
							{
								/*
									!!! remember to add below style to .css
										.HS-cssStyle-fixed
										{
											position:fixed; left:0; top:0;
											_position:absolute;									
											_top:expression(documentElement.scrollTop+"px");	
											_left:expression(documentElement.scrollLeft+"px");
										}
								*/
								
								literalObject = !literalObject?{}:literalObject;
								
								var html = jQuery("html"),
									body = jQuery("body"),
									lb_bg = hs_dom.append(body,"<div class='HS-LightBox-Background'></div>");
									
									literalObject.backgroundColor 	= !literalObject.backgroundColor?"#000000":literalObject.backgroundColor;
									literalObject.opacity 			= !literalObject.opacity?0:literalObject.opacity;
									literalObject.opacity
									
									
									lb_bg.addClass("HS-cssStyle-fixed");
									lb_bg.css({width:"100%",height:"100%",backgroundColor:literalObject.backgroundColor,opacity:0})
									
									lb_bg.stop().animate({opacity:literalObject.opacity},{duration:300,queue:false,complete:function()	{}});
									
									return lb_bg;
							};
						
					})();
	
			// >>>>>>>
			
			// >> restrict
				(function()
					{
						hs_restrict.clear_selection = function()
						{
							var sel ; 
							if(document.selection && document.selection.empty)
							document.selection.empty() ; 
							else if(window.getSelection) 
							{ 
								sel=window.getSelection(); 
								if(sel && sel.removeAllRanges) 
								sel.removeAllRanges() ; 
							}
						};
						hs_restrict.enable_selection = function(jObject)
						{
							if(typeof jObject.get(0).onselectstart != 'undefined')
								jObject.get(0).onselectstart = function()	{return true;}
							else if(typeof jObject.get(0).style.MozUserSelect != "undefined")
								jObject.get(0).style.MozUserSelect = "";
							else
								jObject.get(0).onmousedown = function()	{return true;}
						};
						hs_restrict.disable_dblclick_select = function(jObject,debug)
						{
							// !! important, parent() style position suggest relative / absolute
							// principle : append a new transparent layer to parent(), block the mouseEvent to the text
							
							var size 	= [jObject.parent().width(),jObject.parent().height()];
							var layer 	= hs_dom.append(jObject.parent(),"<div></div>");
								layer.css(	{
									position:"absolute",top:0,left:0,
									width:size[0],
									height:size[1],
									backgroundColor:"#ffffff",
									opacity:!debug?0:.5
											});
						};
						hs_restrict.disable_selection = function(jObject)
						{
							if(typeof jObject.get(0).onselectstart != 'undefined')
								jObject.get(0).onselectstart = function()	{return false;}
							else if(typeof jObject.get(0).style.MozUserSelect != "undefined")
								jObject.get(0).style.MozUserSelect = "none";
							else
								jObject.get(0).onmousedown = function()	{return false;}
							
						};
						hs_restrict.disable_drag = function(jObject)	
						{
							if(typeof jObject.get(0).ondragstart != "undefined")
								jObject.get(0).ondragstart = function()	{return false;}
							else
								{
										jObject.get(0).onmousedown = function(e)	{e.preventDefault();}
								}
						};
						hs_restrict.disable_rClick = function(jObject)
						{
							//alert(JqueryObject.get(0).nodeName);
						};
					
					})();
			
			// >>>>>>
			
			// >> image
				(function()
					{
						hs_image.imgResize_wscale = function(jObject,w)	
							{
								var currentW = parseInt(jObject.width());
								var currentH = parseInt(jObject.height());
								var scaleW = parseInt(w)/currentW;
										jObject.css("width",parseInt(w)+"px");
										jObject.css("height",(currentH * scaleW)+"px");
							};						
						hs_image.imgResize_hscale = function(jObject,h)	
							{
								var currentH = parseInt(jObject.height());
								var currentH = parseInt(jObject.height());
								var scaleH = parseInt(h)/currentH;
										jObject.css("width",(currentW * scaleH)+"px");
										jObject.css("height",parseInt(h)+"px");
							};
						
						hs_image.img_scale = function(jObject,w,h,doReturn,simpleConfig)
							{
								simpleConfig = !simpleConfig?{}:simpleConfig;
									
								doReturn = !doReturn ? false : true;
								var objectW,objectH,
									resize_wRate,resize_hRate,	resize_rate,
									resizeTo_w,resizeTo_h;
									
									objectW = !simpleConfig.sampleW?jObject.width():simpleConfig.sampleW;
									objectH = !simpleConfig.sampleH?jObject.height():simpleConfig.sampleH;
									
									resize_wRate = objectW / w;
									resize_hRate = objectH / h;
									
									if(resize_wRate <= 1 && resize_hRate <=1)
									{
										// no need to do scale
										
										if(doReturn)
										return [(objectW),(objectH)];
										
									}
									else
									{
										if(resize_wRate > resize_hRate)
										{
											resize_rate = resize_wRate;
										}
										else
										{
											resize_rate = resize_hRate;
										}
										if(!doReturn)
										{
											jObject.attr("width",(objectW / resize_rate));
											jObject.attr("height",(objectH / resize_rate));
										}
										else
										{
											return [(objectW / resize_rate),(objectH / resize_rate)];
										}
									}
							
							};
						hs_image.img_scale_virtual = function(size_groupA,size_groupB)
							{
								var w = [size_groupA[0],size_groupB[0]],
									h = [size_groupA[1],size_groupB[1]],
									resize_wRate = w[1] / w[0],
									resize_hRate = h[1] / h[0],
									resize_rate = 1;
									
									
									if(resize_wRate>=1 && resize_hRate>=1)
									{	
										return [1,w[1],h[1]];
									}
									else
									{
										resize_rate = resize_wRate < resize_hRate ? resize_wRate : resize_hRate;
										return [resize_rate,Math.round(w[0]*resize_rate),Math.round(h[0]*resize_rate)];
									}
							
							};
						
						hs_image.img_zoom_virtual	= function(size_groupA,size_groupB)
							{
								var w = [size_groupA[0],size_groupB[0]],
									h = [size_groupA[1],size_groupB[1]],
									resize_wRate = w[1] / w[0],
									resize_hRate = h[1] / h[0],
									resize_rate = 1;
									
									if(resize_wRate<=1 || resize_hRate<=1)
									{	
										return [1,w[0],h[0]];
									}
									else
									{
										resize_rate = resize_wRate < resize_hRate ? resize_wRate : resize_hRate;
										return [resize_rate,w[0]/resize_rate,h[0]/resize_rate];
									}
							};
						hs_image.imgResize_scale = function(jObject,w,h,config)	
							{
									var THIS = this;
									
									config = typeof config!="object"?{}:config;
									config.animation = !config.animation?false:config.animation;
										config.duration = !config.duration?300:config.duration;	// will apply for animation
									config.functionType = !config.functionType?"no-return":config.functionType;
									
									config.functions 	= {};
									config.attributes 	= {};
									
									
									// The image width & height
									config.objects = {width:jObject.width(),height:jObject.height()};
									
									config.attributes.coming_width 	= w;
									config.attributes.coming_height = w;
									config.attributes.xscale_ratio = null;
									config.attributes.yscale_ratio = null;
									config.attributes.sure_width = null;
									config.attributes.sure_height = null;
									config.attributes.shape_type = "square";
									
									
									config.scale_mode = !config.scale_mode?"auto-scale":config.scale_mode;
									
									
										// square / h-rectangle / v-rectangle
										if(config.objects.width>config.objects.height)
										config.attributes.shape_type = "h-rectangle";
										else if(config.objects.width<config.objects.height)
										config.attributes.shape_type = "v-rectangle";
										else
										config.attributes.shape_type = "square";
									
									config.attributes.xscale_ratio 	= config.attributes.coming_width / config.objects.width;
									config.attributes.yscale_ratio 	= config.attributes.coming_height / config.objects.height;
									
									config.functions.x_scale = function()
										{
											config.attributes.sure_width 	= config.attributes.coming_width;
											config.attributes.sure_height	= config.objects.height * config.attributes.xscale_ratio;
										}
									config.functions.y_scale = function()
										{
											config.attributes.sure_width 	= config.objects.width * config.attributes.yscale_ratio;
											config.attributes.sure_height	= config.attributes.coming_height;
										}
									config.functions.full_scale = function()
										{
											if(config.attributes.xscale_ratio < config.attributes.yscale_ratio)
											config.functions.x_scale();
											else if(config.attributes.xscale_ratio > config.attributes.yscale_ratio)
											config.functions.y_scale();
											else
											config.functions.x_scale();
										}
									
									if(config.scale_mode == "auto-scale")
									{
										if(config.attributes.shape_type == "h-rectangle")
										config.functions.x_scale();
										else if(config.attributes.shape_type == "v-rectangle")
										config.functions.y_scale();
										else	// * square
										config.functions.x_scale();
									}
									else if(config.scale_mode == "x-scale")
									config.functions.x_scale();
									else if(config.scale_mode == "y-scale")
									config.functions.y_scale();
									else if(config.scale_mode == "full-scale")
									config.functions.full_scale();
									
										if(config.functionType=="return")
										{
											return [config.attributes.sure_width,config.attributes.sure_height];
										}
										if(config.functionType == "no-return")
										{
											if(!config.animation)
											jObject.css({width:config.attributes.sure_width,height:config.attributes.sure_height});
											else
											jObject.animate({width:config.attributes.sure_width,height:config.attributes.sure_height},{duration:config.duration,queue:false});
										}
										
							};
																		
						hs_image.imgResize_force = function(jObject,w,h)	
							{
										jObject.css("width",w);
										jObject.css("height",h);
							};
							
						hs_image.imgLoaded = function(jObject,callback,simpleConfig)	
							{
								simpleConfig = !simpleConfig?{}:simpleConfig;
								var THIS = this;
								var image = new Image();
								var returnConfig = {};
								try	{
										if(jObject.attr("nodeName") == "IMG")
										{
										image.src = jObject.attr("src");
										returnConfig.domElement = jObject[0];
										returnConfig.domElement_parent	= jObject.parent()[0];
										}
										else
										{
											if(typeof jObject == "string")
											image.src = jObject;
											else
											{
												image.src = jObject.src;
												returnConfig.domElement = jObject;
												returnConfig.domElement_parent = jObject.parentNode;
											}
										}
									}catch(ex)
									{	
										if(typeof jObject == "string")
										image.src = jObject;
										else
										{
											image.src = jObject.src;
											returnConfig.domElement = jObject;
											returnConfig.domElement_parent = jObject.parentNode;
										}
									}
									
								var loadWatch = setInterval(load,10);

								function load()
									{	
										if(image.complete)
											{
												var img = new Image();
													img.src = image.src;
													
												callback(img.width,img.height,returnConfig);
													
												clearInterval(loadWatch);
											}
											else
											{
												image.onload = function()
													{
														var img = new Image();
															img.src = image.src;
													
														callback(img.width,img.height,returnConfig);
													}
												clearInterval(loadWatch);
											}
										
									}
							};
						hs_image.imgMask	= function(jObject,callback)
							{
								var mask = document.createElement("div");
									jQuery(mask).css({position:"absolute",top:0,left:0,width:jObject.parent().width(),height:jObject.parent().height(),backgroundColor:"#ffffff",opacity:0});
									
									mask = hs_dom.append(jObject.parent(),mask);
							
									return mask;
							};
						hs_image.pngMask	= function(jObject,url,simpleConfig)
							{
								simpleConfig = !simpleConfig?{}:simpleConfig;
								
								simpleConfig.x = !simpleConfig.x?0:simpleConfig.x;
								simpleConfig.y = !simpleConfig.y?0:simpleConfig.y;
								
								
									
								var mask = document.createElement("div");
									jQuery(mask).css({position:"absolute",top:0,left:0,width:jObject.width(),height:jObject.height()});
									
									//hs_dom.append(jQuery(mask),"<img src='"+url+"' border='0' width='110'/>");
									var thumb01 = hs_dom.append(jQuery(mask),"<div id='thumb01'></div>"),
										thumb02 = hs_dom.append(jQuery(mask),"<div></div>"),
										thumb03 = hs_dom.append(jQuery(mask),"<div></div>"),
											thumbBreak01 = hs_dom.append(jQuery(mask),"<div style='clear:both;'></div>"),
										thumb04 = hs_dom.append(jQuery(mask),"<div></div>"),
										thumb05 = hs_dom.append(jQuery(mask),"<div></div>"),
										thumb06 = hs_dom.append(jQuery(mask),"<div></div>"),
											thumbBreak02 = hs_dom.append(jQuery(mask),"<div style='clear:both;'></div>"),
										thumb07 = hs_dom.append(jQuery(mask),"<div></div>"),
										thumb08 = hs_dom.append(jQuery(mask),"<div></div>"),
										thumb09 = hs_dom.append(jQuery(mask),"<div></div>")
										
										;
										
										var repeat_size = [jObject.width() - 23,jObject.height() - 83];
											repeat_size[0] = repeat_size[0]<=0?1:repeat_size[0];
											repeat_size[1] = repeat_size[1]<=0?1:repeat_size[1];
											
										thumb01.css({width:12,height:43,overflow:"hidden",float:"left",backgroundImage:"url(thumbFrame/imageFrame_01.png)"});
										thumb02.css({width:repeat_size[0],height:43,overflow:"hidden",float:"left",backgroundImage:"url(thumbFrame/imageFrame_02.png)"});
										thumb03.css({width:11,height:43,overflow:"hidden",float:"left",backgroundImage:"url(thumbFrame/imageFrame_04.png)"});
											
										thumb04.css({width:12,				height:repeat_size[1],overflow:"hidden",float:"left",backgroundImage:"url(thumbFrame/imageFrame_05.png)"});
										thumb05.css({width:repeat_size[0],	height:repeat_size[1],overflow:"hidden",float:"left",backgroundImage:"url(thumbFrame/imageFrame_06.png)"});
										thumb06.css({width:11,				height:repeat_size[1],overflow:"hidden",float:"left",backgroundImage:"url(thumbFrame/imageFrame_08.png)"});
									
										thumb07.css({width:12,height:40,overflow:"hidden",float:"left",backgroundImage:"url(thumbFrame/imageFrame_09.png)"});
										thumb08.css({width:repeat_size[0],height:40,overflow:"hidden",float:"left",backgroundImage:"url(thumbFrame/imageFrame_10.png)"});
										thumb09.css({width:11,height:40,overflow:"hidden",float:"left",backgroundImage:"url(thumbFrame/imageFrame_12.png)"});
									
									
									jObject.css({position:"absolute",top:6,left:6,width:jObject.width()-6*2,height:jObject.height()-6*2});
									
									mask = hs_dom.append(jObject.parent(),mask);
									mask.find("img").css({position:"absolute",top:0,left:0});
							
									return mask;
							};
					
					})();
			
			// >>>>>>>
			
			// >> mouse
				(function()
					{
					
						hs_mouse.move_direction = function(jObject,x,y)
							{
							};
						hs_mouse.drawRectangle	= function(jObject,e,simpleConfig,callback)
							{
								simpleConfig = !simpleConfig?{}:simpleConfig;
								
								var html = jQuery("html"),
									body = jQuery("body"),
									mouse 					= {},
									outerSpace 				= [],
									rectangle,
									rectanglePosition		= [],
									return_literalObject	= {},
									pos = [],size = []
									;
									mouse.x = e.pageX;
									mouse.y = e.pageY;
									
									outerSpace[0] = simpleConfig.sampleX + html.scrollLeft();
									outerSpace[1] = simpleConfig.sampleY + html.scrollTop();
									
									
									html.bind("mousedown",function(e)
										{
									rectangle 			= hs_dom.append(jObject,"<div></div>"),
									rectanglePosition 	= [mouse.x - outerSpace[0],mouse.y - outerSpace[1]];
									rectangle.css({position:"absolute",top:rectanglePosition[1],left:rectanglePosition[0],backgroundColor:"#000000",border:"1px #ffffff solid",opacity:.3,width:1,height:1,backgroundColor:"#dcdcdc",zIndex:2000});
									//rectangle.hide();
									
											var ox = rectanglePosition[0];
											var oy = rectanglePosition[1];
											jQuery(this).bind("mousemove",function(e)
												{
													//rectangle.show();
													
													jObject.css({cursor:"crosshair"});
													
													mouse.x = e.pageX;
													mouse.y = e.pageY;
													
													rectanglePosition = [mouse.x - outerSpace[0],mouse.y - outerSpace[1]];
													
													var w = Math.abs(rectanglePosition[0] - ox),
														h = Math.abs(rectanglePosition[1] - oy),
														x = rectanglePosition[0],
														y = rectanglePosition[1];
														
														if(ox > rectanglePosition[0])
														x = rectanglePosition[0];
														else
														x = ox;
														
														if(oy > rectanglePosition[1])
														y = rectanglePosition[1];
														else
														y = oy;
														
														y += 0;
													
													pos = [x,y];
													size = [w,h];
													
													var debug = [x,y,w,h];
														
													rectangle.css({width:w,height:h,left:x,top:y});
											
													//hs_debug.show(hs_array.parse_array(debug));
												});
										}).bind("mouseup",function(e)
											{
												rectangle.remove();
												
												html.unbind("mousedown");
												html.unbind("mouseup");
												html.unbind("mousemove");
												
												if(size[0]>=1 && size[1]>=1)
												{
													jObject[0].zooming = true;
												}
												
												if(callback && jObject[0].zooming)
												{
													callback(pos[0],pos[1],size[0],size[1]);
												}
												
												
											});
									
										
									return_literalObject.htmlObject			= html;
									return_literalObject.relativePosition 	= rectanglePosition;
									
									return return_literalObject;
							};
						hs_mouse.draggable = function(JqueryObject,dragOpts,draggingFunc,share_object)	
							{
								/*
									usage : 
									hs_mouse.draggable(drag_object,
										{	type:"axis-x",
											range:[h_movable_w[0],h_movable_w[1]]
										},
										{	action:function(draggingObject,mx,my)	{	do_scroll("x",0,mx,null,true);	},
											mousedownFunction:function()			{	hs_restrict.disable_selection($("body"));	},
											mouseupFunction:function()				{	hs_restrict.enable_selection($("body"));	}
										}
									);
								
								*/
					
								var arguments = arguments;
								var object = JqueryObject;
									
									
									var dragObject = JqueryObject;	// this object means follow the mouse
									
									
									object.bind("mousedown",function(e) {e.stopPropagation();});
									object.bind("mouseup",function(e) 	{e.stopPropagation();});
									
								var object_w = object.width(),
									object_h = object.height();
								var omx = omy = 0;
								var mousedown_xDistance = mousedown_yDistance = 0;
									dragOpts = dragOpts == undefined ? {type:"default"}:dragOpts;
									dragOpts.type = dragOpts.type == undefined ? "default" : dragOpts.type;
									
								var offsetH = object[0].offsetWidth;	// included border / padding
								var offsetV = object[0].offsetHeight;	// included border / padding
									
									var object_H_wrapper = (offsetH - object_w); // maybe double sides
									var object_V_wrapper = (offsetV - object_h); // maybe double sides
										
										var object_H_sideWrapper = object_H_wrapper/2; // only represent to 1 side
										var object_V_sideWrapper = object_V_wrapper/2; // only represent to 1 side
									
								var object_margins = [parseInt(object.css("marginTop")),parseInt(object.css("marginRight")),parseInt(object.css("marginBottom")),parseInt(object.css("marginLeft"))];
									
									
									var a = object.css("marginTop");
									var b = hs_cssStyle.getElementStyle(object,"borderWidth","offsetWidth");
									var c = hs_cssStyle.getElementStyle(object,"borderColor","borderColor");
									var d = hs_cssStyle.getElementStyle(object,"borderStyle","borderStyle");
									var e = object[0].offsetWidth;
										
									//$("div#debug")[0].innerHTML += object_margins + " - " + offsetV + " - " +object_H_sideWrapper+ "<BR/>";
									//$("div#debug")[0].innerHTML = object.css("border") + " - " + object.css("borderWidth") + " - " + object.css("borderColor") + "-" + object.css("borderStyle") + "<BR/>";
									
								var elementMove = 	{
										start : function(e,sx,sy)
											{
												omx = (parseInt(e.pageX) - sx);
												omy = (parseInt(e.pageY) - sy);
												
													if(dragOpts.range)
													{
														if(dragOpts.type=="axis-y")
														{
															if(omy < dragOpts.range[0])
																omy = dragOpts.range[0];
															if(omy > dragOpts.range[1])
																omy = dragOpts.range[1];
														}
														else if(dragOpts.type=="axis-x")
														{
															if(omx < dragOpts.range[0])
																omx = dragOpts.range[0];
															if(omx > dragOpts.range[1])
																omx = dragOpts.range[1];
														}
														else if(dragOpts.type=="axis-xy")
														{
															var rx = [dragOpts.range[0],dragOpts.range[2]],
																ry = [dragOpts.range[1],dragOpts.range[3]];
																
																rx[1] = rx[1] - object_w < rx[0] ? rx[0] : rx[1] - object_w;
																ry[1] = ry[1] - object_h < ry[0] ? ry[0] : ry[1] - object_h;
																
																rx[1] = rx[1] - object_H_wrapper;	// for handling the border / padding
																ry[1] = ry[1] - object_V_wrapper;	// for handling the border / padding
																
																rx[0] -= object_margins[3]; 
																ry[0] -= object_margins[0];
																
																rx[1] -= object_margins[1];
																ry[1] -= object_margins[2];
																
															if(omx < rx[0])
																omx = rx[0];
															else if(omx > rx[1])
																omx = rx[1];
															if(omy < ry[0])
																omy = ry[0];
															else if(omy > ry[1])
																omy = ry[1];
														}
													}
												
												if(dragOpts.type == "default")
												{
													dragObject.css("left",omx+"px");
													dragObject.css("top",omy+"px");
												}
												else if(dragOpts.type == "axis-y")
												{
													dragObject.css("top",omy+"px");
												}
												else if(dragOpts.type == "axis-x")
												{
													dragObject.css("left",omx+"px");
												}
												else if(dragOpts.type == "axis-xy")
												{
													dragObject.css({left:omx,top:omy});
												}
											}
													};
									
			var mouseEvent = 	{
						_mouseupFunction : function()
							{
								if(draggingFunc)
								if(draggingFunc.mouseupFunction)
								draggingFunc.mouseupFunction(object,omx,omy,draggingFunc);
							},
						_mousedownFunction : function()
							{
								if(draggingFunc)
								if(draggingFunc.mousedownFunction)
								draggingFunc.mousedownFunction(object,omx,omy,draggingFunc);
							},
						_mousemovingFunction : function()
							{
								if(draggingFunc)
								if(draggingFunc.action)
								draggingFunc.action(dragObject,omx,omy);
							},
						_mouseDown : function(bindObject)
							{	
								var THIS = this;
								var DOMObject = null;
								bindObject.bind("mousedown",function(e)
									{
										object		= $(this);
										dragObject 	= $(this);

										if(dragOpts.prop)
										if(dragOpts.prop[0] == "proxy")
										{
											DOMObject = dragObject.clone().removeAttr("id").removeClass("HS-dragElement").get(0);
											//DOMObject.innerHTML = "";
											dragObject = hs_dom.append($(this).parent(),DOMObject);
											dragObject.css({zIndex:99999});
											dragObject.css({opacity:.5});
										}
										
// left distance between mouse and panel 	: parseInt(e.pageX) - parseInt($(this).css("left"));
// top distance between mouse and panel 	: parseInt(e.pageY) - parseInt($(this).css("top"));		
mousedown_xDistance = parseInt(e.pageX) - parseInt(dragObject.css("left"));// this will only record when mousedown, the distance between panel and mousex
mousedown_yDistance = parseInt(e.pageY) - parseInt(dragObject.css("top"));	// this will only record when mousedown, the distance between panel and mousey
	if(e.which == 1)
	{	elementMove.start(e,mousedown_xDistance,mousedown_yDistance);
		THIS._mousedownFunction();
			
		THIS._mouseMove($("html"));
	}										
										dragObject.bind("mouseup",function(e)	{THIS._mouseUp($("HTML"));});
			
									});
								
							},
						_mouseUp	: function(bindObject)
							{	var THIS = this;
								
								bindObject.unbind("mousemove");
								bindObject.unbind("mouseup");	// you should unbind mouseup, else mouseup = trigger >1 object mouseup function
								
										
								if(dragOpts.prop)
								if(dragOpts.prop[0] == "proxy")
										{	
											
											if(dragOpts.prop[1])
											object.stop().animate({left:omx,top:omy},{duration:800,queue:false,complete:function()	{}});
											
											dragObject.css({zIndex:0});
											dragObject.stop().animate({opacity:0},{duration:300,queue:false,complete:function()	{$(this).remove();}});
										};
								THIS._mouseupFunction();
								
								
							},
						_mouseMove	: function(bindObject)
							{	var THIS = this;
								bindObject.bind("mousemove",function(e)
								{	
									// omove the object base on the calculated mx & my result
									elementMove.start(e,mousedown_xDistance,mousedown_yDistance);
									
									THIS._mousemovingFunction();
									
									// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
									// seldom program know this as it is reference from jQuery UI
									// it is only for MSIE, when you : 
									// 1) mousedown (active mouseEvent) on browser, 2) mouseleave browser, 3) mouseup outside of browser
									// 4) $("html").bind("mouseup",function(e){}) is not work when mouse is out of browser, unbind will not trigger
									// 5) so when you enter browser, mousemove is trigger on mouseup status, also you will need to check mousedown is trigger when mouse is move back to browser
									if ($.browser.msie && !(e.which == 1)) 
									{
										THIS._mouseUp($(this));
									}
								}).bind("mouseup",function(e)	{THIS._mouseUp($(this));
									});
								
							}
									};
									
				mouseEvent._mouseDown(object);
							
							};	
					
					})();
			
			// >>>>>>>
			
			// >> object
				(function()
					{
						
					
					})();
			
			// >>>>>>>
			
			// >> quickText
				(function()
					{
						hs_quickText.showPercentage = function(a,b)
							{
								return Math.ceil(a/b*100) + "%";	
							};
						hs_quickText.insertText		= function(domElement,s)
							{
								s = !s?"":s;
									try	{
								domElement.innerHTML = s;
										} catch(ex)
										{
											alert("Error: hs_quickText.insertText()");
										}
							};
					})();
				
			// >>>>>>>
			
			// >> debug
				(function()
					{
						hs_debug.show = function(html_content,prepend_content)
							{
								var html = $("html");
								var body = $("body");
								
									prepend_content = prepend_content == undefined ? false : prepend_content;
								
								var debug_panel,
									debug_panel_background,
									debug_panel_content
									;
								
									debug_panel = body.find("div.HS-debugPanel");
									if(debug_panel.length == 0)
									{
										debug_panel = hs_dom.append(body,"<div class='HS-debugPanel'></div>");
									}
									
									
									debug_panel_background = debug_panel.find("div.HS-debugPanel_background");
									if(debug_panel_background.length == 0)
									{
										debug_panel_background = hs_dom.append(debug_panel,"<div class='HS-debugPanel_background'></div>");
									}
									
									debug_panel_html = debug_panel.find("div.HS-debugPanel_html");
									if(debug_panel_html.length == 0)
									{
										debug_panel_html = hs_dom.append(debug_panel,"<div class='HS-debugPanel_html'></div>");
									}	
									
									var current_content = debug_panel_html[0].innerHTML;
									if(prepend_content)
									debug_panel_html[0].innerHTML = current_content +"<HR/>"+ html_content;
									else
									debug_panel_html[0].innerHTML = html_content;
									
									debug_panel.css({width:html.width()/2,height: html.height()});
									//debug_panel.css({position:"absolute",top:0,left:html.width()/2,zIndex:999999999});
									debug_panel.css({position:"absolute",top:0,left:1000,zIndex:999999999});
									
									debug_panel_background.css({opacity:.5});
									debug_panel_background.css({position:"absolute"});
									debug_panel_background.css({width:500,height:500,backgroundColor:"#000000"});
									debug_panel_html.css({position:"absolute"});
									debug_panel_html.css({padding:20});
									debug_panel_html.css({width:500,color:"#ffffff"});
							
									debug_panel_background.css({height:debug_panel_html.height() + (20 * 2)});
							
								//debug_panel
								//hs_mouse.draggable(debug_panel);
							
							}
					
					})();
		
	})(jQuery);


				
	var HSPlugin = 	{
		IMGScrollbar:function(config)	
			{
				config.kernel		= {};
				config.objects		= {};
				config.dom			= {};
				config.kernel.timer = null;

				var cfg_vScroll,cfg_hScroll;
					cfg_vScroll = config.scrollbars.vScroll;
					cfg_hScroll = config.scrollbars.hScroll;
				
				// target related element and attributes
				
				var target,target_parent,target_w,target_h,target_sw,target_sh,target_overflow_w,target_overflow_h;
				(function(config)
					{	
						target 			= config.target;				// div with scroll content element
						target_parent 	= config.target_parent;			// div with scroll content element(container / parent / panel)

						target_w = config.attributes.targetContentW;	// scroll content element [W]
						target_h = config.attributes.targetContentH;	// scroll content element [H]

						target_sw = config.attributes.scrollContentW;	// scroll content element [Full W : scrollWidth	]
						target_sh = config.attributes.scrollContentH;	// scroll content element [Full H : scrollHeight]
						
						target_overflow_w = target_sw - target_w < 0 ? 0 : target_sw - target_w;	// Hidden Content in W when overflow
						target_overflow_h = target_sh - target_h < 0 ? 0 : target_sh - target_h;	// Hidden Content in H when overflow
					
						if(target_w >= target_sw)
						cfg_hScroll.visible = false;
						if(target_h >= target_sh)
						cfg_hScroll.visible = false;
					
						// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
						// target element style setting
						target.css({width:target_w,height:target_h});
						target_parent.css({width:target_w,height:target_h});		// in temp
					
						target.css({border:"0px #ff0000 solid"});
						target_parent.css({border:"0px #ffff00 solid"});
					
					
					})(config);

					// scrollbar and childs elements
					var vScroll,hScroll,vScroll_background,hScroll_background,vScroll_ctls,hScroll_ctls;
					(function(config)	
						{	
							// 01. main panel
							vScroll = hs_dom.append(target_parent,"<div></div>");
							hScroll = hs_dom.append(target_parent,"<div></div>");
							
								if(!cfg_vScroll.visible)
								vScroll.hide();
								if(!cfg_hScroll.visible)
								hScroll.hide();
								
								hs_restrict.disable_drag(vScroll);	
								hs_restrict.disable_drag(hScroll);
							
								// 02. background elements
								vScroll_background = hs_dom.append(vScroll,"<div></div>");
								hScroll_background = hs_dom.append(hScroll,"<div></div>");
								
								// 03. scrollbar controls panel
								vScroll_ctls = hs_dom.append(vScroll,"<div></div>");
								hScroll_ctls = hs_dom.append(hScroll,"<div></div>");
							
						})(config);

					// scrollbar and childs elements style setting and retrieve the attributes
					var vScroll_w,vScroll_h,hScroll_w,hScroll_h;
					(function(config)
						{
							// * 
							vScroll.css({position:"absolute",top:0,			left:target_w+parseInt(config.scrollMargin[0]),	width:cfg_vScroll.width,		height:target_h,			opacity:parseInt(cfg_vScroll.opacity)/100	});
							hScroll.css({position:"absolute",top:target_h+parseInt(config.scrollMargin[1]),	left:0,			width:target_w,					height:cfg_hScroll.height,	opacity:parseInt(cfg_hScroll.opacity)/100	});
							
							// * 
							vScroll_background.css({position:"absolute",top:0,left:0,width:"100%",height:"100%"});
							hScroll_background.css({position:"absolute",top:0,left:0,width:"100%",height:"100%"});
							
							vScroll_ctls.css({position:"absolute",width:"100%",height:"100%"});
							hScroll_ctls.css({position:"absolute",width:"100%",height:"100%"});
								
							// retrive the attributes
							vScroll_w = vScroll.width();
							vScroll_h = vScroll.height();
							
							hScroll_w = hScroll.width();
							hScroll_h = hScroll.height();
							
							// <<<!reset the target_parent's width and height!>>>
							target_parent.css({	width:target_w+vScroll_w + parseInt(config.scrollMargin[0]),	height:target_h+hScroll_h + parseInt(config.scrollMargin[1])	});
							
						})(config);
					
					// create elements in controls panel
					var v_bw_p,v_bw,v_fw_p,v_fw,v_tk_p,v_tk,v_ul_tk,v_dl_tk,v_sd_p,v_sd,
						h_bw_p,h_bw,h_fw_p,h_fw,h_tk_p,h_tk,h_ul_tk,h_dl_tk,h_sd_p,h_sd;
					(function(config)
						{
							v_bw_p = hs_dom.append(vScroll_ctls,"<div></div>");
							v_tk_p = hs_dom.append(vScroll_ctls,"<div></div>");
							v_fw_p = hs_dom.append(vScroll_ctls,"<div></div>");
								
								v_bw = hs_dom.append(v_bw_p,"<div></div>");
								v_fw = hs_dom.append(v_fw_p,"<div></div>");
								v_tk = hs_dom.append(v_tk_p,"<div></div>");
								
									v_ul_tk = hs_dom.append(v_tk,"<div></div>");
									v_dl_tk = hs_dom.append(v_tk,"<div></div>");
								
									v_sd_p 	= hs_dom.append(v_tk,"<div></div>");
									v_sd 	= hs_dom.append(v_sd_p,"<div></div>");
							
							h_bw_p = hs_dom.append(hScroll_ctls,"<div></div>");
							h_tk_p = hs_dom.append(hScroll_ctls,"<div></div>");
							h_fw_p = hs_dom.append(hScroll_ctls,"<div></div>");
								
								h_bw = hs_dom.append(h_bw_p,"<div></div>");
								h_fw = hs_dom.append(h_fw_p,"<div></div>");
								h_tk = hs_dom.append(h_tk_p,"<div></div>");
								
									h_ul_tk = hs_dom.append(h_tk,"<div></div>");
									h_dl_tk = hs_dom.append(h_tk,"<div></div>");
								
									h_sd_p 	= hs_dom.append(h_tk,"<div></div>");
									h_sd 	= hs_dom.append(h_sd_p,"<div></div>");
						})(config);
					
					// controls elements style setting & retrive attributes
					var v_bw_p_w,v_bw_p_h,v_bw_w,v_bw_h,v_fw_p_w,v_fw_p_h,v_fw_w,v_fw_h,v_tk_p_w,v_tk_p_h,v_tk_w,v_tk_h,v_ul_tk_w,v_ul_tk_h,v_dl_tk_w,v_dl_tk_h,v_sd_p_w,v_sd_p_h,v_sd_w,v_sd_h,
						h_bw_p_w,h_bw_p_h,h_bw_w,h_bw_h,h_fw_p_w,h_fw_p_h,h_fw_w,h_fw_h,h_tk_p_w,h_tk_p_h,h_tk_w,h_tk_h,h_ul_tk_w,h_ul_tk_h,h_dl_tk_w,h_dl_tk_h,h_sd_p_w,h_sd_p_h,h_sd_w,h_sd_h,
						v_movable_h,h_movable_w;
					var v_bw_C,v_fw_C,h_bw_C,h_fw_C;
					(function(config)
						{
							// >> first level setting
							v_bw_p.parent().css({clear:"both",overflow:"hidden"});
							v_bw_p.css({position:"relative",top:0,left:0,float:"left"});
							v_fw_p.css({position:"relative",top:0,left:0,float:"left"});
							v_tk_p.css({position:"relative",top:0,left:0,float:"left",overflow:"hidden"});

							h_bw_p.parent().css({clear:"both",overflow:"hidden"});
							h_bw_p.css({position:"relative",top:0,left:0,float:"left"});
							h_fw_p.css({position:"relative",top:0,left:0,float:"left"});
							h_tk_p.css({position:"relative",top:0,left:0,float:"left",overflow:"hidden"});
							
								v_bw.css({position:"absolute",top:0,left:0});
								v_fw.css({position:"absolute",top:0,left:0});
								v_tk.css({position:"absolute",top:0,left:0});
								
									v_ul_tk.css({position:"absolute",top:0,left:0});
									v_dl_tk.css({position:"absolute",top:0,left:0});
								
									v_sd_p.css({position:"absolute",top:0,left:0});
									v_sd.css({position:"absolute",top:0,left:0});
								
								h_bw.css({position:"absolute",top:0,left:0});
								h_fw.css({position:"absolute",top:0,left:0});
								h_tk.css({position:"absolute",top:0,left:0});
									
									h_ul_tk.css({position:"absolute",top:0,left:0});
									h_dl_tk.css({position:"absolute",top:0,left:0});
									
									h_sd_p.css({position:"absolute",top:0,left:0});
									h_sd.css({position:"absolute",top:0,left:0});
							
							// >>>>>>>>>>>>>>>>>>>>>>>>>>. config start .>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
							var cfg_v_bw_p_w,cfg_v_bw_p_h,
								cfg_v_fw_p_w,cfg_v_fw_p_h,
								cfg_v_tk_p_w,cfg_v_tk_p_h
								;
							
								cfg_v_bw_p_w = config.control_elements_width;
									
							
							
							// >> second level setting		
							v_bw_p.css({width:cfg_vScroll.controls_width[0],height:cfg_vScroll.controls_height[0],opacity:cfg_vScroll.controls_opacity[0]});
							v_tk_p.css({width:cfg_vScroll.controls_width[1],height:cfg_vScroll.controls_height[1],opacity:cfg_vScroll.controls_opacity[1]});
							v_fw_p.css({width:cfg_vScroll.controls_width[2],height:cfg_vScroll.controls_height[2],opacity:cfg_vScroll.controls_opacity[2]});

								
								if(cfg_vScroll.controls_background[0][0])
								{
									v_bw_p.css({backgroundColor:cfg_vScroll.controls_background[0][1]});
								}
								else
								{	
									v_bw_p.css({backgroundImage:"url("+cfg_vScroll.controls_background[0][1]+")"});
								}
								if(cfg_vScroll.controls_background[2][0])
								{
									v_fw_p.css({backgroundColor:cfg_vScroll.controls_background[2][1]});
								}
								else
								{
									v_fw_p.css({backgroundImage:"url("+cfg_vScroll.controls_background[2][1]+")"});
								}
								
								if(cfg_vScroll.controls_background[1][0][0])
								{
									v_tk_p.css({backgroundColor:cfg_vScroll.controls_background[1][0][1]});
								}
								else
								{
									v_tk_p.css({backgroundImage:"url("+cfg_vScroll.controls_background[1][0][1]+")"});
								}
							
								
							
							h_bw_p.css({width:cfg_hScroll.controls_width[0],height:cfg_hScroll.controls_height[0],opacity:cfg_hScroll.controls_opacity[0]});
							h_tk_p.css({width:cfg_hScroll.controls_width[1],height:cfg_hScroll.controls_height[1],opacity:cfg_hScroll.controls_opacity[1]});
							h_fw_p.css({width:cfg_hScroll.controls_width[2],height:cfg_hScroll.controls_height[2],opacity:cfg_hScroll.controls_opacity[2]});
								
								if(cfg_hScroll.controls_background[0][0])
								{
									h_bw_p.css({backgroundColor:cfg_hScroll.controls_background[0][1]});
								}
								else
								{	
									h_bw_p.css({backgroundImage:"url("+cfg_hScroll.controls_background[0][1]+")"});
								}
								if(cfg_hScroll.controls_background[2][0])
								{
									h_fw_p.css({backgroundColor:cfg_hScroll.controls_background[2][1]});
								}
								else
								{
									h_fw_p.css({backgroundImage:"url("+cfg_hScroll.controls_background[2][1]+")"});
								}
								if(cfg_hScroll.controls_background[1][0][0])
								{
									h_tk_p.css({backgroundColor:cfg_hScroll.controls_background[1][0][1]});
								}
								else
								{
									h_tk_p.css({backgroundImage:"url("+cfg_hScroll.controls_background[1][0][1]+")"});
								}
								

								
								v_bw.css({width:"100%",height:"100%",cursor:"pointer"});
								v_fw.css({width:"100%",height:"100%",cursor:"pointer"});
								v_tk.css({width:"100%",height:"100%"});
								
								h_bw.css({width:"100%",height:"100%",cursor:"pointer"});
								h_fw.css({width:"100%",height:"100%",cursor:"pointer"});
								h_tk.css({width:"100%",height:"100%"});
								
								
								hs_restrict.disable_selection(v_bw_p);
								hs_restrict.disable_selection(v_fw_p);
								hs_restrict.disable_selection(h_bw_p);
								hs_restrict.disable_selection(h_fw_p);
								
									v_sd_p.css({cursor:"move"});
									h_sd_p.css({cursor:"move"});
								// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
								
									v_ul_tk.css({width:"100%",height:1,backgroundColor:cfg_vScroll.controls_background[1][2][1][0],opacity:0});
									v_dl_tk.css({width:"100%",height:1,backgroundColor:cfg_vScroll.controls_background[1][2][1][1],opacity:0});
									
									h_ul_tk.css({width:1,height:"100%",backgroundColor:cfg_hScroll.controls_background[1][2][1][0],opacity:0});
									h_dl_tk.css({width:1,height:"100%",backgroundColor:cfg_hScroll.controls_background[1][2][1][1],opacity:0});
									
									v_sd_p.css({width:"100%",height:1});
									v_sd.css({width:"100%",height:"100%"});
										
										if(cfg_vScroll.controls_background[1][1][0])
										{
											v_sd_p.css({backgroundColor:cfg_vScroll.controls_background[1][1][1]});
										}
										else
										{
											v_sd_p.css({backgroundImage:"url("+cfg_vScroll.controls_background[1][1][1]+")"});
										}

									h_sd_p.css({width:1,height:"100%"});
									h_sd.css({width:"100%",height:"100%"});
									
										if(cfg_hScroll.controls_background[1][1][0])
										{
											h_sd_p.css({backgroundColor:cfg_hScroll.controls_background[1][1][1]});
										}
										else
										{
											h_sd_p.css({backgroundImage:"url("+cfg_hScroll.controls_background[1][1][1]+")"});
										}
										
									
										var vSlider_numberW,vSlider_numberH,hSlider_numberW,hSlider_numberH,
											vSlider_numberWType,vSlider_numberHType,hSlider_numberWType,hSlider_numberHType;
										if(cfg_vScroll.controls_slider[0] == "scaled")
										{
											v_sd_p.css({height:v_tk.height() * config.attributes.display_h_rate});
										}
										if(cfg_vScroll.controls_slider[0] == "fixed")
										{
											vSlider_numberH 		= cfg_vScroll.controls_slider[2];
											vSlider_numberHType 	= hs_regExp.valueType(vSlider_numberH);
											
											if(vSlider_numberHType == "%")
											{
												v_sd_p.css({height:v_sd_p.parent().height() * parseInt(vSlider_numberH)/100});
											}
											else if(vSlider_numberHType == "px")
											{
												v_sd_p.css({height:parseInt(vSlider_numberH)});
											}

										}
											vSlider_numberW 		= cfg_vScroll.controls_slider[1];
											vSlider_numberWType 	= hs_regExp.valueType(vSlider_numberW);
											if(vSlider_numberWType == "%")
											{
												v_sd_p.css({width:v_sd_p.parent().width() * parseInt(vSlider_numberW)/100});
											}
											else if(vSlider_numberWType == "px")
											{
												v_sd_p.css({width:parseInt(vSlider_numberW)});
											}

										if(cfg_hScroll.controls_slider[0] == "scaled")
										{
											h_sd_p.css({width:h_tk.width() * config.attributes.display_w_rate});
										}
										if(cfg_hScroll.controls_slider[0] == "fixed")
										{
											hSlider_numberW 		= cfg_hScroll.controls_slider[1];
											hSlider_numberWType 	= hs_regExp.valueType(hSlider_numberW);
											
											if(hSlider_numberType == "%")
											{
												h_sd_p.css({width:h_sd_p.parent().width() * parseInt(hSlider_numberW)/100});
											}
											else if(hSlider_numberType == "px")
											{
												h_sd_p.css({width:parseInt(hSlider_numberW)});
											}

										}
											
											hSlider_numberH 		= cfg_hScroll.controls_slider[2];
											hSlider_numberHType 	= hs_regExp.valueType(hSlider_numberH);
												
												
											if(hSlider_numberHType == "%")
											{
												h_sd_p.css({height:h_sd_p.parent().height() * parseInt(hSlider_numberH)/100});
											}
											else if(hSlider_numberHType == "px")
											{
												h_sd_p.css({height:parseInt(hSlider_numberH)});
											}
								
									
										v_bw_C = hs_dom.append(v_bw,"<div style='float:left;'>"+config.textGroup[0]+"</div>");
										v_fw_C = hs_dom.append(v_fw,"<div style='float:left;'>"+config.textGroup[1]+"</div>");
										h_bw_C = hs_dom.append(h_bw,"<div style='float:left;'>"+config.textGroup[2]+"</div>");
										h_fw_C = hs_dom.append(h_fw,"<div style='float:left;'>"+config.textGroup[3]+"</div>");
										
										v_bw_C.css({color:"#ffffff",fontSize:13,fontWeight:600,fontFamily:"Verdana",border:"0px #ffff00 solid"});
										v_fw_C.css({color:"#ffffff",fontSize:13,fontWeight:600,fontFamily:"Verdana",border:"0px #ffff00 solid"});
										h_bw_C.css({color:"#ffffff",fontSize:13,fontWeight:600,fontFamily:"Verdana",border:"0px #ffff00 solid"});
										h_fw_C.css({color:"#ffffff",fontSize:13,fontWeight:600,fontFamily:"Verdana",border:"0px #ffff00 solid"});
										
										hs_cssStyle.hAlignment(v_bw_C,"center");
										hs_cssStyle.vAlignment(v_bw_C,"middle");
										hs_cssStyle.hAlignment(v_fw_C,"center");
										hs_cssStyle.vAlignment(v_fw_C,"middle");
										
										hs_cssStyle.hAlignment(h_bw_C,"center");
										hs_cssStyle.vAlignment(h_bw_C,"middle");
										hs_cssStyle.hAlignment(h_fw_C,"center");
										hs_cssStyle.vAlignment(h_fw_C,"middle");
									
									hs_cssStyle.hAlignment(v_sd_p,"center");
									hs_cssStyle.vAlignment(h_sd_p,"middle");
									
									hs_cssStyle.vAlignment(v_ul_tk,"top");
									hs_cssStyle.vAlignment(v_dl_tk,"bottom");

									hs_cssStyle.hAlignment(h_ul_tk,"left");
									hs_cssStyle.hAlignment(h_dl_tk,"right");
							
							v_bw_p_w 	= v_bw_p.width();	h_bw_p_w 	= h_bw_p.width();
							v_bw_w 		= v_bw.width();		h_bw_w 		= h_bw.width();
							v_fw_p_w 	= v_fw_p.width();	h_fw_p_w 	= h_fw_p.width();
							v_fw_w 		= v_fw.width();		h_fw_w 		= h_fw.width();
							v_tk_p_w	= v_tk_p.width();	h_tk_p_w 	= h_tk_p.width();
							v_tk_w		= v_tk.width();		h_tk_w 		= h_tk.width();
							v_sd_p_w	= v_sd_p.width();	h_sd_p_w 	= h_sd_p.width();
							v_sd_w		= v_sd.width();		h_sd_w 		= h_sd.width();
							
								v_ul_tk_w	= v_ul_tk.width();	h_ul_tk_w	= h_ul_tk.width();
								v_dl_tk_w	= v_ul_tk.width();	h_dl_tk_w	= h_ul_tk.width();
								
							v_bw_p_h 	= v_bw_p.height();	h_bw_p_h 	= h_bw_p.height();
							v_bw_h 		= v_bw.height();	h_bw_h 		= h_bw.height();
							v_fw_p_h 	= v_fw_p.height();	h_fw_p_h 	= h_fw_p.height();
							v_fw_h 		= v_fw.height();	h_fw_h 		= h_fw.height();
							v_tk_p_h	= v_tk_p.height();	h_tk_p_h 	= h_tk_p.height();
							v_tk_h		= v_tk.height();	h_tk_h 		= h_tk.height();
							v_sd_p_h	= v_sd_p.height();	h_sd_p_h 	= h_sd_p.height();
							v_sd_h		= v_sd.height();	h_sd_h 		= h_sd.height();
							
								v_ul_tk_h	= v_ul_tk.height();	h_ul_tk_h	= h_ul_tk.height();
								v_dl_tk_h	= v_ul_tk.height();	h_dl_tk_h	= h_ul_tk.height();
								
							v_movable_h = [0,v_tk_h - v_sd_p_h];
							h_movable_w = [0,h_tk_w - h_sd_p_w];
							
						})(config);
					
					// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
					// do config
					// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
					(function(config)
						{
							var v_controls_background,
								h_controls_background,
							
								v_controls_display,
								h_controls_display
								;

								if(v_controls_background = cfg_vScroll.background)
								{
									if(!v_controls_background[0])
									{	
										vScroll_background.hide();
									}
									else
									{
										
										if(v_controls_background[1][0])		// use background color
										{
											vScroll_background.css({backgroundColor:v_controls_background[1][1]});
										}
										else
										{
											vScroll_background.css({backgroundImage:"url("+v_controls_background[1][1]+")"});
										}
										
										
										if(v_controls_background[2])
										{
											vScroll_background.css({width:v_controls_background[2][0],height:v_controls_background[2][1],opacity:parseInt(v_controls_background[2][2])/100});
										}
									}
								}
								if(h_controls_background = cfg_hScroll.background)
								{
									if(!h_controls_background[0])
									{
										hScroll_background.hide();
									}
									else
									{
										if(h_controls_background[1][0])		// use background color
										{
											hScroll_background.css({backgroundColor:h_controls_background[1][1]});
										}
										else
										{
											hScroll_background.css({backgroundImage:"url("+h_controls_background[1][1]+")"});
										}
											
										if(h_controls_background[2])
										{
											hScroll_background.css({width:h_controls_background[2][0],height:h_controls_background[2][1],opacity:parseInt(h_controls_background[2][2])/100});
										}
									}
								}
								
								if(v_controls_display = cfg_vScroll.controls_display)
								{
									if(v_controls_display.constructor == Array)
									{
										if(!v_controls_display[0])
										v_bw_p.hide();
										if(!v_controls_display[1])
										v_tk_p.hide();
										if(!v_controls_display[2])
										v_fw_p.hide();
									}
								}
								if(h_controls_display = cfg_hScroll.controls_display)
								{
									if(h_controls_display.constructor == Array)
									{
										if(!h_controls_display[0])
										h_bw_p.hide();
										if(!h_controls_display[1])
										h_tk_p.hide();
										if(!h_controls_display[2])
										h_fw_p.hide();
									}
								}
								
						})(config);
					
					(function(config)
						{
							var vSlider_T = parseInt(v_sd_p.css("top")),	vSlider_T_moveTo,	vSlider_T_area,
								vSlider_L = parseInt(v_sd_p.css("left")),	vSlider_L_moveTo,	vSlider_L_area,
								hSlider_T = parseInt(h_sd_p.css("top")),	hSlider_T_moveTo,	hSlider_T_area,
								hSlider_L = parseInt(h_sd_p.css("left")),	hSlider_L_moveTo,	hSlider_L_area,
								
								target_sL = target.scrollLeft(),
								target_sT = target.scrollTop(),
								
								target_xRate = target_yRate = 0,
								
								mouseXpos_onTrack,mouseYpos_onTrack,
								speed = 5, move = true,
								mousedown_number = 0,
								
								intialization = function()
									{
										target_xRate = target_sL/(target_sw - target_w);
										target_yRate = target_sT/(target_sh - target_h);
										
											target_xRate = isNaN(target_xRate)?0:target_xRate;
											target_yRate = isNaN(target_yRate)?0:target_yRate;
										
										v_sd_p.css({top:(target_yRate * v_movable_h[1])});
										h_sd_p.css({left:(target_xRate * h_movable_w[1])});
										
									},
								synchronizer = function()
										{
											var slider_posL_inRate = parseInt(h_sd_p.css("left")) 	/ h_movable_w[1];
											var slider_posT_inRate = parseInt(v_sd_p.css("top")) 	/ v_movable_h[1];
										
											var scrollPage_x_shouldMove = target_overflow_w * slider_posL_inRate;
											var scrollPage_y_shouldMove = target_overflow_h * slider_posT_inRate;
												
												target.scrollLeft(scrollPage_x_shouldMove);
												target.scrollTop(scrollPage_y_shouldMove);
										},
								trigger_track_resize = function()
										{
											vSlider_T = parseInt(v_sd_p.css("top"));
											hSlider_L = parseInt(h_sd_p.css("left"));
									
											v_ul_tk.css({height:vSlider_T});
											v_dl_tk.css({height:v_tk_h - (vSlider_T + v_sd_p_h)});
											
											h_ul_tk.css({width:hSlider_L});
											h_dl_tk.css({width:h_tk_w - (hSlider_L + h_sd_p_w)});
											
											hs_cssStyle.vAlignment(v_ul_tk,"top");
											hs_cssStyle.vAlignment(v_dl_tk,"bottom");
											
											hs_cssStyle.hAlignment(h_ul_tk,"left");
											hs_cssStyle.hAlignment(h_dl_tk,"right");
										},
								mousedown_la = function()
										{	hs_restrict.disable_selection($("body"));
											$("html").bind("mouseup",function()	{clearInterval(config.kernel.timer);});
										},
								mouseup_la = function()	
										{	hs_restrict.enable_selection($("body"));
											clearInterval(config.kernel.timer);
										},
								do_scroll = function(type,v,h,stopAt,isDrag)
								{
									isDrag = isDrag == undefined ? false :true;
									
									move = true;
									vSlider_T = parseInt(v_sd_p.css("top"));
									hSlider_L = parseInt(h_sd_p.css("left"));
									
									vSlider_T_area = vSlider_T + v_sd_p_h;
									hSlider_L_area = hSlider_L + h_sd_p_w;
									
									if(isDrag)
									{	
										if(type=="y")
										vSlider_T_moveTo = v;
										if(type=="x")
										hSlider_L_moveTo = h;
									}
									else
									{
										vSlider_T_moveTo = vSlider_T + v;
										hSlider_L_moveTo = hSlider_L + h;
									}
									
									vSlider_T_moveTo = vSlider_T_moveTo < 0 ? 0 : (vSlider_T_moveTo > v_movable_h[1] ? v_movable_h[1] : vSlider_T_moveTo);
									hSlider_L_moveTo = hSlider_L_moveTo < 0 ? 0 : (hSlider_L_moveTo > h_movable_w[1] ? h_movable_w[1] : hSlider_L_moveTo);

									if(stopAt)
									{	
										if	(	(vSlider_T<=stopAt) && (vSlider_T_area)>stopAt && (type=="y")	||
												(hSlider_L<=stopAt) && (hSlider_L_area)>stopAt && (type=="x")	
											)
										{
											move = false;
											mouseup_la();
										}
									}
									
									if(move)
									{
										v_sd_p.css({top:	vSlider_T_moveTo});
										h_sd_p.css({left:	hSlider_L_moveTo});
									}

										if((vSlider_T_moveTo == v_movable_h[1]) && (hSlider_L_moveTo == h_movable_w[1]))
										mouseup_la();
										
										trigger_track_resize();
										synchronizer();
										
									return move;
									
								};

							intialization();
							
							v_bw.bind("mousedown dblclick",function(e)
								{	
									mousedown_la();	
									if((e.which == 1) && (e.type != "dblclick"))
									config.kernel.timer = setInterval(function()	{do_scroll("y",speed*(-1),0);},10);
									else if(e.type == "dblclick")
									do_scroll("y",speed*(-1),0);
									
								}).bind("mouseup",function(e)	{mouseup_la();});
							
							v_fw.bind("mousedown dblclick",function(e)
								{	mousedown_la();	
										if(e.type == "dblclick")
										hs_restrict.clear_selection();
									
									if((e.which == 1) && (e.type != "dblclick"))
									config.kernel.timer = setInterval(function()	{do_scroll("y",speed*(1),0);},10);
									else if(e.type == "dblclick")
									do_scroll("y",speed*(1),0);
									
								}).bind("mouseup",function(e)	{mouseup_la();});
							
							h_bw.bind("mousedown dblclick",function(e)
								{	mousedown_la();	
									if((e.which == 1) && (e.type != "dblclick"))
									config.kernel.timer = setInterval(function()	{do_scroll("x",0,speed*(-1));},10);
									else if(e.type == "dblclick")
									do_scroll("x",0,speed*(-1));
									
								}).bind("mouseup",function(e)	{mouseup_la();});
							
							h_fw.bind("mousedown dblclick",function(e)
								{	mousedown_la();		
									if((e.which == 1) && (e.type != "dblclick"))
									config.kernel.timer = setInterval(function()	{do_scroll("x",0,speed*(1));},10);
									else if(e.type == "dblclick")
									do_scroll("x",0,speed*(1));
								
								}).bind("mouseup",function(e)	{mouseup_la();});
							
							// draggable part
							hs_restrict.disable_dblclick_select(v_bw.find("div"));
							hs_restrict.disable_dblclick_select(v_fw.find("div"));
							hs_restrict.disable_dblclick_select(h_bw.find("div"));
							hs_restrict.disable_dblclick_select(h_fw.find("div"));
							
							v_ul_tk.bind("click",function(e){e.stopPropagation();})
							v_dl_tk.bind("click",function(e){e.stopPropagation();})
							h_ul_tk.bind("click",function(e){e.stopPropagation();})
							h_dl_tk.bind("click",function(e){e.stopPropagation();})
							
							//alert(v_movable_h[0] +"-"+ v_movable_h[1]);
							
							hs_mouse.draggable(v_sd_p,
									{	type:"axis-y",
										range:[v_movable_h[0],v_movable_h[1]]
									},
									{	action:function(draggingObject,mx,my)	{	do_scroll("y",my,0,null,true); 	},
										mousedownFunction:function()			{	hs_restrict.disable_selection($("body"));	},
										mouseupFunction:function()				{	hs_restrict.enable_selection($("body"));	}
									}
								);
							hs_mouse.draggable(h_sd_p,
									{	type:"axis-x",
										range:[h_movable_w[0],h_movable_w[1]]
									},
									{	action:function(draggingObject,mx,my)	{	do_scroll("x",0,mx,null,true);	},
										mousedownFunction:function()			{	hs_restrict.disable_selection($("body"));	},
										mouseupFunction:function()				{	hs_restrict.enable_selection($("body"));	}
									}
								);
								
							// click track part
							v_ul_tk.bind("mousedown dblclick",function(e)
								{	
									if(e.which == 1)
									{
									mousedown_la();
									var jThis = $(this);
										jThis.css({opacity:.05});
									
									mouseYpos_onTrack = e.pageY - hs_dom.offset($(this).parent().get(0),"offsetTop");
									config.kernel.timer = setInterval(function(){
											clearInterval(config.kernel.timer);
											move = do_scroll("y",v_sd_p_h*(-1),0,mouseYpos_onTrack);
											
											if(e.type == "dblclick")
											jThis.css({opacity:0});
											
											if((move) && (e.type == "mousedown"))
											{
												config.kernel.timer = setInterval(function(){
													clearInterval(config.kernel.timer);
													move = do_scroll("y",v_sd_p_h*(-1),0,mouseYpos_onTrack);
														config.kernel.timer = setInterval(function(){
															move = do_scroll("y",v_sd_p_h*(-1),0,mouseYpos_onTrack);
															},60);
													},300);
											}
												},1);
									}
								});
								
							v_dl_tk.bind("mousedown dblclick",function(e)
								{	
									if(e.which == 1)
									{
									mousedown_la();
									var jThis = $(this);
										jThis.css({opacity:.05});
									
									mouseYpos_onTrack = e.pageY - hs_dom.offset($(this).parent().get(0),"offsetTop");
									config.kernel.timer = setInterval(function(){
											clearInterval(config.kernel.timer);
											move = do_scroll("y",v_sd_p_h,0,mouseYpos_onTrack);
											
											if(e.type == "dblclick")
											jThis.css({opacity:0});

											if((move) && (e.type == "mousedown"))
											{
												config.kernel.timer = setInterval(function(){
													clearInterval(config.kernel.timer);
													move = do_scroll("y",v_sd_p_h,0,mouseYpos_onTrack);
														config.kernel.timer = setInterval(function(){
															move = do_scroll("y",v_sd_p_h,0,mouseYpos_onTrack);
															},60);
													},300);
											}
											
											
												},1);
									}
								});
							
							h_ul_tk.bind("mousedown dblclick",function(e)
								{	
									if(e.which == 1)
									{
									mousedown_la();
									var jThis = $(this);
										jThis.css({opacity:.05});
									
									mouseXpos_onTrack = e.pageX - hs_dom.offset($(this).parent().get(0),"offsetLeft");
									config.kernel.timer = setInterval(function(){
											clearInterval(config.kernel.timer);
											move = do_scroll("x",0,h_sd_p_w*(-1),mouseXpos_onTrack);
											
											jThis.css({opacity:0});
											
											if((move) && (e.type == "mousedown"))
											{
												config.kernel.timer = setInterval(function(){
													clearInterval(config.kernel.timer);
													move = do_scroll("x",0,h_sd_p_w*(-1),mouseXpos_onTrack);
														config.kernel.timer = setInterval(function(){
															move = do_scroll("x",0,h_sd_p_w*(-1),mouseXpos_onTrack);
															},60);
													},300);
												
											}
											
									
												},1);
									}
								});
							
							h_dl_tk.bind("mousedown dblclick",function(e)
								{	
									if(e.which == 1)
									{
									mousedown_la();
									var jThis = $(this);
										jThis.css({opacity:.05});
									
									mouseXpos_onTrack = e.pageX - hs_dom.offset($(this).parent().get(0),"offsetLeft");
									config.kernel.timer = setInterval(function(){
											clearInterval(config.kernel.timer);
											move = do_scroll("x",0,h_sd_p_w,mouseXpos_onTrack);
											
											jThis.css({opacity:0});
											
											if((move) && (e.type == "mousedown"))
											{
												config.kernel.timer = setInterval(function(){
													clearInterval(config.kernel.timer);
													move = do_scroll("x",0,h_sd_p_w,mouseXpos_onTrack);
														config.kernel.timer = setInterval(function(){
															move = do_scroll("x",0,h_sd_p_w,mouseXpos_onTrack);
															},60);
													},300);
											}
												},1);
									}
								});
								
							v_ul_tk.bind("mouseup mouseout mouseleave",function(e){mouseup_la();$(this).css({opacity:0});});
							v_dl_tk.bind("mouseup mouseout mouseleave",function(e){mouseup_la();$(this).css({opacity:0});});
							h_ul_tk.bind("mouseup mouseout mouseleave",function(e){mouseup_la();$(this).css({opacity:0});});
							h_dl_tk.bind("mouseup mouseout mouseleave",function(e){mouseup_la();$(this).css({opacity:0});});
								
							trigger_track_resize();
							
							target.bind("mousedown",function(e)	
								{
									if(e.which == 2)
									{
										e.preventDefault();
										return false;
									}
								});
							target.bind("click",function(e)
								{
									if(e.which == 2)
									{
										e.preventDefault();
										return false;
									}
								});
								
							// another part of mouse wheel
							var wheel_step = 12;
							target.mousewheel(function(e, delta) {
										if (delta > 0)
										do_scroll("y",wheel_step * (-1),0);
										else if (delta < 0)
										do_scroll("y",wheel_step,0);
										
										e.stopPropagation();
										e.preventDefault();
									});
						})(config);
																
															
						}	
					};
					
		HSPlugin.LightBox = function(config)
			{
				var THIS = this;
				
				config.kernel		= {};
				config.objects		= {};
				config.attributes 	= {};
				config.functions	= {};
				
				config.kernel.timer = null;
					
					
					config.kernel.html = $("html");
					config.kernel.body = $("body");
					
					config.kernel.clientWidth = config.kernel.html[0].clientWidth;
					config.kernel.clientHeight = config.kernel.html[0].clientHeight;
					
					//config.kernel = THIS.extend(config.kernel,{clientWidth:config.kernel.html.get(0).clientWidth,clientHeight:config.kernel.html.get(0).clientHeight});
					
					config.external.origin.stage.css({position:"absolute",top:0,left:0});
					config.external.origin.stage.css({zIndex:99999});
					
					config.kernel.minSize = [100,100];
					config.kernel.maxSize = [null,null];
					//config.kernel = THIS.extend(config.kernel,{minSize:[100,100],maxSize:[null,null]});
					
					config.functions.extract_number = function(n,ref)
						{	n = !n?0:n;
							r = !ref?0:ref;
								
							if(hs_regExp.valueType(n) == "%")
							return parseInt(r)*(parseInt(n)/100);
							else if(hs_regExp.valueType(n) == "px")
							return parseInt(n);
						}
					
					config.kernel.margin 	= !config.external.configVolumn.margin?0:config.external.configVolumn.margin;
					config.kernel.minSize 	= !config.external.configVolumn.minSize?[100,100]:config.external.configVolumn.minSize;
					config.kernel.maxSize 	= !config.external.configVolumn.maxSize?[config.kernel.clientWidth-config.kernel.margin*2,config.kernel.clientHeight-config.kernel.margin*2]:config.external.configVolumn.maxSize;
					config.kernel.resizable = !config.external.configVolumn.resizable?true:config.external.configVolumn.resizable;
					config.kernel.scalable 	= !config.external.configVolumn.scalable?true:config.external.configVolumn.scalable;
					config.kernel.scrollbar = !config.external.configVolumn.scrollbar?["yes","yes"]:config.external.configVolumn.scrollbar;
					config.kernel.inWindow 	= !config.external.configVolumn.inWindow?["yes","yes"]:config.external.configVolumn.inWindow;
					
					config.attributes.client_width 	= config.kernel.clientWidth;
					config.attributes.client_height = config.kernel.clientHeight;
					
						if(config.external.short_config.length==2)
						config.kernel.maxSize[0] = config.external.short_config[1];
						if(config.external.short_config.length==3)
						config.kernel.maxSize = [config.external.short_config[1],config.external.short_config[2]];
						
					config.kernel.minSize = [config.functions.extract_number(config.kernel.minSize[0],config.kernel.clientWidth),config.functions.extract_number(config.kernel.minSize[1],config.kernel.clientHeight)];
					config.kernel.maxSize = [config.functions.extract_number(config.kernel.maxSize[0],config.kernel.clientWidth),config.functions.extract_number(config.kernel.maxSize[1],config.kernel.clientHeight)];
					
					config.functions.object_width = function(n)
						{
							n = !n?config.attributes.client_width:n;
							if(n<=config.kernel.minSize[0] + config.kernel.margin*2)
							n = config.kernel.minSize[0] + config.kernel.margin*2;
							else if(n>=config.kernel.maxSize[0] + config.kernel.margin*2)
							n = config.kernel.maxSize[0] + config.kernel.margin*2;
							return n;
						}
					
					config.functions.object_height = function(n)
						{
							n = !n?config.attributes.client_height:n;
							if(n<=config.kernel.minSize[1] + config.kernel.margin*2)
							n = config.kernel.minSize[1] + config.kernel.margin*2;
							else if(n>=config.kernel.maxSize[1] + config.kernel.margin*2)
							n = config.kernel.maxSize[1] + config.kernel.margin*2;
							return n;
						}
					
					config.functions.animation_watcher = function()
						{
							//$("div#debug").css({zIndex:99999999,color:"#555555",fontSize:100});
							//$("div#debug").get(0).innerHTML = config.objects.ground_level.css("opacity");
							
							
							config.objects.ground_level.css({opacity:.5});
							
							config.attributes.child_width	= config.objects.child_level.find(config.external.short_config[0]).width();
							config.attributes.child_height	= config.objects.child_level.find(config.external.short_config[0]).height();
						
							config.attributes.client_width 	= config.kernel.html.get(0).clientWidth;
							config.attributes.client_height = config.kernel.html.get(0).clientHeight;
							
							config.attributes.scroll_top	= config.kernel.html.get(0).scrollTop;
							config.attributes.scroll_left	= config.kernel.html.get(0).scrollLeft;
							
							config.attributes.scroll_width 	= config.kernel.html.get(0).scrollWidth;
							config.attributes.scroll_height = config.kernel.html.get(0).scrollHeight;
							
							config.attributes.object_width 	= config.functions.object_width();
							config.attributes.object_height = config.functions.object_height();
							
							config.attributes.object_marginT = hs_cssStyle.vAlignment(config.objects.child_level,"middle",true);
							config.attributes.object_marginT_positive = config.attributes.object_marginT<0?0:config.attributes.object_marginT;
							config.attributes.object_marginL = hs_cssStyle.hAlignment(config.objects.child_level,"center",true);
							config.attributes.object_marginL_positive = config.attributes.object_marginL<0?0:config.attributes.object_marginL;
							
							
							// config.objects.child_level will do alignment base on this container width & height, so this parent_level's w&h should be changed at once
							config.objects.parent_level.css({width:config.attributes.client_width,height:config.attributes.client_height});
							config.objects.parent_level.stop().animate(
									{top:config.attributes.scroll_top,left:config.attributes.scroll_left},
									{duration:500,queue:false});
							
							
							// resize background when your scrollTop or window size is changed
							config.objects.ground_level.stop().animate(
							{	width:config.attributes.client_width+config.attributes.scroll_left,height:config.attributes.client_height+config.attributes.scroll_top},
							{	duration:100,queue:false,complete:function()	
									{$(this).css({width:config.attributes.client_width+config.attributes.scroll_left,height:config.attributes.client_height+config.attributes.scroll_top});}
							});
							
							
							if(config.external.short_config[0] == "img")
							{
			
			if(config.external.configVolumn.resizable)
			{	
				
				if(config.external.configVolumn.scalable)
				{
					if(config.external.configVolumn.inWindow)
					hs_image.imgResize_scale(config.objects.child_level.find(config.external.short_config[0]),config.attributes.object_width - config.kernel.margin*2,config.functions.object_height() - config.kernel.margin*2,{animation:true,scale_mode:"full-scale"});
					else
					hs_image.imgResize_scale(config.objects.child_level.find(config.external.short_config[0]),config.attributes.object_width - config.kernel.margin*2,config.functions.object_height() - config.kernel.margin*2,{animation:true});
				}
				else
				config.objects.child_level.find(config.external.short_config[0]).stop().animate({width:config.attributes.object_width - config.kernel.margin*2,height:config.functions.object_height() - config.kernel.margin*2},{duratin:300,queue:false});
			
				//$("div#debug").get(0).innerHTML += 100 + "<BR/>";
			}
							}
							if(config.external.short_config[0] == "iframe")
							{
			if(config.external.configVolumn.resizable)
			config.objects.child_level.find(config.external.short_config[0]).animate({width:config.attributes.object_width-config.kernel.margin*2,height:config.attributes.object_height-config.kernel.margin*2},{duration:300,queue:false});	
			config.functions.scrollbar_handler(config.objects.child_level.find(config.external.short_config[0]));
							}
							
							config.objects.child_level.stop().animate({
								width:	config.objects.child_level.find(config.external.short_config[0]).width() + config.kernel.margin*2,
								height:	config.objects.child_level.find(config.external.short_config[0]).height() + config.kernel.margin*2,
								marginTop:	config.attributes.object_marginT_positive,
								marginLeft:	config.attributes.object_marginL_positive},
								{duration:300,queue:false});
							
						};
					
					config.functions.scrollbar_handler = function(iframeObject)
						{
							if(!$.browser.msie)
							{	iframeObject.attr("scrolling","no");
								if((config.external.configVolumn.scrollbar[0] == "yes"))
								iframeObject.css({overflowX:"visible"});
								else
								iframeObject.css({overflowX:"hidden"});
								if((config.external.configVolumn.scrollbar[1] == "yes"))
								iframeObject.css({overflowY:"visible"});
								else
								iframeObject.css({overflowY:"hidden"});
							}	
						};
					
					config.functions.close = function()
						{
							clearInterval(config.kernel.timer);
							config.objects.child_level.stop().animate({opacity:.5},{duration:100,queue:false,complete:function()	{
								config.objects.ground_level.stop().animate({opacity:0},{duration:200,queue:false,complete:function()	{
													config.external.origin.close();}});
												}});
						};
				
					config.functions.background = function()
						{
							config.objects.ground_level = hs_dom.append(config.external.origin.stage,"<div></div>");
							config.objects.ground_level.css({opacity:0,position:"absolute",top:0,left:0});
							config.objects.ground_level.css({width:config.kernel.clientWidth,height:config.kernel.clientHeight});
							
							config.objects.ground_level.css({backgroundColor:"#000000"});
							config.objects.ground_level.stop().animate({opacity:.5},{duration:300,queue:false});
							config.objects.ground_level.bind("click",function()	{config.functions.close();});
								
						};	config.functions.background();
					
					config.functions.init = function()
						{
							var parentLevel;
							
							
							config.objects.parent_level = hs_dom.append(config.external.origin.stage,"<div></div>");
							
							parentLevel = config.objects.parent_level;
							parentLevel.css({width:config.kernel.clientWidth,height:config.kernel.clientHeight});
							parentLevel.css({border:"0px #ff0000 solid"});
							
							parentLevel.css({position:"absolute",top:0,left:0});
							parentLevel.bind("click",function()	{ config.functions.close();	});
							
							config.kernel.completely_loaded = false;
							config.kernel.completely_showed	= false;
							
							var bodyWidth = config.kernel.clientWidth;
							var bodyHeight = config.kernel.clientHeight;
							
							
							if(config.external.short_config[0] == "img" || config.external.loadingType == "img")
							{
								
								hs_image.imgLoaded(config.external.href,function()	{
									config.kernel.completely_loaded = true;
									
									var groupElement 	= config.external.groupElement;
									var groupKey 		= config.domElement.groupKey;
									var itemKey 		= ~~(config.domElement.itemKey);
									var href			= config.external.href;
									
									
									var panel_width,panel_height,
									
										img_default_width,img_default_height,
										img_width,	img_height,
										
										
										img_panel,
										img_panel_background,
										img_panel_holder,
										img_panel_holder_closest,
										img_panel_controls,
										
										img,
										
										
										img_large_panel,
										img_large_panel_holder,
										img_large_panel_holder_closest,
										img_large
										
										
										;
									
										panel_width 	= 800;
										panel_height 	= 500;
									
										img_default_width 	= 800;
										img_default_height 	= 500;
									
									
									img_panel = hs_dom.append(parentLevel,"<div></div>");
										img_panel_background = hs_dom.append(img_panel,"<div></div>");
										img_panel_holder		= hs_dom.append(img_panel,"<div><div class='HS_lightBox_IMGPanel_holder_closest'><img src='"+href+"' border='0'/></div></div>");
										img_panel_holder_closest = img_panel_holder.find("div.HS_lightBox_IMGPanel_holder_closest");
										
										img_panel_controls	= hs_dom.append(img_panel_holder,"<div><input class='hs_lightBox_prev' type='button' value='<' style='padding:3px;margin:3px;'/><input class='hs_lightBox_next' type='button' value='>' style='padding:3px;margin:3px;'/></div>");
										
										img = img_panel_holder_closest.find("img");
										
										
									img_large_panel = hs_dom.append(parentLevel,"<div></div>");
										img_large_panel_holder = hs_dom.append(img_large_panel,"<div><div class='HS_lightBox_IMGPanel_holder_closest'><img src='"+href+"' border='0'/></div></div>");
										img_large_panel_holder_closest = img_large_panel_holder.find("div.HS_lightBox_IMGPanel_holder_closest");
									
										img_large = img_large_panel_holder_closest.find("img");
										
										img_large_panel.css({position:"absolute",top:0,left:0});
										img_large_panel.css({marginLeft:"auto",marginRight:"auto"});
										img_large_panel.css({width:"100%",height:"100%"});
										img_large_panel.css({textAlign:"center"});
										img_large_panel.css({border:"1px #ff0000 solid"});
										img_large_panel.css({display:"none"});
										
											img_large_panel_holder.css({position:"relative"});
											img_large_panel_holder.css({margin:10});
									
											config.objects.child_level = img_panel;
											img.css({width:500});
										
											// real img width & height
											img_width 	= img.width();
											img_height 	= img.height();
											
											img_panel_holder_closest.css({border:"0px #ff0000 solid"});
											img_panel_holder_closest.css({width:img_width,height:img_height});
										
										img_panel.css({position:"relative"});
										img_panel.css({marginTop:10,marginLeft:"auto",marginRight:"auto"});
										img_panel.css({width:panel_width,height:panel_height});
										// background 
											img_panel_background.css({opacity:.7});
											img_panel_background.css({position:"absolute",top:0,left:0});
											img_panel_background.css({width:"100%",height:"100%"});
											img_panel_background.css({backgroundColor:"#ffffff"});
										
										// img holder
											img_panel_holder.css({zIndex:999});
											img_panel_holder.css({opacity:1});
											img_panel_holder.css({marginTop:10});
											img_panel_holder.css({border:"3px #ff0000 solid"});
											img_panel_holder.css({width:"100%",height:"100%"});
											img_panel_holder.css({position:"absolute",top:0,left:0});
											img_panel_holder.css({textAlign:"center"});
											
												
												/*
												img_panel_controls.css({width:"100%",height:100});
												img_panel_controls.css({opacity:1});
												img_panel_controls.css({border:"5px #fff0000 solid"});
												*/
											
										
										img.css({cursor:"pointer"});
										
										
										var goPrev,goNext,controls_generate;
										
										
										//alert(img_panel_controls.find("input"));
										goPrev = function(k)
											{
												if(groupElement[groupKey][k] != undefined)
												{
													img.attr("src",groupElement[groupKey][k][2]);
													itemKey = k;
													controls_generate();
												}
											};
											
										goNext = function(k)
											{
												if(groupElement[groupKey][k] != undefined)
												{
													img.attr("src",groupElement[groupKey][k][2]);
													img_large.attr("src",groupElement[groupKey][k][2]);
													itemKey = k;
													controls_generate();
												}
											};
										
										controls_generate = function()
											{
												if(itemKey == 0)
												img_panel_controls.find("input.hs_lightBox_prev").attr("disabled",true);
												else
												{	img_panel_controls.find("input.hs_lightBox_prev").removeAttr("disabled");
													img_panel_controls.find("input.hs_lightBox_prev").bind("click",function(e)	{
														e.stopPropagation();
															
															goPrev(itemKey-1);
														
														});
												}
												if(itemKey == groupElement[groupKey].length-1)
												img_panel_controls.find("input.hs_lightBox_next").attr("disabled",true);
												else
												{	img_panel_controls.find("input.hs_lightBox_next").removeAttr("disabled");
													img_panel_controls.find("input.hs_lightBox_next").bind("click",function(e) 	{
													e.stopPropagation();
													
														goNext(itemKey+1);
														
													});
												}
											};
										
										controls_generate();
										
										
										
										
										
										
										img.bind("click",function(e) 		{ 
											e.stopPropagation(); 
													img_panel.hide();
													img_large_panel.show();	});
										
										img_large.css({cursor:"pointer"});
										img_large.bind("click",function(e)	{ 
													e.stopPropagation(); 
													img_panel.show();
													img_large_panel.hide();	});
										
										img_panel.css({opacity:0});
										img_panel.stop().animate({opacity:1},{duration:300,queue:false,complete:function()	{config.kernel.completely_showed=true;}});
										
										img_large_panel.css({border:"0px #ffff00 solid"});
										img_large_panel_holder.css({border:"0px #ffff00 solid"});
										img_large_panel.bind("click",function(e)	{
											e.stopPropagation();
											config.functions.close();});
										img_panel.bind("click",function(e)			{
											e.stopPropagation();
											config.functions.close();});
										
										hs_restrict.disable_drag(img_large_panel);
										hs_restrict.disable_drag(img_panel);
								});
							}
							
							if(config.external.short_config[0] == "iframe")
							{
								hs_dom.iframeLoaded(config.external.href,function()	{	
									config.kernel.completely_loaded = true;
									
									config.objects.child_level 		= 	hs_dom.append(parentLevel,"<div><iframe scrolling='auto' frameborder='0' src='"+config.external.href+"' width=300></iframe></div>");
									
									//config.objects.child_level.css({border:"2px #ffff00 solid"});
									config.objects.child_level.css({opacity:1,position:"absolute",top:0,left:0});
									config.objects.child_level.stop().animate({opacity:1},{duration:300,queue:false,complete:function()	{config.kernel.completely_showed=true;}});
									
									config.objects.child_level.find(config.external.short_config[0]).css({width:config.functions.object_width() - config.kernel.margin*2,height:config.functions.object_height() - config.kernel.margin*2});
									
									//config.objects.child_level.css({border:"1px #ffffff solid"});
								// Here : only support for firefox
									// >
									config.functions.scrollbar_handler(config.objects.child_level.find(config.external.short_config[0]));
									// <
									
									THIS.divHoldobj(config.objects.child_level.find(config.external.short_config[0]),config.kernel.margin);
									
									hs_cssStyle.vAlignment(config.objects.child_level,"middle");
									hs_cssStyle.hAlignment(config.objects.child_level,"center");
									
									hs_cssStyle.vAlignment(config.objects.child_level.find(config.external.short_config[0]),"middle");
									hs_cssStyle.hAlignment(config.objects.child_level.find(config.external.short_config[0]),"center");
																			});
							}
						};config.functions.init();
						
						config.functions.timer = function()
							{
								//alert(config.kernel.completely_showed);
								
								if(config.kernel.completely_showed)
								{	
									clearInterval(config.kernel.timer);
									config.kernel.timer = setInterval(function() {config.functions.animation_watcher();},"100");
								}
							};	//config.kernel.timer = setInterval(function()	{config.functions.timer();},"100");
						
						
					
							};

	
	var HSFunction = {

		extend:function(object1,object2)	{
			var tmp_object = {};
			for(keys in object1)
			{
				eval("tmp_object."+keys+" = object1[keys]");
			}
			for(keys in object2)
			{
				eval("tmp_object."+keys+" = object2[keys]");
			}
			return tmp_object;
			
							},
		
		
		divHoldimg:function(JqueryImgObject,margin)	{
			
			margin = !margin?0:parseInt(margin);
			if(JqueryImgObject.parent().attr("nodeName")=="DIV")
				{
					JqueryImgObject.css({position:"absolute",top:0,left:0});
					
					JqueryImgObject.parent().css({position:"absolute",width:JqueryImgObject.width()+margin*2,height:JqueryImgObject.height()+margin*2});
					//JqueryImgObject.parent().css({top:parseInt(JqueryImgObject.css("top"))-margin,left:parseInt(JqueryImgObject.css("left"))-margin});
				}
												},
		divHoldobj:function(JqueryObject,margin)	{
			
			margin = !margin?0:parseInt(margin);
				
			if(JqueryObject.parent().attr("nodeName")=="DIV")
				{
					JqueryObject.css({position:"absolute",top:0,left:0});
					JqueryObject.parent().css({position:"absolute",width:JqueryObject.width()+margin*2,height:JqueryObject.height()+margin*2});
					
				}
												},
		
		el_positionArrangement:function(JqueryObject,method)	{
					var object = JqueryObject;
					var objectParent = JqueryObject.parent();
					
					var objectParent_w = objectParent.width();
					var objectParent_h = objectParent.height();
					
					var elementPos = {x:0,y:0};	// init xpos as the elements start xpos & ypos
					var elementOffset = {left:0,top:0};
					
					// default setting
					var elements_space = 5;
					
					var THIS = this;
						
					
						
						object.each(function(k,v)	{
								// make the space first, then this will affect all panel
								elementPos.x += elements_space;
								elementPos.y = elements_space;
								$(this).css("left",elementPos.x);						
								$(this).css("top",elementPos.y);						
								
								//here will reset the left & top pos if the element is overflow
								if(THIS.element_isOverflow(objectParent,$(this)))
								{
									$(this).css("top",elementPos.y + 50);
								}
								
								elementPos.x += parseInt($(this).width());
								
													});
					
																},
		
		// only for checking overflow to right side
		element_isOverflow:function(JqueryParentObject,JqueryChildObject)	{
			var parentWidth = JqueryParentObject.width();
			var childWidth = JqueryChildObject.width();

			// default
			var overflow_innerMargin = {t:5,r:5,b:5,l:5};
			var if_overflow = false;
			
			var THIS = this;
			// c = child
			var c_offset = {left:hs_dom.offset(JqueryChildObject.get(0),"offsetLeft"),top:hs_dom.offset(JqueryChildObject.get(0),"offsetTop")};
				
				if_overflow = ((c_offset.left + childWidth) + overflow_innerMargin.l) > parentWidth ? true : false;
				
				return if_overflow;
										},
		
		followMouse:function(mouseoverObject,tipsPanel_showingPanel,followMouseObject,config)	{
			
			var THIS = this;
			var original_left 	= config.originalLeft;
			var original_top	= config.originalTop;
				
			var mousedown_xDistance = 0;
			var mousedown_yDistance = 0;		
				
						try	{
							if(isNaN(config.xPadding))
							config.xPadding = 15;
							if(isNaN(config.yPadding))
							config.yPadding = 15;
						} catch(ex)
							{	
								config.xPadding = 15;
								config.yPadding = 15;
							}
				
				var able_to_move = true;
				
				var hideObject = function(object)
					{
						if(tipsPanel_showingPanel.children().length == 0)
						object.css({left:original_left,top:original_top});
					}
						
						var contentObjectPanel;
						mouseoverObject.bind("mouseenter",function(e)	{
							tipsPanel_showingPanel.css({width:followMouseObject.width(),height:followMouseObject.height()});
									
									contentObjectPanel 	= hs_dom.append(tipsPanel_showingPanel,"<div></div>");
									followMouseObject	= THIS.cloneElement(followMouseObject,contentObjectPanel,false);	// will not remove original object as "false"
									followMouseObject.css({display:"block"});

									
									if(config.animation)
									{	if(config.animationType == "default")
										{
											contentObjectPanel.css({position:"absolute",opacity:0});
											contentObjectPanel.stop().animate({opacity:1},{duration:config.animationDuration,queue:false});
										}
									}
									
											mousedown_xDistance = parseInt(e.pageX) + config.xPadding;
											mousedown_yDistance = parseInt(e.pageY) + config.yPadding;
											if(able_to_move)
											tipsPanel_showingPanel.css({left:mousedown_xDistance,top:mousedown_yDistance});
									
									$(this).bind("mousemove",function(e){
											mousedown_xDistance = parseInt(e.pageX) + config.xPadding;
											mousedown_yDistance = parseInt(e.pageY) + config.yPadding;
											
											if(able_to_move)
											tipsPanel_showingPanel.css({left:mousedown_xDistance,top:mousedown_yDistance});	
												})

													});
													
							mouseoverObject.bind("mouseleave",function(e)
													{
														$(this).unbind("mousemove");
										
								if(config.animation)
								{
									if(config.animationType == "default")
									tipsPanel_showingPanel.children().stop().animate({opacity:0},{duration:config.animationDuration,queue:false,complete:function()	{
										$(this).remove();
										hideObject(tipsPanel_showingPanel);
															}});
								}
								else
								{
									tipsPanel_showingPanel.children().remove();
								}
																		
																		
																		});
							
												},
		
		
		swapImage:function(imagePanelObject,oldsrc,newsrc,config)
			{
				var THIS = this;
				if(!config.animation)
				{
					var showingImageObject = hs_dom.prepend(imagePanelObject,"<img src='"+newsrc+"'/>");
						showingImageObject.css({position:"absolute",left:0,top:0});
						showingImageObject.css({width:imagePanelObject.width()});
						
						hs_image.imgResize_scale(showingImageObject,imagePanelObject.width(),imagePanelObject.height());
						hs_cssStyle.hAlignment(showingImageObject,"center");
						
						if(oldsrc != null)	
						{
							imagePanelObject.children().last().remove();
						}
				}
				else
				{	
					if(config.animationType == "default")
					{
						if(oldsrc != null)	
						{
							var oldImageObject = imagePanelObject.children().first();
								oldImageObject.stop().animate({opacity:0},{duration:config.animationDuration,queue:false,complete:function(){oldImageObject.remove();}});
						}
						
						var image = new Image();
						image.src=newsrc;
									var showingImageObject;
									
									hs_image.imgLoaded(image,function()	{
										showingImageObject = hs_dom.prepend(imagePanelObject,"<img src='"+newsrc+"'/>");
											showingImageObject.css({position:"absolute",left:0,top:0,opacity:0});

											hs_image.imgResize_scale(showingImageObject,imagePanelObject.width(),imagePanelObject.height());
											hs_cssStyle.hAlignment(showingImageObject,"center");
										
											showingImageObject.stop().animate({opacity:1},{duration:config.animationDuration,queue:false});
									
									});
							
					}
					
				}
			
			},
		bodyCenter:function(JqueryObject)
			{
				if(JqueryObject.parent().attr("nodeName")=="BODY")
					{
						/*
							Default reference :
							//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
							div.centering-wrapper {display:table;position:relative;width:100%;height:100%;}
							div.centering-wrapper div.centering-wrapper-child 	{
								text-align:center;position:relative;+position: static !important;vertical-align:middle;display:table-cell;
																				}
							div.centering-wrapper div.centering-wrapper-child div.centering-content-container	{
									position:relative;	float:left;	top:50%;	left:50%;+position: static !important;+float: center !important;
											}		
							div.centering-wrapper div.centering-wrapper-child div.centering-content-container div.centering-content-panel	{
									position:relative;	top:-50%;	left:-50%;+position: static !important;
											}
							//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
						
							IE8 / firefox css code : 
							div.HS-PHV-center-outer		{	display:table; position:relative; width:100%;height:100%; }
							div.HS-PHV-center-middle 	{	text-align:center; vertical-align:middle;	
															text-align:-moz-center;
															display:table-cell;	
														}

							div.HS-PHV-center-inner			{ display: inline-block; height:100%; 	}		
							div.HS-PHV-center-innerinner	{  	}
						
							// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
							IE7- css code : 
							div.HS-PHV-center-outer			{	height: 100%; width:100%;  	text-align:center;}
							div.HS-PHV-center-middle		{	height: 100%; width:960px; 	text-align:left; position: relative;	 }
							div.HS-PHV-center-inner			{	position: absolute; top: 50%; height:732px;				}	
							div.HS-PHV-center-innerinner	{ 	position: absolute; top: -50%;  	}
							// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
							Safari css code :
							div.HS-PHV-center-outer			{	height: 100%; width:100%;  	text-align:center;}
							div.HS-PHV-center-middle		{	height: 100%; width:960px; 	text-align:left; position: relative;	 }
							div.HS-PHV-center-inner			{	position: absolute; top: 50%; height:732px;				}	
							div.HS-PHV-center-innerinner	{ 	position: absolute; top: -50%;  	}
							
						*/
						
						var outerPanel 		= hs_dom.prepend(JqueryObject.parent(),"<div class='HS-PHV-center-outer'></div>");
						var middlePanel 	= hs_dom.prepend(JqueryObject.parent(),"<div class='HS-PHV-center-middle'></div>");
						var innerPanel 		= hs_dom.prepend(JqueryObject.parent(),"<div class='HS-PHV-center-inner'></div>");
						var innerinnerPanel = hs_dom.prepend(JqueryObject.parent(),"<div class='HS-PHV-center-innerinner'></div>");
							
							
							
							if($.browser.msie && parseInt($.browser.version)<=7)
							{
								
								// avoid the missing in css
								$("html").css({margin:0,padding:0,width:"100%",height:"100%"});
								$("body").css({margin:0,padding:0,width:"100%",height:"100%"});
								//$("html").css({border:"5px #000000 solid"});
								//$("body").css({border:"8px #898989 solid"});
								
								$("html").css({verticalAlign:"middle"});
								$("body").css({verticalAlign:"middle"});
								
							
								var PanelWidth  = JqueryObject.width();
								var PanelHeight = JqueryObject.height();
								
								JqueryObject 	= HSFunction.cloneElement(JqueryObject,innerinnerPanel);
								
								JqueryObject.css({textAlign:"left"});
								//JqueryObject.css({border:"12px #ff0000 solid"});
								
								innerinnerPanel 	= HSFunction.cloneElement(innerinnerPanel,innerPanel);
									//innerinnerPanel.css({border:"3px #bcbd67 solid"});
									innerinnerPanel.css({position:"relative",top: "-50%",left:"-50%"});
								innerPanel 			= HSFunction.cloneElement(innerPanel,middlePanel);
									innerPanel.css({position:"absolute",top:"50%",left:"50%"});
									//innerPanel.css({border:"8px #252825 solid"});
								middlePanel 		= HSFunction.cloneElement(middlePanel,outerPanel);
									
									middlePanel.css({overflow:"hidden",position:"relative"});
									//middlePanel.css({border:"3px #00ff00 solid"});
									//outerPanel.css({border:"3px #0000ff solid"});
							}
							else if(BrowserDetect.browser == "Safari")
							{
								$("html").css({margin:0,padding:0,width:"100%",height:"100%"});
								$("body").css({margin:0,padding:0,width:"100%",height:"100%"});
								
								JqueryObject 	= HSFunction.cloneElement(JqueryObject,innerinnerPanel);
								
								innerinnerPanel = HSFunction.cloneElement(innerinnerPanel,innerPanel);
									innerinnerPanel.css({position:"relative",top: "-50%",left:"-50%"});
								innerPanel 			= HSFunction.cloneElement(innerPanel,middlePanel);
									innerPanel.css({position:"relative",float:"left",top:"50%",left:"50%"});
									
								middlePanel 		= HSFunction.cloneElement(middlePanel,outerPanel);
									middlePanel.css({verticalAlign:"middle",display:"table-cell",overflow:"hidden"});
									
								outerPanel.css({display:"table",width:"100%",height:"100%"});
								
							}
							else
							{
								// avoid the missing in css
								$("html").css({margin:0,padding:0,width:"100%",height:"100%"});
								$("body").css({margin:0,padding:0,width:"100%",height:"100%"});
								
								JqueryObject 	= HSFunction.cloneElement(JqueryObject,innerinnerPanel);
								innerinnerPanel 	= HSFunction.cloneElement(innerinnerPanel,innerPanel);
								innerPanel 			= HSFunction.cloneElement(innerPanel,middlePanel);
									innerPanel.css({display:"inline-block",height:"100%"});
								
								middlePanel 		= HSFunction.cloneElement(middlePanel,outerPanel);
									
									middlePanel.css({verticalAlign:"middle",display:"table-cell"});
										if($.browser.msie)
										middlePanel.css({textAlign:"center"});
										else
										middlePanel.css({textAlign:"-moz-center"});
									outerPanel.css({display:"table",position:"relative",width:"100%",height:"100%"});
									
							}
					}
			},
		
		lightbox:function(config)	{
			var THIS = this;
				
				config.kernel		= {};
				config.objects		= {};
				config.attributes 	= {};
				config.functions	= {};
				
				config.kernel.timer = null;
					
					config.kernel.html = $("html");
					config.kernel.body = $("body");
					
					config.kernel.clientWidth = config.kernel.html[0].clientWidth;
					config.kernel.clientHeight = config.kernel.html[0].clientHeight;
					
					//config.kernel = THIS.extend(config.kernel,{clientWidth:config.kernel.html.get(0).clientWidth,clientHeight:config.kernel.html.get(0).clientHeight});
					
					config.external.origin.stage.css({position:"absolute",top:0,left:0});
					config.external.origin.stage.css({zIndex:99999});
					
					config.kernel.minSize = [100,100];
					config.kernel.maxSize = [null,null];
					//config.kernel = THIS.extend(config.kernel,{minSize:[100,100],maxSize:[null,null]});
					
					config.functions.extract_number = function(n,ref)
						{	n = !n?0:n;
							r = !ref?0:ref;
								
							if(hs_regExp.valueType(n) == "%")
							return parseInt(r)*(parseInt(n)/100);
							else if(hs_regExp.valueType(n) == "px")
							return parseInt(n);
						}
					
					config.kernel.margin 	= !config.external.configVolumn.margin?0:config.external.configVolumn.margin;
					config.kernel.minSize 	= !config.external.configVolumn.minSize?[100,100]:config.external.configVolumn.minSize;
					config.kernel.maxSize 	= !config.external.configVolumn.maxSize?[config.kernel.clientWidth-config.kernel.margin*2,config.kernel.clientHeight-config.kernel.margin*2]:config.external.configVolumn.maxSize;
					config.kernel.resizable = !config.external.configVolumn.resizable?true:config.external.configVolumn.resizable;
					config.kernel.scalable 	= !config.external.configVolumn.scalable?true:config.external.configVolumn.scalable;
					config.kernel.scrollbar = !config.external.configVolumn.scrollbar?["yes","yes"]:config.external.configVolumn.scrollbar;
					config.kernel.inWindow 	= !config.external.configVolumn.inWindow?["yes","yes"]:config.external.configVolumn.inWindow;
					
					config.attributes.client_width 	= config.kernel.clientWidth;
					config.attributes.client_height = config.kernel.clientHeight;
					
						if(config.external.short_config.length==2)
						config.kernel.maxSize[0] = config.external.short_config[1];
						if(config.external.short_config.length==3)
						config.kernel.maxSize = [config.external.short_config[1],config.external.short_config[2]];
						
					config.kernel.minSize = [config.functions.extract_number(config.kernel.minSize[0],config.kernel.clientWidth),config.functions.extract_number(config.kernel.minSize[1],config.kernel.clientHeight)];
					config.kernel.maxSize = [config.functions.extract_number(config.kernel.maxSize[0],config.kernel.clientWidth),config.functions.extract_number(config.kernel.maxSize[1],config.kernel.clientHeight)];
					
					config.functions.object_width = function(n)
						{
							n = !n?config.attributes.client_width:n;
							if(n<=config.kernel.minSize[0] + config.kernel.margin*2)
							n = config.kernel.minSize[0] + config.kernel.margin*2;
							else if(n>=config.kernel.maxSize[0] + config.kernel.margin*2)
							n = config.kernel.maxSize[0] + config.kernel.margin*2;
							return n;
						}
					
					config.functions.object_height = function(n)
						{
							n = !n?config.attributes.client_height:n;
							if(n<=config.kernel.minSize[1] + config.kernel.margin*2)
							n = config.kernel.minSize[1] + config.kernel.margin*2;
							else if(n>=config.kernel.maxSize[1] + config.kernel.margin*2)
							n = config.kernel.maxSize[1] + config.kernel.margin*2;
							return n;
						}
					
					config.functions.animation_watcher = function()
						{
							//$("div#debug").css({zIndex:99999999,color:"#555555",fontSize:100});
							//$("div#debug").get(0).innerHTML = config.objects.ground_level.css("opacity");
							
							
							config.objects.ground_level.css({opacity:.5});
							
							config.attributes.child_width	= config.objects.child_level.find(config.external.short_config[0]).width();
							config.attributes.child_height	= config.objects.child_level.find(config.external.short_config[0]).height();
						
							config.attributes.client_width 	= config.kernel.html.get(0).clientWidth;
							config.attributes.client_height = config.kernel.html.get(0).clientHeight;
							
							config.attributes.scroll_top	= config.kernel.html.get(0).scrollTop;
							config.attributes.scroll_left	= config.kernel.html.get(0).scrollLeft;
							
							config.attributes.scroll_width 	= config.kernel.html.get(0).scrollWidth;
							config.attributes.scroll_height = config.kernel.html.get(0).scrollHeight;
							
							config.attributes.object_width 	= config.functions.object_width();
							config.attributes.object_height = config.functions.object_height();
							
							config.attributes.object_marginT = hs_cssStyle.vAlignment(config.objects.child_level,"middle",true);
							config.attributes.object_marginT_positive = config.attributes.object_marginT<0?0:config.attributes.object_marginT;
							config.attributes.object_marginL = hs_cssStyle.hAlignment(config.objects.child_level,"center",true);
							config.attributes.object_marginL_positive = config.attributes.object_marginL<0?0:config.attributes.object_marginL;
							
							
							// config.objects.child_level will do alignment base on this container width & height, so this parent_level's w&h should be changed at once
							config.objects.parent_level.css({width:config.attributes.client_width,height:config.attributes.client_height});
							config.objects.parent_level.stop().animate(
									{top:config.attributes.scroll_top,left:config.attributes.scroll_left},
									{duration:500,queue:false});
							
							
							// resize background when your scrollTop or window size is changed
							config.objects.ground_level.stop().animate(
							{	width:config.attributes.client_width+config.attributes.scroll_left,height:config.attributes.client_height+config.attributes.scroll_top},
							{	duration:100,queue:false,complete:function()	
									{$(this).css({width:config.attributes.client_width+config.attributes.scroll_left,height:config.attributes.client_height+config.attributes.scroll_top});}
							});
							
							
							if(config.external.short_config[0] == "img")
							{
			
			if(config.external.configVolumn.resizable)
			{	
				
				if(config.external.configVolumn.scalable)
				{
					if(config.external.configVolumn.inWindow)
					hs_image.imgResize_scale(config.objects.child_level.find(config.external.short_config[0]),config.attributes.object_width - config.kernel.margin*2,config.functions.object_height() - config.kernel.margin*2,{animation:true,scale_mode:"full-scale"});
					else
					hs_image.imgResize_scale(config.objects.child_level.find(config.external.short_config[0]),config.attributes.object_width - config.kernel.margin*2,config.functions.object_height() - config.kernel.margin*2,{animation:true});
				}
				else
				config.objects.child_level.find(config.external.short_config[0]).stop().animate({width:config.attributes.object_width - config.kernel.margin*2,height:config.functions.object_height() - config.kernel.margin*2},{duratin:300,queue:false});
			
				//$("div#debug").get(0).innerHTML += 100 + "<BR/>";
			}
							}
							if(config.external.short_config[0] == "iframe")
							{
			if(config.external.configVolumn.resizable)
			config.objects.child_level.find(config.external.short_config[0]).animate({width:config.attributes.object_width-config.kernel.margin*2,height:config.attributes.object_height-config.kernel.margin*2},{duration:300,queue:false});	
			config.functions.scrollbar_handler(config.objects.child_level.find(config.external.short_config[0]));
							}
							
							config.objects.child_level.stop().animate({
								width:	config.objects.child_level.find(config.external.short_config[0]).width() + config.kernel.margin*2,
								height:	config.objects.child_level.find(config.external.short_config[0]).height() + config.kernel.margin*2,
								marginTop:	config.attributes.object_marginT_positive,
								marginLeft:	config.attributes.object_marginL_positive},
								{duration:300,queue:false});
							
						};
					
					config.functions.scrollbar_handler = function(iframeObject)
						{
							if(!$.browser.msie)
							{	iframeObject.attr("scrolling","no");
								if((config.external.configVolumn.scrollbar[0] == "yes"))
								iframeObject.css({overflowX:"visible"});
								else
								iframeObject.css({overflowX:"hidden"});
								if((config.external.configVolumn.scrollbar[1] == "yes"))
								iframeObject.css({overflowY:"visible"});
								else
								iframeObject.css({overflowY:"hidden"});
							}	
						};
					
					config.functions.close = function()
						{
							clearInterval(config.kernel.timer);
							config.objects.child_level.stop().animate({opacity:.5},{duration:100,queue:false,complete:function()	{
								config.objects.ground_level.stop().animate({opacity:0},{duration:200,queue:false,complete:function()	{
													config.external.origin.close();}});
												}});
						};
				
					config.functions.background = function()
						{
							config.objects.ground_level = hs_dom.append(config.external.origin.stage,"<div></div>");
							config.objects.ground_level.css({opacity:0,position:"absolute",top:0,left:0});
							config.objects.ground_level.css({width:config.kernel.clientWidth,height:config.kernel.clientHeight});
							
							config.objects.ground_level.css({backgroundColor:"#000000"});
							config.objects.ground_level.stop().animate({opacity:.5},{duration:300,queue:false});
							config.objects.ground_level.bind("click",function()	{config.functions.close();});
								
						};	config.functions.background();
					
					config.functions.init = function()
						{
							
							config.objects.parent_level = hs_dom.append(config.external.origin.stage,"<div></div>");
							config.objects.parent_level.css({width:config.kernel.clientWidth,height:config.kernel.clientHeight});
							//config.objects.parent_level.css({border:"1px #ff0000 solid"});
							config.objects.parent_level.css({position:"absolute",top:0,left:0});
							config.objects.parent_level.bind("click",function()	{ config.functions.close();	});
							
							config.kernel.completely_loaded = false;
							config.kernel.completely_showed	= false;
							
							if(config.external.short_config[0] == "img")
							{
								hs_image.imgLoaded(config.external.href,function()	{	
									config.kernel.completely_loaded = true;
									
									config.objects.child_level = hs_dom.append(config.objects.parent_level,"<div><img src='"+config.external.href+"'/></div>");
										config.objects.child_level.css({opacity:0,position:"absolute",top:0,left:0});
										config.objects.child_level.stop().animate({opacity:1},{duration:300,queue:false,complete:function()	{config.kernel.completely_showed=true;}});
										
										hs_image.imgResize_scale(config.objects.child_level.find(config.external.short_config[0]),config.functions.object_width() - config.kernel.margin*2,config.functions.object_height() - config.kernel.margin*2);
					
										//config.objects.child_level.css({border:"0px #ffffff solid"});
										
										THIS.divHoldimg(config.objects.child_level.find(config.external.short_config[0]),config.kernel.margin);
						
										hs_cssStyle.vAlignment(config.objects.child_level,"middle");
										hs_cssStyle.hAlignment(config.objects.child_level,"center");
						
										hs_cssStyle.vAlignment(config.objects.child_level.find(config.external.short_config[0]),"middle");
										hs_cssStyle.hAlignment(config.objects.child_level.find(config.external.short_config[0]),"center");
										
										config.objects.child_level.bind("click",function(e)	{e.stopPropagation();});
										config.objects.child_level.find(config.external.short_config[0]).bind("click",function(e)	{lightbox_close();});
										
										hs_restrict.disable_drag(config.objects.child_level);
								});
							}
							
							if(config.external.short_config[0] == "iframe")
							{
								hs_dom.iframeLoaded(config.external.href,function()	{	
									config.kernel.completely_loaded = true;
									
									config.objects.child_level 		= 	hs_dom.append(config.objects.parent_level,"<div><iframe scrolling='auto' frameborder='0' src='"+config.external.href+"' width=300></iframe></div>");
									
									//config.objects.child_level.css({border:"2px #ffff00 solid"});
									config.objects.child_level.css({opacity:1,position:"absolute",top:0,left:0});
									config.objects.child_level.stop().animate({opacity:1},{duration:300,queue:false,complete:function()	{config.kernel.completely_showed=true;}});
									
									config.objects.child_level.find(config.external.short_config[0]).css({width:config.functions.object_width() - config.kernel.margin*2,height:config.functions.object_height() - config.kernel.margin*2});
									
									//config.objects.child_level.css({border:"1px #ffffff solid"});
								// Here : only support for firefox
									// >
									config.functions.scrollbar_handler(config.objects.child_level.find(config.external.short_config[0]));
									// <
									
									THIS.divHoldobj(config.objects.child_level.find(config.external.short_config[0]),config.kernel.margin);
									
									hs_cssStyle.vAlignment(config.objects.child_level,"middle");
									hs_cssStyle.hAlignment(config.objects.child_level,"center");
									
									hs_cssStyle.vAlignment(config.objects.child_level.find(config.external.short_config[0]),"middle");
									hs_cssStyle.hAlignment(config.objects.child_level.find(config.external.short_config[0]),"center");
																			});
							}
						};config.functions.init();
						
						config.functions.timer = function()
							{
								if(config.kernel.completely_showed)
								{	clearInterval(config.kernel.timer);
									config.kernel.timer = setInterval(function() {config.functions.animation_watcher();},"100");
								}
							};	config.kernel.timer = setInterval(function()	{config.functions.timer();},"100");
						
						
					
							}
		
						};