// Set height of content managed images to be prescribed by the design and aspect ratio (and frame them)
Event.observe(window, 'load', function() {
	var featuredDiv = $('featured');
	if (featuredDiv) {
		var featureImage = $(featuredDiv).down('img');
/*		var oldDims = $(featureImage).getDimensions();
		var newHeight = parseInt(571*(oldDims.height/oldDims.width));
		featureImage.width = 571;
		featureImage.height = newHeight;
		$(featureImage).setStyle({
			width: '571px',
			height: newHeight + 'px'
		});*/
		$(featureImage).addClassName('framed');
	}
	try {
		$A(document.getElementsByClassName('others')).each(function(otherItem) {
			var desc = $(otherItem).descendants();
			$A(desc).each(function(itemName) {
				if (itemName.tagName == 'IMG') {
/*					var oldDims = $(itemName).getDimensions();
					var newWidth = parseInt(138*(oldDims.width/oldDims.height));
					itemName.height = 138;
					itemName.width = newWidth;
					$(itemName).setStyle({
						height: '138px',
						width: newWidth + 'px'
					});*/
					$(itemName).addClassName('framed');
				}
			});
		});
	}
	catch (e) {}
});

// Add a classname to images that are contained within a 'submitted' div (for speed)
document.observe("dom:loaded", function() {
		$A(document.getElementsByClassName('featuredSubmitted')).each(function(item) {
		$(item).down('img').addClassName('featuredSubmittedImg');
	});
	$A(document.getElementsByClassName('readerSubmitted')).each(function(item) {
		$(item).down('img').addClassName('readerSubmittedImg');
	});
	$A(document.getElementsByClassName('featuredXmas')).each(function(item) {
		$(item).down('img').addClassName('featuredXmasImg');
	});
	$A(document.getElementsByClassName('xmas')).each(function(item) {
		$(item).down('img').addClassName('xmasImg');
	});
});

// Framer - frames images with class = "framed"
Event.observe(window, 'load', function() {
	var borderWidth = 2;
	var borderPad = 7;
	$A(document.getElementsByClassName('framed')).each(function(item) {
		var dims = $(item).getDimensions();
		var framedThing = new Element('div');
		var innerFrame = new Element('div');
		var imageReplace = new Element('img');
		$(framedThing).setStyle({
			/*padding: borderPad + 'px 0 0 0',*/
			width:  dims.width  + 'px',
 			height: dims.height + 'px',
			position: 'relative',
			margin: '0 auto 0 auto'
		});
		imageReplace.src = item.src;
		$(imageReplace).setStyle({
			width:  dims.width  + 'px',
 			height: dims.height + 'px',
			border: '0'
		});
		$(innerFrame).setStyle({
			border: borderWidth + 'px solid white',
			margin: '0px ' + borderPad + 'px 0 ' + (borderWidth+borderPad) + 'px',
			height: dims.height-2*(borderWidth+borderPad) + 'px',
			width: dims.width-2*(2*borderWidth+borderPad) + 'px',
			position: 'relative',
			top: '-' + (dims.height-(borderPad)) + 'px',
			zIndex: '1'
		});
		// Begin adding submitted badge
		if ($(item).hasClassName('featuredSubmittedImg')) {
			var readerSubLarge = new Element('img');
			readerSubLarge.src = "/images/readersubmission_large.png";
			$(readerSubLarge).setStyle({
				position: 'absolute',
				bottom: '0',
			});
			$(innerFrame).appendChild(readerSubLarge);
		}
		if ($(item).hasClassName('readerSubmittedImg')) {
			var readerSubSmall = new Element('img');
			readerSubSmall.src = "/images/readersubmission_small.png";
			$(readerSubSmall).setStyle({
				position: 'absolute',
				bottom: '0',
				padding: '0 0 3px 3px'
			});
			$(innerFrame).appendChild(readerSubSmall);
		}
		if ($(item).hasClassName('featuredXmasImg')) {
			var xmasSubLarge = new Element('img');
			xmasSubLarge.src = "/images/xmas_large.png";
			$(xmasSubLarge).setStyle({
				position: 'absolute',
				bottom: '0',
			});
			$(innerFrame).appendChild(xmasSubLarge);
		}
		if ($(item).hasClassName('xmasImg')) {
			var xmasSubSmall = new Element('img');
			xmasSubSmall.src = "/images/xmas_small.png";
			$(xmasSubSmall).setStyle({
				position: 'absolute',
				bottom: '0',
				padding: '0 0 3px 3px'
			});
			$(innerFrame).appendChild(xmasSubSmall);
		}
		// End adding submitted badge
		$(framedThing).appendChild(imageReplace);
		$(framedThing).appendChild(innerFrame);
		$(item).replace(framedThing);	
	});
});

// Make all secondary boxes the same height
document.observe("dom:loaded", function() {
	var maxHeight = 0;
	$A(document.getElementsByClassName('secondaryTitle')).each(function(item) {
		if ($(item).getDimensions().height > maxHeight)
			maxHeight = $(item).getDimensions().height;
	});
	$A(document.getElementsByClassName('secondaryTitle')).each(function(item) {
		$(item).setStyle({
			height: maxHeight + 19 +  'px'
		});
	});
});

// Resize div id="leftHeight" with size of the featured div (id = "featuredArea")
Event.observe (window, 'load', function() {
	if ($('featuredArea')) {
		var featuredDiv = $('featuredArea');
		var magicNumber = 37;
		$('leftHeight').setStyle({
			height: $(featuredDiv).getDimensions().height - magicNumber + 'px'
		});
	}
});

// Set negative top margin of div id = "bottom" based on its height
document.observe("dom:loaded", function() {
		if ($('bottom')) {
		var bottomDiv = $('bottom');
		$(bottomDiv).setStyle({
			margin: -1 * $(bottomDiv).getDimensions().height + 'px 0 0 0'
		});
	}
});