var down = 0;
var mouseIsDown = false;
function resizeUp(){
    mouseIsDown = false;
}
function resizeDown(e){
    down = e.page.y;
    mouseIsDown = true;
}
function resizeMove(resizer, e){
    if(!mouseIsDown) return;
    resizer.getParent().getElements('textarea')[0].setStyles({
	'height': (parseInt(resizer.getParent().getElements('textarea')[0].getStyle('height')) + (e.page.y -down)) + 'px'});
}
function addListenerToResizer(elem){
    elem.addEvents({
	'mousedown':function(e){e.stop();resizeDown(e);},
	'mouseup':function(e){e.stop();resizeUp();},
	'mouseleave':function(e){e.stop();resizeUp();},
	'mouseenter':function(e){e.stop();resizeUp();},		
	'mousemove': function(e){e.stop();resizeMove(elem, e);}
    });
}
window.addEvents({
    'domready': function(){
		$$('.maximizeblue', '.maximizeblack').each(function(elem){
		    addListenerToResizer(elem);
		});
    }
});

var mouseInsidespeechBalloon = false;

function showBubble(element, text, orientation, fontSize){
	
	if (element == null) return;
	
	$try(function(){$('speechBalloon').dispose();}, function(){});

    var x = element.getPosition()['x'];
    var y = element.getPosition()['y'];
    
    var layer = new Element('div');
    layer.inject(element, 'before');
    layer.set({
		'id': 'speechBalloon'
    });    
    
    var bubbleTop = new Element('div');
    
    if (orientation == 'left')
    {
	    layer.setStyles({
			'left': (x - 220) +'px',
			'top': (y - 15) +'px',
			'padding-left': '0px',
			'padding-right': '0px',
			'padding-top': '10px',
			'width': '202px',
			'min-height': '140px',
			'position': 'absolute',
			'overflow': 'hidden',
			'z-index': 10
	    });
	    bubbleTop.setStyles({
			'width': '202px',
			'height': '48px',
			'background': 'url("/images/_12d_speechbubble_topr.gif") no-repeat top left',
			'position': 'relative',
			'z-index': 20
	    });
    }
    else
    {
		layer.setStyles({
			'left': (x - 22 + parseInt(element.getStyle('width'))) +'px',
			'top': (y - 15) +'px',
			'padding-left': '0px',
			'padding-right': '0px',
			'padding-top': '10px',
			'width': '202px',
			'min-height': '150px',
			'position': 'absolute',
			'overflow': 'hidden',
			'z-index': 10
	    });
	    bubbleTop.setStyles({
			'width': '202px',
			'height': '48px',
			'background': 'url("/images/_12d_speechbubble_topl.gif") no-repeat top left',
			'position': 'relative',
			'z-index': 20
	    });
    }
    bubbleTop.injectInside(layer);
    var bubbleMiddle = new Element('div');
    bubbleMiddle.setStyles({
		'width': '190px',
		'padding-top': '15px',
		'background': 'url("/images/_12d_speechbubble_middle.gif") repeat-y top left',
		
		'z-index': 20
    });

    var content = new Element('div');
    content.injectInside(bubbleMiddle);
    content.set({
		'html': text
    });  	
    content.setStyles({
		'width': '165px',
		'margin-left': '20px',
		'margin-top': '-60px',
		'position': 'relative',
		'padding-top': '10px',
		'padding-bottom': '5px',
		'font-size': fontSize,
		'z-index': 20
		
    });
    bubbleMiddle.injectInside(layer);
    
    
    var bubbleBottom = new Element('div');
    bubbleBottom.setStyles({
		'width': '190px',
		'height': '14px',
		'background': 'url("/images/_12d_speechbubble_bottom.gif") no-repeat top left'
    });
    bubbleBottom.injectInside(layer);
		    
 
		    
//		    var closer = new Element('img')
//			.set( { 'src' :'/images/_12d_b_close.png' })
//			.setStyles( { 
//				'margin': '5px', 'position': 'relative', 'top': '-90px', 'right': '0px', 'float': 'right', 'cursor': 'pointer'
//			})
//			.inject(layer)
//			.addEvent('click', function(){removeBubble();});
		    
	$('speechBalloon').setStyles({
		'left': (parseInt($('speechBalloon').getStyle('left'))+ 21) + 'px',
		'top': (parseInt($('speechBalloon').getStyle('top'))-10) + 'px',
		'font-size': '12px',
		'font-weight': 'normal'
	});
	
	$('speechBalloon').addEvents({
		'mouseenter': function(){
			mouseInsidespeechBalloon = true;
		},
		'mouseleave':  function(){
			mouseInsidespeechBalloon = false;
			removeBubble();
		}
	});
}
function addBubble(element, text, orientation, showEvent, hideEvent, hideTimeout, fontSize){
	if(fontSize == null)
	{
		fontSize = '';
	}
	
	if(element != null) {
	
		if (showEvent == null){
			showEvent = 'mouseenter';
		}
		if (hideEvent == null){
			hideEvent = 'mouseleave';
		}
	
		element.addEvent(showEvent, function(){
			showBubble(element, text, orientation, fontSize);
		});
		
		element.addEvent(hideEvent, function(){
			removeBubble(hideTimeout);
		});
	}
}
function removeBubble(hideTimeout) {
	var disposeBalloon = function(){
		if (mouseInsidespeechBalloon == false){
			if ($('speechBalloon') != null){				
				$('speechBalloon').dispose();
			}
		}
	};
	
	if (hideTimeout == null){
		hideTimeout = 300;
	}
	
	if (hideTimeout == 0){
		disposeBalloon();	
	}
	else{
		window.setTimeout(disposeBalloon, 300);
	}	
}

function displayElement(name) {
	$(name).setStyle('display', 'block');
	
	$(name).addEvents({
    	'mouseleave':function(e){
			$(name).setStyle('display', 'none');
		}
	});
}

var DesignLayer = new Class ({

	initialize : function(element, target, text) {
		
		if (element == null) return;
		
		var bla = this;
		element.addEvent('mouseenter', function(e){
			bla.showDesignPreview(element, target, text, e);
		});
		
		element.addEvent('mouseleave', function(){
			bla.removeDesignPreview();
		});
		
		element.addEvent('mousemove', function(e){
			bla.moveDesignPreview(e);
		});
	},
	
	showDesignPreview: function(element, target, text, event) 
	{
		if (element == null) return;
		
		scrOfX = $(window).getScroll().x;
		scrOfY = $(window).getScroll().y;
		
		clientWidth = $(window).getSize().x;
		clientHeight = $(window).getSize().y;

		newLeft = event.page.x+5;
		newTop = event.page.y+5;
		
		if ((newLeft-scrOfX + 410) > clientWidth)
		{
			newLeft = newLeft - 420;
		}
		if ((newTop-scrOfY + 310) > clientHeight)
		{
			newTop = newTop - 320;
		}
		
		new Element('div')
		.setStyles({
			'position': 'absolute', 
			'left': newLeft,
			'top': newTop,
			'border': 'solid 2px #eeeeee',
			'padding':'5px',
			'color': 'black',
			'background': '#ffffff',
			'z-index': '400',
			'width': 410,
			'height': 'auto'/*310*/})
		.set('id', 'proposalPreview').inject(element);
		
	
		if (this.imageAsset == null){
			
			this.indicator = new Element('img')
			.set( { 'src' :'/images/indicator-big.gif' })
			.setProperty('id', 'indicator')
			.setStyles( { 
				'position' :'absolute', 
				'top' :'120px', 
				'right' :'180px', 
				'border': '0px'
			})
			.injectTop($('proposalPreview'));
						
			this.imageAsset = new Asset.image(target, { onload:function(img){
				
				if ($('indicator') != null){
					$('indicator').setStyle('display', 'none');
					$('indicator').setStyle('visibility', 'hidden');
				}
				img.setStyle('border', '0px');
				if ($('proposalPreview') != null) {
					$('proposalPreview').empty();
					img.injectTop($('proposalPreview'));
					
					if (text != null) {
						new Element('br', {}).injectBottom($('proposalPreview'));
						new Element('label', {'html': text, 'style': 'width: 100%; text-align: center;'}).injectBottom($('proposalPreview'));
					}
				}
				
		
			}});
		}
		else{
			this.imageAsset.injectTop($('proposalPreview'));
			
			if (text != null) {
				new Element('br', {}).injectBottom($('proposalPreview'));
				new Element('label', {'html': text, 'style': 'width: 100%; text-align: center;'}).injectBottom($('proposalPreview'));
			}
		}			
		
		
	},
	
	removeDesignPreview: function(element) {
		
		if ($('proposalPreview') != null){
			$('proposalPreview').dispose();	
		}	 
	},
	
	moveDesignPreview: function(e) {
	
		if ($('proposalPreview') == null) return;
	
		scrOfX = $(window).getScroll().x;
		scrOfY = $(window).getScroll().y;
		
		clientWidth = $(window).getSize().x;
		clientHeight = $(window).getSize().y;

		newLeft = e.page.x+5;
		newTop = e.page.y+5;
		
		if ((newLeft-scrOfX + 410) > clientWidth)
		{
			newLeft = newLeft - 420;
		}
		if ((newTop-scrOfY + 310) > clientHeight)
		{
			newTop = newTop - 320;
		}
		
		$('proposalPreview').setStyles({
			'left': newLeft,
			'top': newTop
		});
	}
})

