<%@ Control Language="C#" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI.Editor" TagPrefix="tools" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI.Widgets" TagPrefix="widgets" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI.Dialogs" TagPrefix="dialogs" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<dialogs:UserControlResources id="dialogResources" runat="server" />

<script type="text/javascript">
Type.registerNamespace("Telerik.Web.UI.Widgets");

Telerik.Web.UI.Widgets.ImageProperties = function(element)
{
	Telerik.Web.UI.Widgets.ImageProperties.initializeBase(this, [element]);
	this._clientParameters = null;
	this._allowedASCII = new Array(8, 16, 35, 36, 37, 39, 45, 46);
	this._constrainDimentions = false;
	this._ratio = 0;
}

Telerik.Web.UI.Widgets.ImageProperties.prototype = {
	initialize : function() 
	{
		Telerik.Web.UI.Widgets.ImageProperties.callBaseMethod(this, 'initialize');
		
		this._setupChildren();
	},
	
	dispose : function() 
	{
	    $clearHandlers(this._imageWidth);
	    $clearHandlers(this._imageHeight);
	    $clearHandlers(this._constrainButton);
	    $clearHandlers(this._insertButton);
	    $clearHandlers(this._cancelButton);
	
		Telerik.Web.UI.Widgets.ImageProperties.callBaseMethod(this, 'dispose');
	},
	
	clientInit : function(clientParameters)
	{
		this._originalImage = clientParameters.Element;
		this._colors = clientParameters.Colors;
		this._editor = clientParameters.Editor;
		this._cssClasses = clientParameters.CssClasses;
		this._loadImageProperties();
	},
	
	_loadImageProperties : function()
	{
	    var currentImage = this._originalImage.cloneNode(true);
	    
	    this._imageWidth.value = this._getOriginalWidth(this._originalImage);
	    this._imageHeight.value = this._getOriginalHeight(this._originalImage);
	    this._ratio = this._imageWidth.value / this._imageHeight.value;
	    
	    this._imageSrc.set_value(currentImage.getAttribute("src", 2));
	    this._imageSrc.set_editor(this._editor);
	    
	    this._imageAlt.value = this._getAttribute(currentImage, "alt");
	    this._imageLongDecs.value = this._getAttribute(currentImage, "longDesc");
	    this._imageAlignment.setTagName("IMG");
	    this._imageAlignment.updateValue(currentImage.align, "");
	    
	    this._verticalSpacingSpinBox.set_value(this._getAttribute(currentImage, "vspace"));
		this._horizontalSpacingSpinBox.set_value(this._getAttribute(currentImage, "hspace"));
		if(currentImage.border) this._borderWidthSpinBox.set_value(currentImage.border);
		
		//Set colors to the color picker
		this._colorPicker.set_items(this._colors);
		var borderColor = currentImage.style.borderColor.toUpperCase();
		this._colorPicker.set_color(borderColor);
		
		//Set css class names to the css dropdown and selects the one of the selected image if existing
		this._imageCssClassList.set_items(this._cssClasses);
		
		if(currentImage.className != null && currentImage.className != "")
		{
		    this._imageCssClassList.updateValue(currentImage.className);
		}	
	},
	
	_validateNumber : function(e)
    {   
	    if (window.event != null)
	    {
		    e = window.event;
	    }
	    if (((e.keyCode >= 48) && (e.keyCode <= 57)) ||
		    ((e.keyCode >= 96) && (e.keyCode <= 105)) ||
		    (this._inArray(this._allowedASCII, e.keyCode)))
	    {
		    return true;
	    }
	    else
	    {
		    if (e.preventDefault)
		    {
			    e.preventDefault();
			    e.stopPropagation();
		    }
		    return false;
	    }
    },
    
    
    _inArray : function (value, code)
    {
        for (var i = 0; i < value.length; i++) 
        {
            if (value[i] === code) {
                return true;
            }
        }
        return false;
    },
    
    _validateDimension : function(e, isWidthRuling)
    {
	    if (!this._validateNumber(e))
	    {
		    return false;
	    }
	    if (this._constrainDimentions)
	    {
		    var dependantControl = null;
		    var rulingControl = null;
		    var ratio = 0;

		    if (isWidthRuling)
		    {
			    dependantControl = this._imageHeight;
			    rulingControl = this._imageWidth;
			    ratio = 1/this._ratio;
		    }
		    else
		    {
			    dependantControl = this._imageWidth;
			    rulingControl = this._imageHeight;
			    ratio = this._ratio;
		    }
		    dependantControl.value = Math.ceil(rulingControl.value * ratio);
	    }
	    return true;
    },
	
	_getOriginalWidth : function(currentImage)
	{
	    if (!currentImage) return "";
	    
	    //Make 4 attempts to obtain width - 1)from style, 2) from attribute 3) from client size
	    var width = "";
	    
	    if (currentImage.style.width)
	    {
	        width = currentImage.style.width;
	    }
	    
	    //Try to obtain the value from the attribute.
	    if (!width)
	    {
            width = currentImage.getAttribute("width");
        }
        
        //Try script property
	    if (!width)
	    {
            width = currentImage.width;
        }
        
        if (!width)
        {
            width = currentImage.offsetWidth;
        }
        
        //Convert to int
        if (width) width = parseInt(width);
        
        return width;
	},
	
	_getOriginalHeight : function(currentImage)
	{
	    if (!currentImage) return "";
	    
	    //Make 4 attempts to obtain height - 1)from style, 2) from attribute 3) from client size
	    var height = "";
	    
	    if (currentImage.style.height)
	    {
	        height = currentImage.style.height;
	    }
	    
	    //Try to obtain the value from the attribute.
	    if (!height)
	    {
            height = currentImage.getAttribute("height");
        }
        
        //Try script property
	    if (!height)
	    {
            height = currentImage.height;
        }
        
        if (!height)
        {
            height = currentImage.offsetHeight;
        }
        
        //Convert to int
        if (height) height = parseInt(height);
        
        return height;
	},

	_getModifiedImage : function()
	{
	    var resultImage =  this._originalImage.ownerDocument.createElement("IMG");
	    
	    //Make sure the image src attribute is set before the widht/height, as setting the src causes IE to add width and height attributes expicitly
	    this._setAttribute(resultImage, "src", this._imageSrc.get_value());

	    this._setDimensionAttribute(resultImage, "width", this._imageWidth.value);
	    this._setDimensionAttribute(resultImage, "height", this._imageHeight.value);
	    this._setAttribute(resultImage, "alt", this._imageAlt.value);
	    this._setAttribute(resultImage, "longDesc", this._imageLongDecs.value);
	    resultImage.align = this._imageAlignment.getAlign();
	    this._setIntAttribute(resultImage, "hspace", this._horizontalSpacingSpinBox.get_value());
	    this._setIntAttribute(resultImage, "vspace", this._verticalSpacingSpinBox.get_value());

	    var borderSize = parseInt(this._borderWidthSpinBox.get_value());
        
        if (!isNaN(borderSize) && borderSize >= 0) 
        {
            resultImage.border = borderSize;
        }
        else
        {
            resultImage.removeAttribute("border", false);
        }
	    
	    if(this._colorPicker.get_color())
	    {
	        resultImage.style.borderColor = this._colorPicker.get_color();
	    }
	    
	     this._setClass(resultImage, this._imageCssClassList);

	    return resultImage;
	    
	},
	
	_setDimensionAttribute : function(image, attributeName, attributeValue)
	{
	    image.removeAttribute(attributeName);
	    
	    if (image.style.removeAttribute)
	    {
		    image.style.removeAttribute(attributeName, false);
	    }
	    else
	    {
		    image.style[attributeName] = null;
	    }

	    var size = parseInt(attributeValue);
	    if (size)
	    {
		    image.style[attributeName] = size + "px";
	    }
	},
	
	_isValueValid : function(value)
    {
        var valueInt = parseInt(value, 10);
        
        if(!isNaN(valueInt))
        {
            var isValidPercent = (valueInt + '%' == value);
            var isValidPixel = (valueInt + 'px' == value.toLowerCase());
            var isValidNumber = (valueInt.toString() == value);
            if(isValidPercent || isValidPixel || isValidNumber)
            {
                return true;
            }
        }
        
        return false;
    },
	
	_setIntAttribute : function(image, attributeName, attributeValue)
	{
	    var intAttributeValue = parseInt(attributeValue);
        
        if (!isNaN(intAttributeValue) && intAttributeValue >= 0) 
        {
            image[attributeName] = intAttributeValue;
        }
        else
        {
            image.removeAttribute(attributeName, false);
        }
	},
	
	_getAttribute : function(image, attributeName)
	{
	    var attributeValue = "";
	    
	    if(image.getAttribute(attributeName))
	    {
	        attributeValue = image.getAttribute(attributeName);
	    }
	    
	    return attributeValue;
	},
	
	_setAttribute : function(image, attributeName, attributeValue)
	{
	    if(attributeValue.trim())
	    {
	        image.setAttribute(attributeName, attributeValue);
	    }
	    else
	    {
	        image.removeAttribute(attributeName, false);
	    }
	},
	
	_setClass : function(element, cssClassHolder)
	{
	    if(cssClassHolder.get_value() == "")
	    {
	        element.removeAttribute("className");
	    }
	    else
	    {
	        element.className = cssClassHolder.get_value();
	    }
	},
	
	_setupChildren : function()
	{
	    this._imageWidth = $get("ImageWidth");
	    this._imageHeight = $get("ImageHeight");
	    this._constrainButton = $get("ConstrainButton");
	    this._colorPicker = $find("BorderColor");
	    this._imageAlignment = $find("ImageAlignment");
	    this._imageAlt = $get("ImageAlt");
		this._imageLongDecs = $get("ImageLongDesc");
		this._imageSrc = $find("ImageSrc");
		this._horizontalSpacingSpinBox = $find("hSpacing");
		this._verticalSpacingSpinBox = $find("vSpacing");
		this._borderWidthSpinBox = $find("ImageBorderWidth");
		this._imageCssClassList = $find("ImageCssClass");

	    this._insertButton = $get("InsertButton");
	    this._insertButton.title = localization["OK"];
	    this._cancelButton = $get("CancelButton");
	    this._cancelButton.title = localization["Cancel"];

	    this._initializeChildEvents();
	},
	
	_initializeChildEvents : function()
	{
	    $addHandlers(this._imageWidth, {"keyup" : this._validateDimensionByWidth}, this);
	    $addHandlers(this._imageWidth, {"keydown" : this._validateNumber}, this);
	    $addHandlers(this._imageHeight, {"keyup" : this._validateDimensionByHeight}, this);
	    $addHandlers(this._imageHeight, {"keydown" : this._validateNumber}, this);
	    $addHandlers(this._constrainButton, {"click" : this._constrainClickHandler}, this);
	    $addHandlers(this._insertButton, {"click" : this._insertClickHandler}, this);
	    $addHandlers(this._cancelButton, {"click" : this._cancelClickHandler}, this);
	},
	
	_constrainClickHandler : function(e)
	{
        this._constrainDimentions = !this._constrainDimentions;
       
        if(this._constrainDimentions)
        {
            this._imageHeight.value = Math.ceil(this._imageWidth.value / this._ratio);
            Sys.UI.DomElement.addCssClass(this._constrainButton.parentNode, "toggle"); 
        }
        else
        {
            Sys.UI.DomElement.removeCssClass(this._constrainButton.parentNode, "toggle");
        }
        
        //needed to cancel the postback that the button causes in FF
        return $telerik.cancelRawEvent(e);
	},
	
	_validateDimensionByWidth : function(e)
	{
	    this._validateDimension(e, true);
	},
	
	_validateDimensionByHeight : function(e)
	{
	    this._validateDimension(e, false);
	},
	
	_insertClickHandler : function(e)
    {
		Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().close({ Result : this._getModifiedImage() });
    },
    
     _cancelClickHandler : function(e)
    {
		Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().close();
    }
}

Telerik.Web.UI.Widgets.ImageProperties.registerClass('Telerik.Web.UI.Widgets.ImageProperties', Telerik.Web.UI.RadWebControl, Telerik.Web.IParameterConsumer);
</script>
<style type="text/css">

</style>
<table cellspacing="0" cellpadding="0" class="rade_dialog ImageProperties" style="width: 100%;">
	<tr>
		<td>
			<div class="propertyLabel">
				<script type="text/javascript">
				document.write(localization["Width"]);
				</script>:
			</div>
		</td>
		<td>
			<input type="text" id="ImageWidth" style="width: 120px;" />
			px
		</td>
		<td rowspan="2">
			<style type="text/css">
			.ConstrainButton
			{
				position: static !important;
				margin-top: -2px;
			}
			</style>
			<ul>
				<li class="ConstrainProportions">
					<button id="ConstrainButton" class="ConstrainButton">&nbsp;</button>
				</li>
			</ul>
		</td>
	</tr>
	<tr>
		<td>
			<div class="propertyLabel">
				<script type="text/javascript">
				document.write(localization["Height"]);
				</script>:
			</div>
		</td>
		<td>
			<input type="text" id="ImageHeight" style="width: 120px;" />
			px
		</td>
	</tr>
	<tr>
		<td>
			<div class="propertyLabel">
				<script type="text/javascript">
				document.write(localization["BorderColor"]);
				</script>:
			</div>
		</td>
		<td colspan="2">
			<tools:ColorPicker id="BorderColor" runat="Server" />
		</td>
	</tr>
	<tr>
		<td>
			<div class="propertyLabel">
				<script type="text/javascript">
				document.write(localization["BorderWidth"]);
				</script>:
			</div>
		</td>
		<td colspan="2">
			<tools:EditorSpinBox id="ImageBorderWidth" runat="server" />
		</td>
	</tr>
	<tr>
		<td>
			<div class="propertyLabel">
				<script type="text/javascript">
				document.write(localization["ImageAltText"]);
				</script>:
			</div>
		</td>
		<td colspan="2">
			<input type="text" id="ImageAlt" style="width: 230px;" />
		</td>
	</tr>
	<tr>
		<td>
			<div class="propertyLabel">
				<script type="text/javascript">
				document.write(localization["LongDescription"]);
				</script>:
			</div>
		</td>
		<td colspan="2">
			<input type="text" id="ImageLongDesc" style="width: 230px;" />
		</td>
	</tr>
	<tr>
		<td>
			<div class="propertyLabel">
				<script type="text/javascript">
				document.write(localization["ImageAlignment"]);
				</script>:
			</div>
		</td>
		<td colspan="2">
			<tools:AlignmentSelector id="ImageAlignment" runat="Server" />
		</td>
	</tr>
	<tr>
		<td>
			<div class="propertyLabel">
				<script type="text/javascript">
				document.write(localization["ImageSrc"]);
				</script>:
			</div>
		</td>
		<td colspan="2">
			<tools:ImageDialogCaller id="ImageSrc" runat="server" />
		</td>
	</tr>
	<tr>
		<td>
			<div class="propertyLabel">
				<script type="text/javascript">
				document.write(localization["HorizontalSpacing"]);
				</script>:
			</div>
		</td>
		<td colspan="2">
			<tools:EditorSpinBox id="hSpacing" runat="server" />
		</td>
	</tr>
	<tr>
		<td>
			<div class="propertyLabel">
				<script type="text/javascript">
				document.write(localization["VerticalSpacing"]);
				</script>:
			</div>
		</td>
		<td colspan="2">
			<tools:EditorSpinBox id="vSpacing" runat="server" />
		</td>
	</tr>
	<tr>
		<td>
			<div class="propertyLabel">
				<script type="text/javascript">
				document.write(localization["CssClass"]);
				</script>:
			</div>
		</td>
		<td colspan="2">
			<tools:ApplyClassDropDown id="ImageCssClass" runat="Server" />
		</td>
	</tr>
	<tr>
		<td colspan="3" class="rade_bottomcell" style="padding: 10px 0 0 0;">
			<button type="button" id="InsertButton" style="width: 100px; margin-right: 8px;">
				<script type="text/javascript">
				setInnerHtml("InsertButton", localization["OK"]);
				</script>
			</button>
			<button type="button" id="CancelButton" style="width: 100px; margin-right: 8px;">
				<script type="text/javascript">
				setInnerHtml("CancelButton", localization["Cancel"]);
				</script>
			</button>
		</td>
	</tr>
</table>
