/*
RoundedCorners v2.0
============================================================================

Description
--------------------------
Attempts to round corners of images by putting custom png files in each
corner.


Usage
--------------------------
Images must use the css class "rounded": <img class="rounded" .. />
The images must reside in a separate container div.
The container must have specified width.


Explanation
--------------------------
Each <img class="rounded" .. /> is first wrapped in a rounded_wrapper div.
Inside the wrapper, additional 4 divs are created. One for each corner. The
width and height of the given image is copied to the wrapper div and the
corners. The corner divs are positioned on top of the image. Each corner
div has its own png image defined in the css.

The following html is generated for each image
<div class="rounded2_wrapper">
<img class="rounded2" src=".." />
<div class="rounded2 topleft2"></div>
<div class="rounded2 bottomleft2"></div>
<div class="rounded2 topright2"></div>
<div class="rounded2 topleft2"></div>
</div>

All this is ignored in msie6 as a result of poor png transparency support.


Author
--------------------------
Simen Lysebo, August 2009

*/

RoundedCorners = Class.create({
	
	intervalID: false,
	intervalID_special: false,
	isIE6: null,
	
	/* 
	 * constructor
	 * class must be instantiated after dom:loaded
	 * takes no action if browser is msie6
	 */
	initialize: function() {
		if (Prototype.Browser.IE && navigator.appVersion.match(/MSIE 6\.0/)) {
			this.isIE6 = true;
		} else {
			this.isIE6 = false;
			this.setUpInterval();
		}
	
	},

	/*
	 * img class="rounded" must be checked periodically when page has been loaded
	 * as ie7/ie8 sometimes loads images slowly. The interval is stopped when
	 * all rounded-images are processed 
	 */
	setUpInterval: function() {
		if (this.intervalID == false) {
			this.intervalID = setInterval("roundedCorners.iterateImages()", 200);
		} else {
			// interval is already running, taking care of things
		}
	},


	/*
	 * handling a special case where a rounded image is dynamically loaded into the dom.
	 * this is only done for browsers different from ie6
	 * */
	setUpInterval_special: function() {
		if (!this.isIE6) {
			if (this.intervalID_special == false) {
				this.intervalID_special = setInterval("roundedCorners.iterateImages_special()", 200);
			} else {
				// interval is already running, taking care of things
			}
		}
	},

	/*
	 * Loops through all img.rounded and applies stuff when image boundaries are set up.
	 * Removes the rounded class for each finished element, and stops interval when all
	 * images are processed
	 * */
	iterateImages: function(){
		$$('img.rounded').each(function(img){
			if (img.complete && img.getWidth() > 0 && img.getHeight() > 0) {
				this.doStuffIE7IE8(img);
				img.removeClassName("rounded");
			}
		}.bind(this));
		
		if (this.intervalID != false) {
			if ($$('img.rounded').length == 0){
				// stop timeout when no more images can be processed
				clearTimeout(this.intervalID);
				this.intervalID = false;
			}
		}
	},

	/*
	 * loops through img.rounded_special and calls a custom method for this case.
	 * */
	iterateImages_special: function(){
		$$('img.rounded_special').each(function(img){
			if (img.complete && img.getWidth() > 0 && img.getHeight() > 0) {
				this.doStuffIE7IE8_special(img);
				img.removeClassName("rounded_special");
			}
		}.bind(this));
		
		if (this.intervalID_special != false) {
			if ($$('img.rounded_special').length == 0){
				// stop timeout when no more images can be processed
				clearTimeout(this.intervalID_special);
				this.intervalID_special = false;
			}
		}
	},

	/*
	 * apply rounded corners. see rounded2 related classes in css
	 */
	doStuffIE7IE8: function(img) {
		// wrap image
		wrapper = img.wrap('div', {'class' : 'rounded2_wrapper'});
		// needs to explicitly set class name, because ie8 doesn't
		wrapper.addClassName("rounded2_wrapper");
		
		// add one div for each corner
		img.insert({'after': '<div class="rounded2 topleft2"></div>'});
		img.insert({'after': '<div class="rounded2 topright2"></div>'});
		img.insert({'after': '<div class="rounded2 bottomleft2"></div>'});
		img.insert({'after': '<div class="rounded2 bottomright2"></div>'});

		// get dimensions for image
		var w = img.getWidth();
		var h = img.getHeight();
		
		// set w+h on wrapper, and inherit float from container
		wrapper.setStyle({
			width: w + "px",
			height: h + "px",
			cssFloat: wrapper.up().getStyle("float")
		});
		
		// set w+h on corner divs
		wrapper.select('div.rounded2').each(function(corner){
			corner.setStyle({
				width: w + "px",
				height: h + "px"
			});
		}.bind(this));

	},
	
	doStuffIE7IE8_special: function(img) {
		// wrap image
		wrapper = img.wrap('div', {'class' : 'rounded2_wrapper'});
		// needs to explicitly set class name, because ie8 doesn't
		wrapper.addClassName("rounded2_wrapper");
		
		// add one div for each corner
		img.insert({'after': '<div class="rounded2 topleft2"></div>'});
		img.insert({'after': '<div class="rounded2 topright2"></div>'});
		img.insert({'after': '<div class="rounded2 bottomleft2"></div>'});
		img.insert({'after': '<div class="rounded2 bottomright2"></div>'});
		
		// get dimensions for image
		var w = img.getWidth();
		var h = img.getHeight();
		
		// set w+h on wrapper, and inherit float from container
		wrapper.setStyle({
			width: w + "px",
			height: h + "px",
			cssFloat: wrapper.up().getStyle("float")
		});
		
		// set w+h on corner divs
		wrapper.select('div.rounded2').each(function(corner){
			corner.setStyle({
				width: w + "px",
				height: h + "px"
			});
		}.bind(this));
	}	
	
});

var roundedCorners;

document.observe('dom:loaded', function(event){
	roundedCorners = new RoundedCorners();
});