jQuery.log = function(message) {
  if(window.console) {
     console.debug(message);
  } else {
     alert(message);
  }
};


/**
 * wapInFLuidBox
 * wraps selection into some html so a nice fluid box show up styled with css
 * @author AK|Peppered
 */

jQuery.fn.wrapInFluidBox = function() {
	$(this).wrap('<div class="fluidbox"></div>');
	oFb = $(this).parent();
	oFb.wrapInner('<div class="top"><div class="inner"></div></div>');
	oFb.append('<div class="bottom"><div class="inner">&nbsp;</div></div>');
}


/**
 * imgOverlay
 * wraps img in box, and gives it a siblinb overlay box which is positioned over it.
 * the overlay style is same as fluidbox
 * @author AK|Peppered
 */

jQuery.fn.imgOverlay = function() {
	var e = $('body').get(0);
	
	var agt=navigator.userAgent.toLowerCase();
	var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
	var is_major = parseInt(navigator.appVersion);
	var is_minor = parseFloat(navigator.appVersion);
	var ie_alphaSupport = (e.runtimeStyle && typeof(e.runtimeStyle.filter) != 'undefined');
	var ie_alphaImg = (is_ie && ie_alphaSupport && (is_major == 4) && (agt.indexOf("msie 5.5") !=-1 || agt.indexOf("msie 6.") != -1));
	
	if (is_ie && !ie_alphaSupport) {
		return;
	}
	
	$(this).each(function() {		
		/* please note: safari&opera need img width&height attrs set for these to work correctly! */
		w = $(this).width();
		h = $(this).height();
		
		if (!ie_alphaImg) {
			//- overlay w/h. substract padding:
			w = w-12;
			h = h-12;
		
			$(this).wrap('<div class="overlayContainer" style="width:' + w + 'px; height:' + h + 'px"></div>');
			oOc = $(this).parent();
			
			oOc.append('<div class="overlay fluidbox"><div class="top"><div class="inner"></div></div><div class="bottom"><div class="inner">&nbsp;</div></div></div>');
			oOc.children('div.overlay').children('div.top').css({
				width: w + "px",
				height: h + "px"
			});
		}
		else {
			// to get the job done 'nicely' in IEnoPNG, we use 4 corner imgs
			$(this).wrap('<div class="overlayContainer" style="width:' + w + 'px; height:' + h + 'px"></div>');
			oOc = $(this).parent();
			oOc.append('<div class="overlay" style="width: '+(w-2)+'px; height: '+(h-2)+'px"></div>');
			oOc.append('<div class="imgOverlayCornerContainer" class="hiddden"><span class="imgOverlayCorner-lt"></span><span class="imgOverlayCorner-rt"></span><span class="imgOverlayCorner-rb"></span><span class="imgOverlayCorner-lb"></span></div>')
		}
		
	});

}

$(function(){
	/**
	 * first-child stuff
	 */
	$('#content h4:first').addClass('first-child');
	
	/**
	 * set img overlay
	 */
	$('#content .subColumn img').imgOverlay();
});