var img_01 = {

	onAdd : function(widget, parent, editor) {
		if($('#img_01_upload_form').length==0) {
			$(	'<div class="img_upload_form_outer">'+
				'<form id="img_01_upload_form" action="/app/site/imageUpload" method="POST" enctype="multipart/form-data">'+
				'<input id="img_01_file" type="file" name="uploadedfile" />'+
				'<input id="submitBtn" type="submit"  value="Upload"/>'+
				'</form></div>'	).appendTo('body');
			
			$('#img_01_file').change(function() {
				$("#img_01_upload_form").ajaxSubmit({
					beforeSubmit: function(a,f,o) {
						showBlockerWithMessage('Uploading ...');
					},
					success: function(data) {
						
						var __tempPreloadImg = null;
						
						if(data=="ERROR") {
							alert(data);
							hideBlocker();
						}
						else {
							var widget = $('#'+$('#img_01_file').attr('widget'));
							var imgElem = widget.find('img').first();
							if($('#img_01_file').attr('itype') == 'main') {
								
								showBlockerWithMessage('Loading Image ...');
								
								// clear crop when primary image changes
								widget[0].data.setExtraField('Crop', 'left', 0);
								widget[0].data.setExtraField('Crop', 'top', 0);
								widget[0].data.setExtraField('Crop', 'width', 0);
								widget[0].data.setExtraField('Crop', 'height', 0);
								$('.img_crop .crop_outline').css({
									'left':'0px',
									'top':'0px',
									'width':'100%',
									'height':'100%'
								});
								widget.css({ width: 'auto', height: 'auto' });
								widget.find('img').first().css({ 'margin-left': '0px', 'margin-top': '0px' });
								
								__tempPreloadImg = new Image(); 
								__tempPreloadImg.src = data;
								__tempPreloadImg.onload = function() {
									widget[0].data.setField('src', data);
									imgElem.attr('src', data);
									imgElem.attr('primary', data);
									hideBlocker();
								}
								
							}
							else {
								showBlockerWithMessage('Loading Image ...');
								__tempPreloadImg = new Image(); 
								__tempPreloadImg.src = data;
								__tempPreloadImg.onload = function() {
									widget[0].data.setField('rollover', data);
									imgElem.attr('rollover', data);
									hideBlocker();
								}
							}
							editor.setDirty();
						}
						
					},
					error: function(data) {
						alert("Error Uploading Image");
						hideBlocker();
					}
				});
			});
		}
		
		if($('.img_01_change_menu').length == 0) {
			$('<div class="img_01_change_menu"><div itype="main">Primary Image</div><div itype="rollover">Rollover Image</div></div>').appendTo('body');
		}
		
	},
	
	onLoad: function(widget, parent, editor) {
	
		var imgElem = widget.find('img').first(); 
		
		var src = widget[0].data.getField('src');
		imgElem.attr('src', src);
		
		var tooltip = widget[0].data.getSetting('title');
		imgElem.attr('alt', tooltip);
		imgElem.attr('title', tooltip);
		
		var link = widget[0].data.getSetting('link');
		if(link!='' && link!=null && link!=undefined) {
			widget.find('a').first().attr('href', link);
		}
		
		var cropL = widget[0].data.getExtraField('Crop', 'left');
		var cropT = widget[0].data.getExtraField('Crop', 'top');
		var cropW = widget[0].data.getExtraField('Crop', 'width');
		var cropH = widget[0].data.getExtraField('Crop', 'height');
		
		if(cropW!=0 && cropH!=0) {
		
			widget.css({
				width: cropW+'px',
				height: cropH+'px'
			});
			
			imgElem.css({
				'margin-left': (-cropL)+'px',
				'margin-top': (-cropT)+'px'
			});
			
		}
		
		imgElem.attr('primary', widget[0].data.getField('src'));
		imgElem.attr('rollover', widget[0].data.getField('rollover'));
		imgElem.attr('rover', widget[0].data.getSetting('rollover'));
		
	},
	
	onBeforeSave : function(widget, parent, editor) {
		var imgElem = widget.find('img').first();
		widget[0].data.setField('src', imgElem.attr('src'));
	},
	
	onResize : function(widget, parent, editor) {
		if(widget.height() > widget.parent().height()) {
			widget.parent().css('height', 'auto');
			//widget.parent().attr('uheight', 0);
			addToLayoutStyle(widget.parent(), 'height', 'auto');
		}
	},
	
	onOpenSettings : function(widget, parent, editor) {
		$('.img_settings .align').val(widget[0].data.getSetting('align'));
		$('.img_settings .tooltip').val(widget[0].data.getSetting('title'));
		$('.img_settings .link').val(widget[0].data.getSetting('link'));
		var rollover = widget[0].data.getSetting('rollover');
		if(rollover==null || rollover==undefined || rollover==0) {
			$('.img_settings .rollover_check').removeAttr('checked');	
		}
		else {
			$('.img_settings .rollover_check').attr('checked', 'checked');
		}		
	},
	
	onApplySettings : function(widget, parent, editor) {
		
		var imgElem = widget.find('img').first();
		
		widget[0].data.setSetting('align', $('.img_settings .align').val());
		applyStyleToParent(widget, 'text-align', $('.img_settings .align').val());
		/*
		widget[0].data.setSetting('size', $('#img_settings_size').val());
		if($('#img_settings_size').val()=='auto') {
			widget.parent().css('overflow-y', 'hidden');
			widget.parent().css('height', widget.parent().height()+'px');
			widget.parent().attr('uheight', widget.parent().height());
		}
		else {
			widget.parent().css('overflow-y', '');
			widget.parent().css('height', 'auto');
			widget.parent().attr('uheight', 0);
		}
		widget.css('width', $('#img_settings_size').val());
		*/
		
		var tooltip = $('.img_settings .tooltip').val();
		imgElem.attr('alt', tooltip);
		imgElem.attr('title', tooltip);
		widget[0].data.setSetting('title', tooltip);
		
		var link = $.trim($('.img_settings .link').val());
		if(link!='') {
			if(link.indexOf('http://')!=0) {
				link = 'http://' + link;
			}
			widget.find('a').first().attr('href', link);
		}
		else {
			widget.find('a').first().removeAttr('href');
		}
		widget[0].data.setSetting('link', link);
		
		var rollover = $('.img_settings .rollover_check').attr('checked') ? 1 : 0;
		widget[0].data.setSetting('rollover', rollover);
		imgElem.attr('rover', rollover);
		
		editor.setDirty();
		
		return true;
	},
	
	onOpenExtra : function(widget, parent, editor, extra) {
		
		var imgElem = widget.find('img').first();
	
		switch(extra) {
		
		case 'Crop':
			//$('.img_crop').css({visiblity:'hidden'});
		
			$('.img_crop .img img').css({width:'auto', height:'auto'});
			$('.img_crop .img img').attr('src', imgElem.attr('src'));
			$('.img_crop').css({width:'auto', height:'auto'});
			$('.img_crop .img').css({width:'auto', height:'auto'});
			
			setTimeout(function() {
			
				$('#img_crop_w').val($('.img_crop .img img').width());
				$('#img_crop_h').val($('.img_crop .img img').height());
			
				showAsPopup($('#img_01_Crop'));
				setTimeout(function() {
					
					var imgW = $('.img_crop .img. img').width();
					var imgH = $('.img_crop .img. img').height();
					var rctDim = null;
					rctDim = {
						'left': ((imgW*0.15))+'px',
						'top': ((imgH*0.15))+'px',
						'width': (imgW*0.7)+'px',
						'height': (imgH*0.7)+'px'
					};
					$('.img_crop .crop_outline').css(rctDim);
					
					// TODO: restore crop
					
				}, 0);
				img_01.attachMouseHandlers();
			}, 0);
			break;
			
		case 'Resize':
		
			$('.img_resize .img img').css({width:'auto', height:'auto'});
			$('.img_resize .img img').attr('src', imgElem.attr('src'));
			$('.img_resize').css({width:'auto', height:'auto'});
			$('.img_resize .img').css({width:'auto', height:'auto'});
			
			var cropL = widget[0].data.getExtraField('Crop', 'left');
			var cropT = widget[0].data.getExtraField('Crop', 'top');
			var cropW = widget[0].data.getExtraField('Crop', 'width');
			var cropH = widget[0].data.getExtraField('Crop', 'height');
			
			if(cropW!=0 && cropH!=0) {
				
				$('.img_resize .viewport').css({
					width: cropW+'px',
					height: cropH+'px'
				});
				
				$('.img_resize .img img').css({
					'margin-left': (-cropL)+'px',
					'margin-top': (-cropT)+'px'
				});
			
			}
			
			setTimeout(function() {
			
				var handle = $('._img_resize_handle');
				if(handle.length==0) {
					handle = $('<div class="_img_resize_handle"></div>');
					handle.appendTo('body');
				}
				handle.css({
					left: ($('.img_resize .viewport').offset().left + $('.img_resize .viewport').width() - 13) + 'px',
					top: ($('.img_resize .viewport').offset().top + $('.img_resize .viewport').height() - 13) + 'px'
				});
				
				var shadow = $('._img_resize_shadow');
				if(shadow.length==0) {
					shadow = $('<div class="_img_resize_shadow"></div>');
					shadow.appendTo('body');
				}
				shadow.css({
					left: $('.img_resize .viewport').offset().left + 'px',
					top: $('.img_resize .viewport').offset().top + 'px',
					width: $('.img_resize .viewport').width() + 'px',
					height: $('.img_resize .viewport').height() + 'px'
				});
			
			}, 10);
			
			
			break;
		}
		
	},
	
	onApplyExtra : function(widget, parent, editor, extra) {
		
		var imgElem = widget.find('img').first();
		
		switch(extra) {
			case 'Crop':
				var adjust = $('#img_crop_w').val() / $('.img_crop .img img').width();
				if(adjust<1) adjust=1;
				//alert(adjust);
				
				var cropRect = $('.img_crop .crop_outline');
				
				var cropL = adjust * parseInt(cropRect.css('left'));
				var cropT = adjust * parseInt(cropRect.css('top'));
				var cropW = adjust * cropRect.width();
				var cropH = adjust * cropRect.height();
				
				widget.css({
					width: cropW+'px',
					height: cropH+'px'
				});
				
				imgElem.css({
					'margin-left': (-cropL)+'px',
					'margin-top': (-cropT)+'px'
				});
				
				widget[0].data.setExtraField('Crop', 'left', cropL);
				widget[0].data.setExtraField('Crop', 'top', cropT);
				widget[0].data.setExtraField('Crop', 'width', cropW);
				widget[0].data.setExtraField('Crop', 'height', cropH);
				
				editor.setDirty();
				
				break;
		}
		return true;
	},
	
	onAction : function(widget, parent, editor, action) {
		switch(action) {
			case 'change':
				
				$('#img_01_file').attr('widget', widget.attr('id'));
				
				var rollover = widget[0].data.getSetting('rollover');
				if(rollover==null || rollover==undefined || rollover==0) {
					$('#img_01_file').attr('itype', 'main');
					$('#img_01_file').click();
				}
				else {
					// show the change menu
					var link = $('.widget_actions a[act="change"]');
					if(link.length > 0) {
						img_01.showChangeMenu(link);
					}
					else {
						$('#img_01_file').attr('itype', 'main');
						$('#img_01_file').click();
					}
				}
				break;
		}
	},
	
	onEvent : function(widget, parent, editor, event) {
		
		var imgElem = widget.find('img').first();
		
		switch(event) {
			case 'clear-crop':
				var imgW = $('.img_crop .img. img').width();
				var imgH = $('.img_crop .img. img').height();
				widget[0].data.setExtraField('Crop', 'left', 0);
				widget[0].data.setExtraField('Crop', 'top', 0);
				widget[0].data.setExtraField('Crop', 'width', 0);
				widget[0].data.setExtraField('Crop', 'height', 0);
				$('.img_crop .crop_outline').css({
					'left':'0px',
					'top':'0px',
					'width':'100%',
					'height':'100%'
				});
				widget.css({
					width: imgW+'px',
					height: imgH+'px'
				});
				imgElem.css({
					'margin-left': '0px',
					'margin-top': '0px'
				});
				editor.closePopup();
				editor.setDirty();
				break;
		}
		return true;
	},
	
	onBeforeStylesMenu : function(widget, parent, editor, property) {
		switch(property) {
			case 'border':
			case 'background':
			case 'shadow':
			case 'opacity':
				return true;
		}
		return false;
	},
	/*
	onResetStyles : function(widget, parent, editor, property) {
		applyStyleToParent(widget, 'background-color', 'transparent');
	},
	onApplyStyle : function(widget, parent, editor, property) {
		switch(property) {
			case 'background':
				var color = $('.background_edit .color').val();
				if(color.indexOf('#')!=0) color = '#' + color;
				applyStyleToParent(widget, 'background-color', color);
				return true;
		}
		return false; // returning false will let the editor run the default style setting routine
	},
	*/
	cropInProgress : false,
	moveInProgress : false,
	eventStartX : 0,
	eventStartY : 0,
	eventStartLeft : 0,
	eventStartTop : 0,
	eventStartWidth : 0,
	eventStartHeight : 0,
	currentCropHandle : 'lt',
	attachMouseHandlers : function() {
		$('.img_crop .handle').mousedown(function(event) {
			img_01.cropInProgress = true;
			img_01.eventStartX = event.pageX;
			img_01.eventStartY = event.pageY;
			img_01.eventStartLeft = parseInt($('.img_crop .crop_outline').css('left'));
			img_01.eventStartTop = parseInt($('.img_crop .crop_outline').css('top'));
			img_01.eventStartWidth = $('.img_crop .crop_outline').width();
			img_01.eventStartHeight = $('.img_crop .crop_outline').height();
			
			img_01.currentCropHandle = 'lt';
			
			if($(this).hasClass('h_lt')) {
				img_01.currentCropHandle = 'lt';
			}
			else if($(this).hasClass('h_t')) {
				img_01.currentCropHandle = 't';
			}
			else if($(this).hasClass('h_rt')) {
				img_01.currentCropHandle = 'rt';
			}
			else if($(this).hasClass('h_l')) {
				img_01.currentCropHandle = 'l';
			}
			else if($(this).hasClass('h_r')) {
				img_01.currentCropHandle = 'r';
			}
			else if($(this).hasClass('h_lb')) {
				img_01.currentCropHandle = 'lb';
			}
			else if($(this).hasClass('h_b')) {
				img_01.currentCropHandle = 'b';
			}
			else if($(this).hasClass('h_rb')) {
				img_01.currentCropHandle = 'rb';
			}
			
			$('.img_crop .img').mousemove(function(event) {
				event.stopPropagation();
				img_01.handleMouseMove(event);
				return false;
			});
			$(document).mouseup(function(event) {
				img_01.unattachMouseHandlers(event);
			});
			
			$(document).css('cursor', $(this).css('cursor'));
			
			$('.img_crop .handle').hide();
			
			return false;
		});
		
		$('.img_crop .crop_outline').mousedown(function(event) {
			img_01.moveInProgress = true;
			img_01.eventStartX = event.pageX;
			img_01.eventStartY = event.pageY;
			
			$('.img_crop *').mousemove(function(event) {
				event.stopPropagation();
				img_01.handleMouseMove(event);
				return false;
			});
			$(document).mouseup(function(event) {
				img_01.unattachMouseHandlers(event);
			});
			
			$(document).css('cursor', $(this).css('cursor'));
			
			$('.img_crop .handle').hide();
			
			return false;
		});
	},
	handleMouseMove: function(event) {
	
		var outl = $('.img_crop .crop_outline');
	
		if(img_01.cropInProgress==true) {
		
			if(event.pageX < $('.img_crop .img img').offset().left) return true;
			if(event.pageY < $('.img_crop .img img').offset().top) return true;
			if(event.pageX > $('.img_crop .img img').offset().left+$('.img_crop .img img').width()) return true;
			if(event.pageY > $('.img_crop .img img').offset().top+$('.img_crop .img img').height()) return true;
			
			if(img_01.currentCropHandle!='t' && img_01.currentCropHandle!='b') { // horiz allowed?
				switch(img_01.currentCropHandle) {
					case 'r':
					case 'rt':
					case 'rb':
						outl.css('width', (img_01.eventStartWidth + event.pageX - img_01.eventStartX)+'px');
						break;
					default:
						outl.css({
							left: (img_01.eventStartLeft + event.pageX - img_01.eventStartX)+'px',
							width: (img_01.eventStartWidth - event.pageX + img_01.eventStartX)+'px'
						});
						break;
				}
			}
			if(img_01.currentCropHandle!='l' && img_01.currentCropHandle!='r') { // vert allowed?
				switch(img_01.currentCropHandle) {
					case 'b':
					case 'lb':
					case 'rb':
						outl.css('height', (img_01.eventStartHeight + event.pageY - img_01.eventStartY)+'px');
						break;
					default:
						outl.css({
							top: (img_01.eventStartTop + event.pageY - img_01.eventStartY)+'px',
							height: (img_01.eventStartHeight - event.pageY + img_01.eventStartY)+'px'
						});
						break;
				}
			}
		
		}
		else if(img_01.moveInProgress==true) {
			var diffX = event.pageX - img_01.eventStartX;
			var diffY = event.pageY - img_01.eventStartY;
			outl.css({
				'left': (parseInt(outl.css('left'))+diffX)+'px',
				'top' : (parseInt(outl.css('top'))+diffY)+'px'
			});
			img_01.eventStartX = event.pageX;
			img_01.eventStartY = event.pageY;
		}
		
		return false;
	},
	unattachMouseHandlers: function(event) {
		var outl = $('.img_crop .crop_outline');
		var imgW = $('.img_crop .img. img').width();
		var imgH = $('.img_crop .img. img').height();
		
		// if crop falls outside image, consider only the portion inside
		/*
		var leftExt = parseInt(rect.css('left'))+imgW-1;
		if(leftExt<0) rect.css('left', (parseInt(rect.css('left'))-leftExt)+'px');
		var topExt = parseInt(rect.css('top'))+imgH-1;
		if(topExt<0) rect.css('top', (parseInt(rect.css('top'))-topExt)+'px');
		var widthExt = parseInt(rect.css('left'))+rect.width()+1;
		if(widthExt>0) rect.css('width', (rect.width()-widthExt)+'px');
		var heightExt = parseInt(rect.css('top'))+rect.height()+1;
		if(heightExt>0) rect.css('height', (rect.height()-heightExt)+'px');
		*/
		
		img_01.cropInProgress = false;
		img_01.moveInProgress = false;
		$('.img_crop *').unbind('mousemove');
		$(document).unbind('mouseup');
		$(document).css('cursor', 'auto');
		$('.img_crop .handle').show();
		return false;
	},

	showChangeMenu: function(link) {
		
		$('.img_01_change_menu > div').unbind('mouseover');
		$('.img_01_change_menu > div').mouseover(function() {
			$('.img_01_change_menu > div.hover').removeClass('hover');
			$(this).addClass('hover');
		});
		
		$('.img_01_change_menu > div').unbind('click');
		$('.img_01_change_menu > div').click(function() {
			img_01.hideChangeMenu();
			$('#img_01_file').attr('itype', $(this).attr('itype'));
			$('#img_01_file').click();			
		});
		
		showBlocker(true);
		
		$('.img_01_change_menu').css({
			left: link.offset().left + 'px',
			top: (link.offset().top + link.height()) + 'px'
		}).show();
		
		$('.blocker').click(function(i) {
			img_01.hideChangeMenu();
			return false;
		});
	},
	
	hideChangeMenu: function(link) {
		$('.img_01_change_menu').hide();
		$('.blocker').unbind('click');
		hideBlocker();
	}
};


var img_01_vm = {
	onMouseOver: function(img) {
		if($(img).attr('rover')==1) {
			var r = $(img).attr('rollover');
			if(r!=null && r!=undefined && r!='') {
				$(img).attr('src', r);
			}
		}
	},
	onMouseOut: function(img) {
		if($(img).attr('rover')==1) {
			var r = $(img).attr('primary');
			if(r!=null && r!=undefined && r!='') {
				$(img).attr('src', r);
			}
		}
	}
};