/* from SlideDown */
Effect.SlideRightIn = function(element) {
/*
	SlideRightIn needs to have the content of the element wrapped in a container element with fixed width!
*/
	element = $(element).cleanWhitespace();
	var elementDimensions = element.getDimensions();
	return new Effect.Scale(element, 100, 
		Object.extend({ 
			scaleContent: false, 
			scaleY: false, 
			scaleFrom: window.opera ? 0 : 1,
			scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
			restoreAfterFinish: false,
			afterSetup: function(effect) {
				effect.element.makePositioned();
				if(window.opera) effect.element.setStyle({left: ''});
				effect.element.makeClipping().setStyle({width: '0px'}).show(); 
			},
			afterUpdateInternal: function(effect) {
				effect.element.setStyle({right: (effect.dims[1] - effect.element.clientWidth) + 'px' }); 
			},
			afterFinishInternal: function(effect) {
				effect.element.undoClipping().undoPositioned();
			}
		}, arguments[1] || {})
	);
}

/* from SlideUp */
Effect.SlideLeftOut = function(element) {
/*
	SlideLeftOut needs to have the content of the element wrapped in a container element with fixed width
	otherwise any text or images begin to wrap in stange ways!
*/
	element = $(element).cleanWhitespace();
	return new Effect.Scale(element, window.opera ? 0 : 1,
		Object.extend({ 
			scaleContent: false, 
			scaleY: false, 
			scaleMode: 'box',
			scaleFrom: 100,
			restoreAfterFinish: true,
			beforeStartInternal: function(effect) {
				effect.element.makePositioned();
				if(window.opera) effect.element.setStyle({left: ''});
				effect.element.makeClipping().show();
			},  
			afterUpdateInternal: function(effect) {
				effect.element.setStyle(
					{right: (effect.dims[1] - effect.element.clientWidth) + 'px' }
				);
			},
			afterFinishInternal: function(effect) {
				effect.element.hide().undoClipping().undoPositioned();
			}
		}, arguments[1] || {})
	);
}

var LoadImage = Behavior.create({
	initialize: function() {
	},
	onclick: function(e) {
		var target = Event.element(e);
		var image = target.getAttribute('href');
		if(target.getAttribute('rel') == 'live'){
			return true;
		}
		var imageTarget = $('menu-detail');
		if(imageTarget.visible()){
			Effect.SlideLeftOut(imageTarget, { duration: 0.6, afterFinish: function callback(obj) {
				var img = new Element('img', { 'src': image});
				imageTarget.update('');
				imageTarget.insert(img);
				Effect.SlideRightIn(imageTarget, {duration: 0.6});
			}});
		} else {
			var img = new Element('img', { 'src': image});
			imageTarget.insert(img);
			Effect.SlideRightIn(imageTarget, {duration: 0.6});			
		}
		return false;
	}
});

//Behaviours ===================================================================
//==============================================================================
Event.addBehavior({
  '#content a': LoadImage()
});