function rePositionBGLayer() {
	var docBodySize = $(document.body).getCoordinates(), 
		bgWidth = 940, 
		__width = (docBodySize.width - bgWidth) / 2,
		__less = __width - (__width % 78) + 5;
	if (__width > 0)
		$('bg').setStyles({ left : __less });
	else
		$('bg').setStyles({ left : 5 });
}

var fx = new Fx.Morph('main_image', { duration: 300, transition: Fx.Transitions.Sine.easeOut });
$$('div#small-g img').addEvents({
	'click': function(){
		if ($('main_image').getProperty('index') == this.id) return false;
		var self = this;
		fx.pause();
		fx.start({ 
			opacity: [1, 0]
		}).chain(function(){
			$('main_image').src = self.src;
			$('main_image').setProperty('index', self.id);
			fx.start({ 
				opacity: [0, 1]
			});
		});
	}	
});

function change_image(src) {
	//$("main_image").src = src;
	// preview a new image.
	new Asset.image(src, {
		onload: function() { // sucess 
			var fx = new Fx.Morph('main_image', { duration: 300, transition: Fx.Transitions.Sine.easeOut });
			fx.start({ opacity: [1, 0] }).chain(function() {
				$('main_image').src = src;
				fx.start({ opacity: [0, 1] });
			});
		},
		onerror: function() { // 
			alert("There is not a image!");
		}
	});
}

function ajax_apply(src, update) {
	if ($(update)) {
		var ajax = new Request.HTML({ url: src, evalScripts: true, evalResponse: true, 
			onComplete: function() {
				var content = arguments[1];
				content.each(function(obj, idx) {
					if (obj.className == 'mainer') {
						var fx = new Fx.Morph(update, { duration: 1000, transition: Fx.Transitions.Circ.easeOut });
						fx.start({ marginTop: [0, 120], opacity: [1, 0] }).chain(function() {
							$(update).setHTML($(content[idx]).getHTML());
							fx.start({ marginTop: [100, 0], opacity: [0, 1] });
						});
					}
				});
			}
		});
		ajax.get();
	}
	return false;
}

rePositionBGLayer();
$(window).addEvent("resize", function() {
	rePositionBGLayer();
});