if (Object.isUndefined(CodeCompany)) { var CodeCompany = {}; }

CodeCompany.ImageFrames = Class.create({

	log: function(str) {
		if (!Object.isUndefined(site)) { site.log('ImageFrames: '+str); }
	},

	initialize: function(options) {
		this.options = Object.extend({
			transparentImage: '/files/system/transpacer.gif'
		},options || {});

		// Find and build
		$$('.block .frameinfo').each(function(element){
			this.build(element.up());
		},this);
	},

	build: function(blockElement) {
		var image = undefined;
		var imageElements = blockElement.select('img');
		if (imageElements.length != 1) {
			this.log('ERROR: .block element contains more than one image.');
			return;
		}
		image = imageElements[0];

		var info = undefined;
		var infoElements = blockElement.select('.frameinfo');
		if (infoElements.length == 1) {
			info = infoElements[0];
		}

		var border = 3;

		// Image dimensions
		var width = image.getWidth();
		var height = image.getHeight();

		// Build and insert frameElement
		var frameElement = new Element('div');
		frameElement.addClassName('frame');
		frameElement.style.position = 'absolute';
		frameElement.style.width = width+'px';
		frameElement.style.height = height+'px';
		blockElement.insert({top:frameElement});

		// Dimensions of Content-window (see-thru)
		var windowWidth = (width-(2*border));
		var windowHeight = (height-(2*border));
		var windowHtml = '';

		// Find a suitable link
		var linkElement = undefined;
		linkElement = image.up('a');
		if (undefined===linkElement) { linkElement = info.down('a'); }

		if (undefined!==linkElement) {
			windowHtml =
				'<a href="'+linkElement.readAttribute('href')+'">'+
				'<img src="'+this.options.transparentImage+'" width="'+windowWidth+'" height="'+windowHeight+'" />'+
				'</a>';
		}

		this.log('Building frame for image '+image.src+' ('+width+'x'+height+')');

		var html = 
			'<table cellspacing="0" cellpadding="0" border="0" height="'+height+'" width="'+width+'">'+
				'<tr height="'+border+'">'+
					'<td class="frame_topleft" width="'+border+'"></td>'+
					'<td class="frame_top" width="'+windowWidth+'"></td>'+
					'<td class="frame_topright" width="'+border+'"></td>'+
				'</tr>'+
				'<tr height="'+(height-(2*border))+'">'+
					'<td class="frame_left" width="'+border+'"></td>'+
					'<td class="frame_window" width="'+windowWidth+'">'+windowHtml+'</td>'+
					'<td class="frame_right" width="'+border+'"></td>'+
				'</tr>'+
				'<tr height="'+border+'">'+
					'<td class="frame_bottomleft" width="'+border+'"></td>'+
					'<td class="frame_bottom" width="'+windowWidth+'"></td>'+
					'<td class="frame_bottomright" width="'+border+'"></td>'+
				'</tr>';
		
		// Add an info cell?
		if (info !== undefined) {
			html += '<tr>';
			html += '<td colspan="3" class="frame_content" valign="bottom" align="left">'+info.innerHTML+'</td>';
			html += '</tr>';
		}

		html += '</table>';

		frameElement.update(html);

					

	}
	
});