/*
Script: fuzzybox.js

Dependancies:
	 mootools - <Moo.js>, <String.js>, <Array.js>, <Function.js>, <Element.js>, <Dom.js>, <fixpng.js>
	 fuzzypng - pngbox2.png

Author:
	Jay Johnston, <larry [dot] g [dot] johnston [at] nasa [dot] gov>

		Function: fuzzybox
		this will replace a div with rounded corners and 'fuzzy' edged drop shadows (png)
		
		Arguments:
		box - the div element to replace with the fuzzy boxed div

		Note:
		there is an instance of this already set to fire onDOMReady that
		will fix any div files with the class "fuzzybox". This means any producer
		can just give the class "fuzzybox" to any div tag and they are set BUT, the
		pngs will may look wrong until the DOM loads, which may or may not be noticeable.
		
		fixPNG:
		i had trouble with the clientside version of fixPNG and just ended up including
		bobsoola's fixPNG...i still don't know why clientside's fixPNG doesn't work
		please let me know, i'd be curious to find out.

*/
function fuzzybox(box)
{
	try {
	  var box = $(box);
	  // return an object of fuzzyboxes styles...also get the content
	  var mestyles = box.getStyles('height','width','textAlign','border','background');
	  mestyles.innerHTML = box.innerHTML;
	  // create a new element which will be used to replace the old one
	  mne = box.clone();
          mne.setStyles({
	    textAlign: 'left',
	    border: '',
	    background: '',
	    overflow: ''
	  });
	  // parse to integer the heighth and width so we can do some figurin'
	  var h = mestyles.height.toInt();
	  var w = mestyles.width.toInt();
	  // set the html of the new element (myNewElement=mne)
		// the html takes one single image and crops it four times to produce the right sized fuzzy box
		// the clientside.moo.v1.1 makes the class="fixPNG"s transparent using IE filters
	  mne.setHTML('\
	  <div style="width:'+w+'px; height:'+(h+50)+'px; margin:0px; padding:0px; overflow:hidden; position:absolute; ">\
			<img src="/images/pngbox2.png" width="1600" height="1092" title="" border="0" class="fixPNG" style="position:absolute; clip:rect(0px '+(w-20)+'px '+(h+5)+'px 0px); margin:0px 0px 0px 0px; " />\
			<img src="/images/pngbox2.png" width="1600" height="1092" title="" border="0" class="fixPNG" style="position:absolute; clip:rect(0px 1600px '+(h+5)+'px 1580px); margin:0px 0px 0px -'+(1600-w)+'px; " />\
			<img src="/images/pngbox2.png" width="1600" height="1092" title="" border="0" class="fixPNG" style="position:absolute; clip:rect(1077px '+(w-20)+'px 1092px 0px); margin:-'+(1092-h-20)+'px 0px 0px 0px; " />\
			<img src="/images/pngbox2.png" width="1600" height="1092" title="" border="0" class="fixPNG" style="position:absolute; clip:rect(1077px 1600px 1092px 1580px); margin:-'+(1092-h-20)+'px 0px 0px -'+(1600-w)+'px; " />\
		</div>\
		<div style="width:'+(w-25)+'px; height:'+h+'px; margin:8px 0px 25px 10px; overflow:hidden; position:absolute; text-align:'+mestyles.textAlign+'; border:'+mestyles.border+'; background:'+mestyles.background+'; ">\
										<!-- your div content is below here now: --> \
																						'+mestyles.innerHTML+'\
										<!-- your div content is above here now: -->   \
		</div>\
		<div style="width:'+(w-25)+'px; height:'+(h+10)+'px; padding:30px 30px 0px 0px; overflow:hidden; "></div>\
	  ');
		// replace the image
	  box.replaceWith(mne);
 	  $$('img.fixPNG').each(function(png) {fixPNG(png);}); // ? should i or should i not
	  // mootools sweet like a grande vanilla latte - i like to move it move it
	 // if (!window.webkit && !window.webkit419 && !window.webkit420) new Drag.Move('login',{});
	  new Drag.Move('login',{});
	} catch(e) {}
};
window.addEvent('load', function(){$$('div.fuzzybox').each(function(div){fuzzybox(div)});});
/*
function fixPNG(myImage)
{
	try {
		var arVersion = navigator.appVersion.split("MSIE");
		var version = parseFloat(arVersion[1]);
		if ((version >= 5.5) && (version < 7) && (document.body.filters)){
       var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
           var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";
           var imgTitle = (myImage.title) ?
                            "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' ";
           var imgStyle = "display:inline-block;" + myImage.style.cssText;
           var strNewHTML = "<span " + imgID + imgClass + imgTitle
                  + " style=\"" + "width:" + myImage.width
                  + "px; height:" + myImage.height
                  + "px;" + imgStyle + ";"
                  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                  + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";
           myImage.outerHTML = strNewHTML;      
    }
	} catch(e) {}
};
*/
/* do not edit below this line */
/* Section: Change Log
created 2007-08-01
*/