// mooRagged 1.0 - November - 2010
// this takes images (selectors specified in config) and replaces them with a version that has a ragged border in HTML5 browsers
// By MindWorks Marketing http://www.mindworks.co.uk
// It is free to use on other websites, but leave some credit in this code to the authors. Otherwise you're free to de-comment and compress with any tool you choose.
// If you have any good ideas to add to it, email webteam@mindworks.co.uk
// it requires mootools core 1.2+, the css for the class "moo_ragged_box", plus a PNG ragged border image referred to in the CSS
// set-up variables are at the bottom of this script
// there are lots of debug bits commented out to help you on your way. pro-tip: to uncomment them, just add a "/" to the "/*" so it looks like "//*". Saves time.



// set it up
mooRagged = 
{
	selector: undefined,
	raggedOK: undefined,
	raggedTop: undefined,
	raggedBtm: undefined,
	raggedLeft: undefined,
	raggedRight: undefined,
	raggedNudge: undefined,
	raggedFade: {},
	raggedFadeLength: undefined,
	// this is the pre-roll function, which hides the image to stop any jarring image replacement. it runs on DOMready, before the screen is painted.
	preRag: function () 
	{
	
		// test to see if this browser can run mooRagged (needs to support border-image and background-origin/clip fully - very CSS3)
		var t = document.createElement( 'div' );
		if(
			(typeof t.style.webkitBorderImage == "string" && typeof t.style.webkitBackgroundOrigin == "string")	// test for webkit
			|| (typeof t.style.MozBorderImage == "string" && typeof t.style.backgroundOrigin == "string") // test for firefox 4 (3.6 doesn't fully support background-origin, though it thinks it does)
			|| (typeof t.style.msBorderImage == "string" && typeof t.style.msBackgroundOrigin == "string")	// ms Ie9 dev preview (border-image not yet in preview6, but here's hoping)
			|| (typeof t.style.borderImage == "string" && typeof t.style.backgroundOrigin == "string")	// test for fully HTML5 compatible browser
		) 
		{
			t.dispose();
			this.raggedOK = true;
		} else {
			return;
		}
	
		// get them images that need to be made ragged
		if (!this.selector) {
			this.selector = '.moo_ragged';
		}
		raggedChildren = $$(this.selector);
		raggedChildrenLength = raggedChildren.length;
		/*
			console.log('* mooRagged.initialize(): # of pics to raggedize: ' + raggedChildrenLength);
		//*/
			
		for(var i=0;i<raggedChildrenLength;i++) {
			
			var thisNeatChild = raggedChildren[i];
			// hide the image with opacity
			thisNeatChild.setStyle('opacity',0);
			
		}
	
	},
	// this runs everything else, because the DOM doesn't see what the size of the images is at DOMready
	initialize: function () 
	{
	
		// if this browser can't run mooRagged, exit;
		if (!this.raggedOK) {
			return;
		}
		
		// loop through all the children to make ragged
		for(var i=0;i<raggedChildrenLength;i++) {
			
			var thisNeatChild = raggedChildren[i];
			
			// is this an image?
			var thisNeatChildType = thisNeatChild.tagName;
			if (thisNeatChildType.toUpperCase()!='IMG') {
				/*
					console.log('* mooRagged.initialize(): pic ' + i + ': exit - not an image'); 
				//*/
				return;
			}
			
			// find the height/width of this image (only possible onload, not domready)
			var thisNeatChildWidth = thisNeatChild.getSize().x;
			var thisNeatChildHeight = thisNeatChild.getSize().y;
			
			// and what the src is
			var thisNeatChildSrc = thisNeatChild.src;
			/*
				console.log('* mooRagged.initialize(): pic ' + i + ': ' + thisNeatChild.src + ' : width:' + thisNeatChildWidth + 'px height:' + thisNeatChildHeight + 'px'); 
			//*/
			
			// create a new ragged element to replace the neat child with
			thisRagChild = new Element('div', {
			    'class': 'moo_ragged_box'
			});
			thisRagChild.setStyles({
				// set the new element as the same size as the image it replaces, taking the border width into account
				'width':thisNeatChildWidth-this.raggedLeft-this.raggedRight,
				'height':thisNeatChildHeight-this.raggedTop-this.raggedBtm,
				// use the source of the image as a background image
				'background-image':'url(' + thisNeatChildSrc + ')',
				// nudging the background image a few pixels around the edge if it's edge if necessary
				'background-size':(thisNeatChildWidth-(this.raggedNudge*2)) + 'px ' + (thisNeatChildHeight-(this.raggedNudge*2)) + 'px ',
				'background-position':this.raggedNudge + 'px ' + this.raggedNudge + 'px ',
				// reset the background repeat (seems to drop when you reset the bg image)
				'background-repeat':'no-repeat',
				// set opacity to 0 so we can fade it in
				'opacity':0
			});
			// did we ask for a wrapper?
			if (this.wrap) {
				thisRagWrapper = new Element(this.wrap, {
			    	'id': this.wrapId,
			    	'class': this.wrapClass,
			    	'style': this.wrapStyle
				});
				thisRagChild.inject(thisRagWrapper);
				thisRagWrapper.inject(thisNeatChild,'after');
			} else {
				thisRagChild.inject(thisNeatChild,'after');
			}
			/*
				console.log('* mooRagged.initialize(): pic ' + i + ': ragged pic added'); 
			//*/
			// remove the neat Child
			thisNeatChild.dispose();
			/*
				console.log('* mooRagged.initialize(): pic ' + i + ': neat pic removed'); 
			//*/
			
			// fade up the ragged child
			mooRagged.raggedFade[i] = new Fx.Morph( thisRagChild, { 'duration' : this.raggedFadeLength } );
			mooRagged.raggedFade[i].start({
				opacity : 1
			}).chain(function() {
				/*
					console.log('* mooRagged.initialize(): pic ' + i + ': fade complete'); 
				//*/			
			});
			
		
		}
	}
}



// start it up
window.addEvent('domready', function() {
	// create an instance of the object
	RagMeNow = mooRagged;
	
	// CONFIG
	
	// how you gonna find em? optional, defaults to '.moo_ragged' but can be '#hero img', etc.
	RagMeNow.selector = '#hero img';
	// set the size of the ragged borders
	RagMeNow.raggedTop = 20;
	RagMeNow.raggedBtm = 20;
	RagMeNow.raggedLeft = 20;
	RagMeNow.raggedRight = 20;
	// this is an optional nudge to add a "sorta" margin (using bg-size, bg-position) around the edge of the picture underneath the edge.
	// it's most useful if you CSStransform the image like rotate it, when all the border edges start to show.
	// this works fine in FF4+, Safari5+ but the bg-size or the bg-repeat fails a bit in Safari 4. Not tragically, but noticeably.
	// this bit seems to work better with the border image "stretch", rather than "repeat" or "round"
	RagMeNow.raggedNudge = 1;
	// the time taken (ms) to fade in the ragged images when their ready.
	RagMeNow.raggedFadeLength = 200;
	// optionally wrap each image in a tag (eg 'div')
	RagMeNow.wrap = 'div';
	RagMeNow.wrapId = false;	// remember - only one ID per page
	RagMeNow.wrapClass = 'hero_pic';
	RagMeNow.wrapStyle = false;
	
	// hide the image we're about to replace, to stop any jarring image replacement
	RagMeNow.preRag()

});



// set it off
window.addEvent('load', function() {
	// go ahead and rag that image.
	RagMeNow.initialize()
});