function setupRollOverImages() {
	function preloadImage(imageUrl) {
		var d=document; 
		if(!d.MM_p) d.MM_p=new Array();
		var i,j=d.MM_p.length;
		d.MM_p[j]=new Image; 
		d.MM_p[j++].src=imageUrl;
	}
		
	$$('.rollover_image').each(function(imgElement) {
		var dir = imgElement.src.substring(0, imgElement.src.lastIndexOf("/")+1);
		var outImageName = imgElement.src;
		var selectImageName = outImageName;
		var overImageName = imgElement.getAttribute("over");
		preloadImage(dir + overImageName);
		imgElement.observe('mouseover', function() {
			imgElement.src = dir + overImageName;
		});
		imgElement.observe('mouseout', function() {
			imgElement.src = selectImageName;
		});
		imgElement.changeToSelect = function() {
			selectImageName = dir + overImageName;
			imgElement.src = selectImageName;
		}
		imgElement.changeToDeselect = function() {
			selectImageName = outImageName;
			imgElement.src = selectImageName;
		}
	});
	
	$$('.rollover_bgimage').each(function(element) {
		
		Event.observe(element, 'mouseout', function(event) {
			var overClassName = event.element().getAttribute("over");
			if(element.hasClassName(overClassName)) {
				element.removeClassName(overClassName);
			}
		});
		Event.observe(element, 'mouseover', function(event) {
			var overClassName = event.element().getAttribute("over");
			if(!element.hasClassName(overClassName)) {
				element.addClassName(overClassName);
			}
		});
	});
	
	document.fire("proguide:rollover_images_loaded");
}




function addMultipleFileFunction() {
	var autoAppendFunction = function(event) {
		var element = event.element();
		var target = element.getAttribute("target");
		var toAppend = true;
		var files = $$('input[target="'+target+'"]');
		files.each(function(fileElement) {
			if(!fileElement.value) {
				toAppend = false;
			}
		});
		if(toAppend) {
			var appendTarget = $$('input[target="'+target+'"]').pop();
			
			var fakeViewId = "fake_view_" + CommonUtils.generateRandomString();
			var sampleDiv = appendTarget.up();
			var viewSampleElement = $(appendTarget.getAttribute("view"));
			var button = appendTarget.up().select("img")[0];
			
			
			var newFileElementId = CommonUtils.generateRandomString();
			var f = Builder.node('input', {type:'file', id:newFileElementId, name:newFileElementId, target:target, className:appendTarget.className, view:fakeViewId, style:appendTarget.style.cssText});
			var newSpan = Builder.node('span', {}, [
					Builder.node('div', {className:sampleDiv.className, style:sampleDiv.style.cssText}, [
							f,
							Builder.node('div', {className:'fakefile'},[
									Builder.node('input', {type:'text', id:fakeViewId, className:viewSampleElement.className, style:viewSampleElement.style.cssText}),
									Builder.node('img', {src:button.src, width:button.width, height:button.height, style:button.style})
								])
						])
				]);
			appendTarget.up('form').insert({'bottom': newSpan});
			Event.observe(f, 'change', autoAppendFunction);
			Event.observe(f, 'change', fakeFunction);
		}
	}
	$$('.multiple_file').each(function(item) {
		item.observe('change', autoAppendFunction);
	});
}

var fakeFunction = function(event) {
	var element = event.element();
	var view = element.getAttribute("view");
	if(view) {
		
		$(view).value = element.value;
	}
}
	
function fakeFileElement() {
	
	$$('input.file').each(function(item) {
		item.observe('change', fakeFunction);
	});
}

function setupToolTips() {
	$$(".tool_tip").each(function(element) {
		element.observe('mouseover', onToolTipOver);
		element.observe('mouseout', onToolTipOut);
	});
}

function onToolTipOver(event) {
	var element = event.element();
	var message = element.getAttribute("tooltip");
	var div = new Element("div", {className:"tool_tip_box"});
	
	/*
	if(element.tiplayer) {
		new Effect.Appear(element.tiplayer);
		return false;
	}
	*/
	element.tiplayer = div;
	element.tiplayer.update(message);
	
	// div.setStyle({left:'0px', top:'0px'});
	element.up().insert({bottom:div});
	
	element.tiplayer = div;
	var positionInfo = element.positionedOffset();
	
	var x = event.pointerX() - element.cumulativeOffset()['left'];
	var y = event.pointerY() - element.cumulativeOffset()['top'];
	
	div.setStyle({
		left: positionInfo['left'] + x + 8 + "px",
		top: positionInfo['top']+ y + 8 + "px"});
	new Effect.Appear(element.tiplayer, {duration:'0.5'});
}

function onToolTipOut(event) {
	var element = event.element();
	if(element.tiplayer) {
		new Effect.Fade(element.tiplayer, {duration:'0.3'});
		if(Prototype.Browser.IE) {
			element.tiplayer.remove();
		}		
	}
}

/**
 * Document Auto Scripting : RollOver Image
 * rollover �씠誘몄���뿉 ����빐 �옄�룞�쑝濡� rollover, out 諛� select, deselect 瑜� 吏��썝�븳�떎.
 * 
 * 1. �꽕�젙諛⑸쾿
 * img �깭洹몃�� �궗�슜�빐�빞 �븯硫�, 'rollover_image' class 瑜� �궗�슜�빐�빞�븳�떎.
 * over �씠誘몄���뒗 out �씠誘몄����� 媛숈�� 寃쎈줈�뿉 �쐞移섑븯�뿬�빞�븯硫�, 媛믪쑝濡쒕뒗 �뙆�씪紐낅쭔 湲곗닠�븳�떎.
 * ex) <img src="/resource/images/bt_out.gif" over="bt_roll.gif" class="rollover_image" />		OK
 * ex) <img src="/resource/images/bt_out.gif" over="bt_roll.gif" class="iwannaberollover" />	Fail. class �냽�꽦�쑝濡� rollover_image 媛� 吏��젙�릺吏� �븡�븯�떎.
 * ex) <img src="/resource/images/bt_out.gif" over="/resource/images/bt_roll.gif" class="rollover_image" /> Fail. over �냽�꽦媛믪쑝濡� �뙆�씪紐낅쭔 湲곗닠�빐�빞�븳�떎. 
 *
 * 2. 湲곕뒫 �궗�슜 踰�
 * rollover, rollout ��� tag瑜� �옉�꽦�븯�뒗 寃껊쭔�쑝濡� �럹�씠吏� 濡쒕뵫�떆�뿉 �룞�옉�븳�떎.
 * changeToSelect function ��� �씠誘몄��瑜� rollover �긽�깭濡� 怨좎젙�븳�떎.
 * changeToDeselect function ��� �씠誘몄��瑜� rollout �긽�깭濡� 怨좎젙�븳�떎.
 * ex) 
   <img id="btRoll" src="/rs/bt_out.gif" over="bt_roll.gif" class="rollover_image" />
   <script type="text/javascript">
   $('btRoll').selectToSelect(); // btRoll image 瑜� rollover �떆�궓�떎.
   $('btRoll').selectToDeselect(); // btroll image 瑜� rollout �떆�궓�떎.
   </script>
 *
 * @author �렪�쁽�옣
 */
document.observe('dom:loaded', setupRollOverImages);


/**
 * Document Auto Scripting : Auto Append File Field
 * file element �쓽 class濡� 'multiple_file' 瑜� 媛�吏�硫� �옄�룞�쟻�쑝濡� �븘�뱶 異붽��瑜� 吏��썝�븳�떎
 * ex) <input type="file" class="multiple_file" />	OK
 * ex) <input type="file" /> 					Fail. multiple_file Css �겢�옒�뒪瑜� 媛�吏�吏� �븡�쑝誘�濡�, �뙆�씪 �븘�뱶瑜� 異붽���븯吏� �븡�뒗�떎.
 * @author �렪�쁽�옣
 */
document.observe('dom:loaded', addMultipleFileFunction);

document.observe('dom:loaded', fakeFileElement);

/**
 * Document Auto Scriting : Tool Tip
 * element �쓽 class 濡� 'tool_tip' �쓣 媛�吏�硫� element �쓽 'tooltip' attribute 媛믪쓣 �댋�똻�쑝濡� 蹂댁뿬以��떎.
 */
document.observe('dom:loaded', setupToolTips);