/*
 * Copyright © 2008-2009 RADactive srl - All Rights Reserved.
 * <www.RADactive.com>
 *  
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF 
 * ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED 
 * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
 * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT 
 * SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR 
 * ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN 
 * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE 
 * OR OTHER DEALINGS IN THE SOFTWARE.
 */

function _ILoad_MultipleImages()
{
}

_ILoad_MultipleImages.prototype.GetSettings = function(controlId)
{
    return eval(controlId + "_Settings");
}

_ILoad_MultipleImages.prototype.GetTotValuesField = function(controlId)
{
    var hfTotvalues = document.getElementById(controlId + "_TotValues");
    if (!hfTotvalues)
    {
    	// Create a new hidden field to store the value
	    hfTotvalues = document.createElement("input");
        hfTotvalues.setAttribute("type", "hidden");
        var hfTotvaluesName = controlId + "_TotValues"
        hfTotvalues.setAttribute("name", hfTotvaluesName);
        hfTotvalues.setAttribute("id", hfTotvaluesName);
	    hfTotvalues.setAttribute("value", "0");
        document.getElementById(controlId + "_ValuesManager").appendChild(hfTotvalues);
    }
    return hfTotvalues;
}

_ILoad_MultipleImages.prototype.GetTotValues = function(controlId)
{
    return parseInt(this.GetTotValuesField(controlId).value);
}

_ILoad_MultipleImages.prototype.SetTotValues = function(controlId, value)
{
    this.GetTotValuesField(controlId).value = value;
}

_ILoad_MultipleImages.prototype.AddValue = function(controlId, value, iconUrl)
{
    var settings = this.GetSettings(controlId);

	// Update the tot values hidden field
	var nValue = this.GetTotValues(controlId);
	var totValues = nValue + 1;
	this.SetTotValues(controlId, totValues);   
	
	if (settings.MultipleAddImageFirstIndex == -1)
	{
	    settings.MultipleAddImageFirstIndex = nValue;
	}
		
	// Create a new hidden field to store the value
	var hfValue = document.createElement("input");
    hfValue.setAttribute("type", "hidden");
    var hfValueName = controlId + "_Value_" + nValue;
    hfValue.setAttribute("name", hfValueName);
    hfValue.setAttribute("id", hfValueName);
    var hfValueValue = this.GetHiddenValue(controlId, value);
	hfValue.setAttribute("value", hfValueValue);
    document.getElementById(controlId + "_ValuesManager").appendChild(hfValue);
    
    // Update the image UI
    var template = document.getElementById(controlId + "_Template").innerHTML;
    var item = template + "";
    var itemId = controlId + "_Image_" + nValue;
    
    item = StringReplace(item, "__ILoad_MultipleImagesItemId__" + controlId, itemId);
    item = StringReplace(item, "$CONTROLID$", controlId);
    item = StringReplace(item, "$VALUEINDEX$", nValue);

    var finalIconUrl = this.GetIconUrl(controlId, value, iconUrl);      	
    var imageHtml = "<img src=\"" + finalIconUrl + "\" alt=\"\" title=\"Click here to open the image preview...\" style=\"border:none;\" id=\"" + controlId + "_Image_" + nValue + "_Img\" />";
    item = StringReplace(item, "$IMAGE$", imageHtml);
        
    if (settings.IsMultipleAddImage)
    {
        settings.MultipleAddImageContent[settings.MultipleAddImageContent.length] = item;
    }
    else
    {       
        var fieldValues = this.GetAllFieldValues(controlId, nValue);

        document.getElementById(controlId + "_Images").innerHTML += item;
        
        this.SetAllFieldValues(controlId, fieldValues, nValue);
        
       	this.UpdatePanels(controlId);
       	
       	this.SetValuesChanged(controlId);
    }    
}

_ILoad_MultipleImages.prototype.AddValue_Multiple_Start = function(controlId)
{
    var settings = this.GetSettings(controlId);
    settings.IsMultipleAddImage = true;
    settings.MultipleAddImageFirstIndex = -1;
    if (settings.MultipleAddImageContent == null)
    {
        settings.MultipleAddImageContent = new Array();
    }
    else
    {
        settings.MultipleAddImageContent.length = 0;
    }
}

_ILoad_MultipleImages.prototype.AddValue_Multiple_End = function(controlId, updateImages, dontSetValuesChanged)
{
    var settings = this.GetSettings(controlId);
    if (updateImages)
    {
        if (settings.MultipleAddImageFirstIndex != -1)
        {         
            var totValues = this.GetTotValues(controlId);
            var fieldValues = this.GetAllFieldValues(controlId, totValues);
            
            document.getElementById(controlId + "_Images").innerHTML += settings.MultipleAddImageContent.join("");
            
            this.SetAllFieldValues(controlId, fieldValues, totValues);
        }
        this.UpdatePanels(controlId);
    }
    settings.IsMultipleAddImage = false;
    settings.MultipleAddImageFirstIndex = -1;
    settings.MultipleAddImageContent.length = 0;
    
    if (!dontSetValuesChanged)
    {
        this.SetValuesChanged(controlId);
    }
}

_ILoad_MultipleImages.prototype.SetValue = function(controlId, valueIndex, value, iconUrl)
{
    // Update the hidden field that store the value
    var hfValue = document.getElementById(controlId + "_Value_" + valueIndex);
    var hfValueValue = this.GetHiddenValue(controlId, value);
	hfValue.setAttribute("value", hfValueValue);
	
    var finalIconUrl = this.GetIconUrl(controlId, value, iconUrl); 
    document.getElementById(controlId + "_Image_" + valueIndex + "_Img").setAttribute("src", finalIconUrl);
    
    this.SetValuesChanged(controlId);
}

_ILoad_MultipleImages.prototype.GetValue = function(controlId, valueIndex, value)
{
    var hfValue = document.getElementById(controlId + "_Value_" + valueIndex);
    return this.GetWebImage(controlId, hfValue.value, true);
}

_ILoad_MultipleImages.prototype.SetValuesChanged = function(controlId, value)
{
    if (typeof value == "undefined")
    {
        value = true;
    }

    var name = controlId + "_ValuesChanged";
    var o = document.getElementById(name);

    if (!o)
    {
        o = document.createElement("input");
        o.setAttribute("type", "hidden");
        o.setAttribute("name", name);
        o.setAttribute("id", name);
        document.getElementById(controlId + "_ValuesManager").appendChild(o);
    }

    if (o)
    {
        if (value)
        {
            o.value = "1";
        }
        else
        {
            o.value = "0";
        }
    }
    
    if (value)
    {
        this.RaiseValuesChangedAutoPostBack(controlId);
    }
}

_ILoad_MultipleImages.prototype.Initialize = function(controlId)
{
    this.SetValuesChanged(controlId, false);;
}

_ILoad_MultipleImages.prototype.RaiseValuesChangedAutoPostBack = function(controlId)
{
    var settings = this.GetSettings(controlId);

    if (settings.AutoPostBack)
    {
        if (settings.ValuesChangedPostBackEventReference)
        {
            eval(settings.ValuesChangedPostBackEventReference);
        }
    }
}

_ILoad_MultipleImages.prototype.GetWebImage = function(controlId, value, decodeIndex)
{
    if (value != "")
    {
        if (Radactive.WebControls.ILoad.IsWebImageReference(value))
        {
            // Use WebImage reference...
            var value2 = this.DeCompressWebImageReference(controlId, value);
            return Radactive.WebControls.ILoad.LoadWebImageFromReference(value2);
        }
        else
        {
            // Use standard xml index...            
            if (decodeIndex)
            {
                value = URLDecode(value);
            }
		    var webImage = new WebImage(value);
		    if (webImage.ImageDefinitionInternalCode == "")
		    {
			    // Safari bug
			    for(var i=0;i<10;i++)
			    {
				    webImage = new WebImage(newWebImage);
				    if (webImage.ImageDefinitionInternalCode != "")
				    {
					    break;
				    }
			    }
		    }

            return webImage;
        }
    }
    else
    {
        return null;
    }
}

_ILoad_MultipleImages.prototype.GetHiddenValue = function(controlId, value)
{
    var settings = this.GetSettings(controlId);
	
	if ((value != null) && (value != ""))
	{
		if (settings.UseWebImageReferences)
        {
            // Use WebImage reference...
		    if (typeof value == "string")
		    {
		        if (Radactive.WebControls.ILoad.IsWebImageReference(value))
		        {
		            if (settings.UseWebImageReferenceCompression)
                    {
		                return this.CompressWebImageReference(controlId, value);
		            }
		            else
		            {
		                return value;
		            }
		        }
		        else
		        {
		            var webImage = this.GetWebImage(controlId, value);
		            if (webImage)
		            {
    			        var result = webImage.GetReference();
    			        if (settings.UseWebImageReferenceCompression)
                        {
    			            result = this.CompressWebImageReference(controlId, result);
    			        }
    			        return result;
    			    }
    			    else
    			    {
    			        return "";
    			    }
			    }
		    }
		    else
		    {
                var result = value.GetReference();
		        if (settings.UseWebImageReferenceCompression)
                {
		            result = this.CompressWebImageReference(controlId, result);
		        }
		        return result;
		    }
		}
		else
		{
		    // Use the standard xml index...
            if (typeof value == "string")
		    {
		        if (Radactive.WebControls.ILoad.IsWebImageReference(value))
		        {
		            var value2 = this.DeCompressWebImageReference(controlId, value);
		            var webImage = this.GetWebImage(controlId, value2);
		            if (webImage)
		            {
			            return URLEncode(webImage.GetIndex());
			        }
			        else
			        {
			            return "";
			        }
		        }
		        else
		        {
			        return URLEncode(value);
			    }
		    }
		    else
		    {
		        return URLEncode(value.GetIndex());
		    }
		}
	}
	else
	{
	    return "";
	}
}

_ILoad_MultipleImages.prototype.GetIconUrl = function(controlId, value, iconUrl)
{
    if (iconUrl)
    {
        return iconUrl;
    }
    else
    {
   	    var webImage = null;
	    if ((value != null) && (value != ""))
	    {
		    if (typeof value == "string")
		    {
		        if (Radactive.WebControls.ILoad.IsWebImageReference(value))
		        {
		            var value2 = this.DeCompressWebImageReference(controlId, value);
		        
		            var settings = this.GetSettings(controlId);
		            var url = settings.ImagePreview_Url;
		            url += "&fr=" + URLEncode(Date());
		            url += "&wir=" + URLEncode(value2);
		            return url;
		        }
		        else
		        {
			        webImage = this.GetWebImage(controlId, value, false);
			    }
		    }
		    else
		    {
			    webImage = value;
		    }
	    }

        if (webImage)
        {
	        var resize = webImage.GetResizeByName("ILMIIcon1");
	        if (resize)
	        {
	            return resize.FileUrl_NoCache();
	        }
	    }
	    
	    return "";
	}
}

_ILoad_MultipleImages.prototype.CompressWebImageReference = function(controlId, value)
{
    var settings = this.GetSettings(controlId);
    return StringReplace(value, settings.DTF, settings.DTFPH);
}

_ILoad_MultipleImages.prototype.DeCompressWebImageReference = function(controlId, value)
{
    var settings = this.GetSettings(controlId);
    return StringReplace(value, settings.DTFPH, settings.DTF);
}

_ILoad_MultipleImages.prototype.GetILoadControlId = function(controlId)
{
    var settings = this.GetSettings(controlId);
    return settings.ILoad_ControlId;
}

_ILoad_MultipleImages.prototype.AddSingleImage = function(controlId)
{
    var settings = this.GetSettings(controlId);
    settings.ILoad_ValueIndex = -1;
    var iLoadControlId = this.GetILoadControlId(controlId);   

    if (settings.MaxImageNumber > 0)
    {
        var totValues = this.GetTotValues(controlId);	
        var maxAllowedImages = settings.MaxImageNumber - totValues;
        if (maxAllowedImages <= 0)
        {
            return;
        }
    }

    Radactive.WebControls.ILoad.AddImage(iLoadControlId, false);
}

_ILoad_MultipleImages.prototype.AddMultipleImages = function(controlId)
{
    var iLoadControlId = this.GetILoadControlId(controlId);
    var settings = this.GetSettings(controlId);
    var url = settings.MultipleUploadManager_Url;
    url += "&controlId=" + URLEncode(controlId);
    
    var maxAllowedImages = 0;
    if (settings.MaxImageNumber > 0)
    {
        var totValues = this.GetTotValues(controlId);	
        maxAllowedImages = settings.MaxImageNumber - totValues;
        if (maxAllowedImages <= 0)
        {
            return;
        }
    }
    url += "&maxAllowedImages=" + URLEncode(maxAllowedImages);
    
    var result = Radactive.WebControls.ILoad.WindowOpen(iLoadControlId, "ILoad_MultipleImages_MU", url, 597, 397, true, true, false, "Multiple Upload", true);
}

_ILoad_MultipleImages.prototype.AddMultipleImages_Complete = function(controlId, w)
{
    var iLoadControlId = this.GetILoadControlId(controlId);   
    Radactive.WebControls.ILoad.WindowClose(iLoadControlId, "ILoad_MultipleImages_MU", "", w);
}

_ILoad_MultipleImages.prototype.EditImage = function(controlId, valueIndex)
{
    var webImage = this.GetValue(controlId, valueIndex);
    if (webImage)
    {
        var iLoadControlId = this.GetILoadControlId(controlId);    
        Radactive.WebControls.ILoad.SetValue(iLoadControlId, webImage);
        var settings = this.GetSettings(controlId);
        settings.ILoad_ValueIndex = valueIndex;
        Radactive.WebControls.ILoad.AddImage(iLoadControlId, true);
    }
}

_ILoad_MultipleImages.prototype.ChangeImage = function(controlId, valueIndex)
{
    var settings = this.GetSettings(controlId);
    settings.ILoad_ValueIndex = valueIndex;
    var iLoadControlId = this.GetILoadControlId(controlId); 
    Radactive.WebControls.ILoad.AddImage(iLoadControlId, false);
}

_ILoad_MultipleImages.prototype.PreviewClick = function(controlId, valueIndex)
{
    var settings = this.GetSettings(controlId);
    if (settings.LaunchEditOnImageClick)
    {
        this.EditImage(controlId, valueIndex);
    }
    else
    {
        this.PreviewImage(controlId, valueIndex);
    }
}

_ILoad_MultipleImages.prototype.PreviewImage = function(controlId, valueIndex)
{
    var webImage = this.GetValue(controlId, valueIndex);
    if (webImage)
    {
        var iLoadControlId = this.GetILoadControlId(controlId);    
        Radactive.WebControls.ILoad.SetValue(iLoadControlId, webImage);
        Radactive.WebControls.ILoad.ShowImagePreview(iLoadControlId);
    }
}

_ILoad_MultipleImages.prototype.RemoveImage = function(controlId, valueIndex)
{
	if (!window.confirm("Are you sure?"))
	{
		return;
	}
	
	// Update the tot values hidden field
	var nValue = this.GetTotValues(controlId);
	var totValues = nValue - 1;
	this.SetTotValues(controlId, totValues);   
	
	var settings = this.GetSettings(controlId);
	
	// Copy n+1 values to n
	for(var i=valueIndex;i<totValues;i++)
	{
	    var i2 = i+1;
	    
	    document.getElementById(controlId + "_Value_" + i).value = document.getElementById(controlId + "_Value_" + i2).value;	    
	    document.getElementById(controlId + "_Image_" + i + "_Img").setAttribute("src", document.getElementById(controlId + "_Image_" + i2 + "_Img").getAttribute("src"));
	
	    this.SetFieldValues(controlId, i, this.GetFieldValues(controlId, i2));
	}
	
	// Remove the last element
	document.getElementById(controlId + "_ValuesManager").removeChild(document.getElementById(controlId + "_Value_" + totValues));
	document.getElementById(controlId + "_Images").removeChild(document.getElementById(controlId + "_Image_" + totValues + "_Container"));
	document.getElementById(controlId + "_Images").removeChild(document.getElementById(controlId + "_Image_" + totValues + "_DragPlaceHolder_Before"));
	document.getElementById(controlId + "_Images").removeChild(document.getElementById(controlId + "_Image_" + totValues + "_DragPlaceHolder_After"));
	
    for (var i=0;i<settings.TotFields;i++)
    {
        var o = this.GetFieldElement(controlId, totValues, i);
        if (o)
        {
            o.parentNode.removeChild(o);
        }
    }
	
	this.UpdatePanels(controlId);
	
	this.SetValuesChanged(controlId);
}

_ILoad_MultipleImages.prototype.GetFieldId = function(controlId, index, key)
{
    return controlId + "_Image_" + index + "_Field_" + key;
}

_ILoad_MultipleImages.prototype.GetFieldElement = function(controlId, index, key)
{
    var fieldId = this.GetFieldId(controlId, index, key);
    return document.getElementById(fieldId);
}

_ILoad_MultipleImages.prototype.GetFieldValue = function(controlId, index, key)
{
    var o = this.GetFieldElement(controlId, index, key);
    if (o)
    {
        return o.value;
    }
    else
    {
        return "";
    }
}

_ILoad_MultipleImages.prototype.SetFieldValue = function(controlId, index, key, value)
{
    var o = this.GetFieldElement(controlId, index, key);
    
    if (!o)
    {
        var fieldId = this.GetFieldId(controlId, index, key);
	    o = document.createElement("input");
        o.setAttribute("type", "hidden");
        o.setAttribute("name", fieldId);
        o.setAttribute("id", fieldId);
        document.getElementById(controlId + "_ValuesManager").appendChild(o);
    }
    
    if (o)
    {
        o.value = value;
    }
}

_ILoad_MultipleImages.prototype.GetFieldValues = function(controlId, index)
{
    var settings = this.GetSettings(controlId);
    var result = [];
    for (var i=0;i<settings.TotFields;i++)
    {
        result[i] = this.GetFieldValue(controlId, index, i);
    }
    return result;
}

_ILoad_MultipleImages.prototype.SetFieldValues = function(controlId, index, values)
{
    var settings = this.GetSettings(controlId);
    
    for (var i=0;i<settings.TotFields;i++)
    {
        var done = false;
        if (values != null)
        {
            if (values.length >= settings.TotFields)
            {
                this.SetFieldValue(controlId, index, i, values[i]);
                done = true;
            }
        }
        if (!done)
        {
            this.SetFieldValue(controlId, index, i, "");
        }
    }
}

_ILoad_MultipleImages.prototype.GetAllFieldValues = function(controlId, totValues)
{
    if (!totValues)
    {
        totValues = this.GetTotValues(controlId);
    }
    var settings = this.GetSettings(controlId);
    
    var result = [];
    for(var i=0;i<totValues;i++)
    {
        result[i] = this.GetFieldValues(controlId, i);
    }

    return result;
}

_ILoad_MultipleImages.prototype.SetAllFieldValues = function(controlId, values, totValues)
{
    if (!totValues)
    {
        totValues = this.GetTotValues(controlId);
    }
    var settings = this.GetSettings(controlId);
    
    for(var i=0;i<totValues;i++)
    {
        if ((values) && (i < values.length))
        {
            this.SetFieldValues(controlId, i, values[i]);
        }
        else
        {
            for(var n=0;n<settings.TotFields;n++)
            {                
                this.SetFieldValue(controlId, i, n, "");
            }
        }
    }
}

_ILoad_MultipleImages.prototype.RemoveAllImages = function(controlId, skipConfirmation, dontSetValuesChanged)
{
    if (!skipConfirmation)
    {
	    if (!window.confirm("Are you sure?"))
	    {
	        return;
	    }
	}
	
	var totValues = this.GetTotValues(controlId); 
	
	for(var i=0;i<totValues;i++)
	{
    	document.getElementById(controlId + "_ValuesManager").removeChild(document.getElementById(controlId + "_Value_" + i));
	}
	
	this.SetTotValues(controlId, 0); 
	
    document.getElementById(controlId + "_Images").innerHTML = "";
    this.UpdatePanels(controlId);
    
    if (!dontSetValuesChanged)
    {
        this.SetValuesChanged(controlId);
    }
}

_ILoad_MultipleImages.prototype.UpdatePanels = function(controlId)
{
	var totValues = this.GetTotValues(controlId);	
    var settings = this.GetSettings(controlId);
	
	if (totValues > 0)
	{
	    document.getElementById(controlId + "_ImageSelected").style.display = "inline";
	    document.getElementById(controlId + "_NoImageSelected").style.display = "none";
	    document.getElementById(settings.BtnRemoveAllImages_Id).disabled = false;
	}
	else
	{
	    document.getElementById(controlId + "_ImageSelected").style.display = "none";
	    document.getElementById(controlId + "_NoImageSelected").style.display = "inline";
	    document.getElementById(settings.BtnRemoveAllImages_Id).disabled = true;
	}
	
	if ((settings.MaxImageNumber <= 0) || (totValues < settings.MaxImageNumber))
	{
	    document.getElementById(settings.BtnAdd1Image_Id).disabled = false;
	    document.getElementById(settings.BtnAddMultipleImages_Id).disabled = false;
	}
	else
	{
	    document.getElementById(settings.BtnAdd1Image_Id).disabled = true;
	    document.getElementById(settings.BtnAddMultipleImages_Id).disabled = true;
	}
	
	for (var i=0;i<totValues; i++)
	{
	    this.UpdateEventHandlers(controlId, i);
	}
	
	var disabledEventHandler = function(e)
    {
        if (!e)
        {
            e = window.event;
        }

        if (typeof(e.preventDefault) != "undefined")
        {
            e.preventDefault();
        }

        return false;        
    }
    
    var oDivImages = document.getElementById(controlId + "_Images");
    oDivImages.onselectstart = disabledEventHandler;
    oDivImages.ondragstart = disabledEventHandler;
}

_ILoad_MultipleImages.prototype.UpdateEventHandlers = function(controlId, n)
{   
    var oDivContainer = document.getElementById(controlId + "_Image_" + n + "_Container");
    var oDivDragPlaceHolder_Before = document.getElementById(controlId + "_Image_" + n + "_DragPlaceHolder_Before");
    var oDivDragPlaceHolder_After = document.getElementById(controlId + "_Image_" + n + "_DragPlaceHolder_After");

    if (!oDivContainer)
    {
        return false;
    }
    
    var totValues = this.GetTotValues(controlId);
    var settings = this.GetSettings(controlId);
    var me = this;
    
    var setEndDragIndex = function(endDragIndex)
    {       
        if (settings.endDragIndex >= 0)
        {
            settings.oDraggedElement.parentNode.removeChild(settings.oDraggedElement);

            var oDivDragPlaceHolder_Before_old = document.getElementById(controlId + "_Image_" + settings.endDragIndex + "_DragPlaceHolder_Before");
            var oDivDragPlaceHolder_After_old = document.getElementById(controlId + "_Image_" + settings.endDragIndex + "_DragPlaceHolder_After");
            
            oDivDragPlaceHolder_Before_old.style.display = "none";
            oDivDragPlaceHolder_After_old.style.display = "none";            
        }
         
        if (endDragIndex >= 0)
        {        
            var oDivDragPlaceHolder_Before_new = document.getElementById(controlId + "_Image_" + endDragIndex + "_DragPlaceHolder_Before");
            var oDivDragPlaceHolder_After_new = document.getElementById(controlId + "_Image_" + endDragIndex + "_DragPlaceHolder_After");

            var oldEndDragIndex = settings.startDragIndex;
            if (settings.endDragIndex >= 0)
            {
                oldEndDragIndex = settings.endDragIndex;
            }
            
            if (endDragIndex == oldEndDragIndex)
            {
                if (settings.endDragIndex_After)
                {
                    oDivDragPlaceHolder_Before_new.style.display = "inline";
                    oDivDragPlaceHolder_After_new.style.display = "none";
                    
                    oDivDragPlaceHolder_Before_new.appendChild(settings.oDraggedElement);
                    settings.endDragIndex_After = false;
                }
                else
                {
                    oDivDragPlaceHolder_Before_new.style.display = "none";
                    oDivDragPlaceHolder_After_new.style.display = "inline";
                    
                    oDivDragPlaceHolder_After_new.appendChild(settings.oDraggedElement);
                    settings.endDragIndex_After = true;
                }
            }
            else
            {
                if (endDragIndex < oldEndDragIndex)
                {
                    oDivDragPlaceHolder_Before_new.style.display = "inline";
                    oDivDragPlaceHolder_After_new.style.display = "none";
                    
                    oDivDragPlaceHolder_Before_new.appendChild(settings.oDraggedElement);
                    settings.endDragIndex_After = false;
                }
                else
                {
                    oDivDragPlaceHolder_Before_new.style.display = "none";
                    oDivDragPlaceHolder_After_new.style.display = "inline";
                    
                    oDivDragPlaceHolder_After_new.appendChild(settings.oDraggedElement);
                    settings.endDragIndex_After = true;
                }
            }
        }
        
        settings.endDragIndex = endDragIndex;
    }
      
    var onMouseUp = function(e)
    {
        if (!e)
        {
            e =  window.event;
        }
        
        var startDragIndex = settings.startDragIndex;
        var endDragIndex = settings.endDragIndex;
        var endDragIndex_After = settings.endDragIndex_After;

        setEndDragIndex(-1);
        settings.startDragIndex = -1;
 
        if (window.document.removeEventListener)
        {
            window.document.removeEventListener('mouseup', onMouseUp, false);
        } else if (document.detachEvent)
        {
            window.document.detachEvent('onmouseup', onMouseUp);
        }
        
        if (settings.oDraggedElement.parentNode != null)
        {
            settings.oDraggedElement.parentNode.removeChild(settings.oDraggedElement);
        }
        settings.oDraggedElement = null;
        oDivContainer.style.display = "inline";
                
        for (var i=0;i<totValues; i++)
	    {
	        var oDivContainer2 = document.getElementById(controlId + "_Image_" + i + "_Container");
	        if (i == endDragIndex)
	        {
	            oDivContainer2.className="ILoad_MultipleImages_divContainer_Over";
	        }
	        else
	        {
	            oDivContainer2.className="ILoad_MultipleImages_divContainer";
	        }
	    }
	    
    	if (startDragIndex != endDragIndex)
	    {
	        if (endDragIndex < startDragIndex)
	        {
	            if (endDragIndex_After)
	            {
	                endDragIndex++;
	            }
	        }
	        else
	        {
	            if (!endDragIndex_After)
	            {
	                endDragIndex--;
	            }
	        }
        }
        
    	if (startDragIndex != endDragIndex)
	    { 
            var imageId0 = controlId + "_Image_" + startDragIndex + "_Img";    
            var oImage0 =  document.getElementById(imageId0);
            var imageSrc0 = oImage0.src;
            
            var hfValueName0 = controlId + "_Value_" + startDragIndex;
            var oHFValue0 = document.getElementById(hfValueName0);
            var hfValue0 = oHFValue0.value;
            
            var fieldValues0 = me.GetFieldValues(controlId, startDragIndex);

	        if (startDragIndex < endDragIndex)
	        {	        
                for (var i=startDragIndex;i<endDragIndex;i++)
                {
    	            var imageId1 = controlId + "_Image_" + i + "_Img"; 
    	            var oImage1 = document.getElementById(imageId1);
    	            var imageId2 = controlId + "_Image_" + (i+1) + "_Img"; 
    	            var oImage2 = document.getElementById(imageId2);
    	            
    	            oImage1.src = oImage2.src;
    	            
                    var hfValueName1 = controlId + "_Value_" + i;
                    var oHFValue1 = document.getElementById(hfValueName1);    	            
                    var hfValueName2 = controlId + "_Value_" + (i+1);
                    var oHFValue2 = document.getElementById(hfValueName2);   
                    
                    oHFValue1.value = oHFValue2.value;
                    
                    me.SetFieldValues(controlId, i, me.GetFieldValues(controlId, i+1));
                }                
            }
            else
            {
                for (var i=startDragIndex;i>endDragIndex;i--)
                {
    	            var imageId1 = controlId + "_Image_" + i + "_Img"; 
    	            var oImage1 = document.getElementById(imageId1);
    	            var imageId2 = controlId + "_Image_" + (i-1) + "_Img"; 
    	            var oImage2 = document.getElementById(imageId2);
    	            
    	            oImage1.src = oImage2.src;

                    var hfValueName1 = controlId + "_Value_" + i;
                    var oHFValue1 = document.getElementById(hfValueName1);    	            
                    var hfValueName2 = controlId + "_Value_" + (i-1);
                    var oHFValue2 = document.getElementById(hfValueName2);   
                    
                    oHFValue1.value = oHFValue2.value;
                    
                    me.SetFieldValues(controlId, i, me.GetFieldValues(controlId, i-1));          
                }
            }

            var imageId1 = controlId + "_Image_" + endDragIndex + "_Img"; 
            var oImage1 =  document.getElementById(imageId1);
            
            oImage1.src = imageSrc0;
            
            var hfValueName1 = controlId + "_Value_" + endDragIndex;
            var oHFValue1 = document.getElementById(hfValueName1);
            
            oHFValue1.value = hfValue0;
            
            me.SetFieldValues(controlId, i, fieldValues0);
            
            me.SetValuesChanged(controlId);
	    }

        document.getElementById(controlId + "_Content").style.cursor = "";
    }
    
    var onMouseDown = function(e)
    {
        if (!e)
        {
            e =  window.event;
        }
        
        var target = null;
        if (e.target) 
        {
            target = e.target;
        } else if (e.srcElement) 
        {
            target = e.srcElement;
        }
        if (target)
        {
	        if (target.nodeType == 3)
	        {
		        target = target.parentNode;
		    }
		}
        if (target.tagName != "DIV")
        {
            return true;
        }
        
        settings.startDragIndex = n;
        settings.endDragIndex = -1;
            	    
	    settings.oDraggedElement = oDivContainer.cloneNode(true);
        settings.oDraggedElement.id = controlId + "_Image_" + n + "_DraggedElement";
	    settings.oDraggedElement.className = "ILoad_MultipleImages_divContainer_Drag";
	    settings.oDraggedElement.onmousedown = null;
        settings.oDraggedElement.onmouseover = null;
        settings.oDraggedElement.onmouseout = null;
        oDivContainer.style.display = "none";
	    	    
        if (window.document.addEventListener)
        {
            window.document.addEventListener('mouseup', onMouseUp, false);
        } else if (document.attachEvent)
        {
            window.document.attachEvent("onmouseup", onMouseUp);
        }
                
        setEndDragIndex(n);
        document.getElementById(controlId + "_Content").style.cursor = "move";
    	    	    
	    return false;
    }
    
    var onMouseOver = function(e)
    {
        if (settings.startDragIndex >= 0)
        {
            if (settings.startDragIndex != n)
            {
                setEndDragIndex(n);
            }
        }
        else
        {
            oDivContainer.className="ILoad_MultipleImages_divContainer_Over";
        }
    }

    var onMouseOut = function(e)
    {
        if (settings.startDragIndex >= 0)
        {
        }
        else
        {
            oDivContainer.className="ILoad_MultipleImages_divContainer";
        }
    }

    if (settings.AllowSort)
    {       
        oDivContainer.onmousedown = onMouseDown;
        oDivContainer.style.cursor = "move";
    }

    oDivContainer.onmouseover = onMouseOver;
    oDivContainer.onmouseout = onMouseOut;
}

var ILoad_MultipleImages = new _ILoad_MultipleImages();