<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>
		List Manager
	</title>
</head>
<body>
<form id="form1" runat="server">
   <script type="text/javascript">
   if (window.attachEvent)
   {
       window.attachEvent("onload", initDialog);
   }
   else if (window.addEventListener)
   {
       window.addEventListener("load", initDialog, false);
   }
   function getRadWindow()
   {
       if (window.radWindow)
       {
           return window.radWindow;
       }
       if (window.frameElement && window.frameElement.radWindow)
       {
           return window.frameElement.radWindow;
       }
       return null;
   }
   
   var arg;
   var oSelect;
   
   function initDialog()
   {
       var clientParameters = getRadWindow().ClientParameters; //return the arguments supplied from the parent page
       oSelect = clientParameters.Select;
       window.setTimeout(function ()
	   {
	      for (var i=0; i< oSelect.length; i++)
	      {
             AddListBoxesItem(oSelect.options[i].text, oSelect.options[i].value);
	      }
	   }, 100);
   }
   </script>
   <asp:ScriptManager id="ScriptManager1" runat="server"></asp:ScriptManager>
<telerik:RadFormDecorator  id="RadFormDecorator" runat="server"></telerik:RadFormDecorator>
<fieldset><legend>Manage SELECT items</legend>
	<table border="0" cellpadding="1" cellspacing="0" style="width: 343px; font-size: 12px; font-family: Arial;">
		<tr>
			<td>Name: </td>
			<td style="width: 154px"><input type="text" id="SelectName" /></td>
	    </tr>
	    <tr>
            <td>Size: </td>
			<td style="width: 154px"><input type="text" id="SizeValue" onkeyup="SetSize()"/></td>
	    </tr>
	    <tr>
            <td>Multiple select: 
            </td>
            <td style="width: 154px"><input type="checkbox" id="multipleSelection" onclick="SetMultipleSelection()"  />
	    </tr>
	    <tr>
            <td>Default selection: 
                <br />
                <br />
            </td>
            <td style="width: 154px"><input type="checkbox" id="selectedItem" onclick="SetDefaultOption(this.checked)"  /><br />
                <br />
	    </tr>
	    <tr>
            <td style="height: 43px; padding-left: 2px;" valign="bottom">
                Item Text:<br />
                <input type="text" id="ItemText" style="width: 157px;" />
            </td>
            <td style="width: 154px; height: 43px; padding-right: 2px;" valign="bottom" >
                Item Value:<br /><input type="text" id="ItemValue" style="width: 157px" />
            </td>
            <td style="width: 58px; height: 43px;" valign="bottom"  >
                <input type="button" id="Insert" value="Insert" style="width: 55px" onclick="AddItem()" />
            </td>
	    </tr>
	    <tr>
	        <td colSpan="2">
	            <table cellpadding=1 cellspacing=0>
	            <tr>
	            <td width=50%>
	            <select size="5" id="NameDropDown" style="width: 157px" onchange="CopySelection(this.selectedIndex)" >
	            </select>
	            </td>
	            <td width=50%>
	            <select size="5" id="ValueDropDown" style="width: 157px" onchange="CopySelection(this.selectedIndex)" >
	            </select>
	            </td>
	            </tr>
	            </table>
	        </td>
	        <td style="width: 58px">
              <input type="button" id="Button1" value="Update" style="width: 55px" onclick="UpdateItem()" />
              <input type="button" id="Delete" value="Delete" style="width: 55px" onclick="DeleteItem()" /><br />
              <input type="button" id="Up" value="Up" onclick="MoveItem(1)" style="width: 55px" /><br />
              <input type="button" id="Down" value="Down" onclick="MoveItem(-1)" style="width: 55px" />
	        </td>
	    </tr>
	</table>
	 <input type="button" id="Ok" value="Ok" onclick="ApplyChages();return false;" style="width:55px" />
	 
	 
</fieldset>

	<script type="text/javascript">

		var selectName = document.getElementById("SelectName");
		var sizeValue = document.getElementById("SizeValue");
		var itemText = document.getElementById("ItemText");
		var itemValue = document.getElementById("ItemValue");
		var insertButton = document.getElementById("Insert");
		var deleteButton = document.getElementById("Delete");
		var upButton = document.getElementById("Up");
		var downButton = document.getElementById("Down");
		var updateButton = document.getElementById("Button1");
		var NameDropDown = document.getElementById("NameDropDown");
    var ValueDropDown = document.getElementById("ValueDropDown");
    
    var checkMultiSel = document.getElementById("multipleSelection");
    
    function SetName()
    {
        oSelect.removeAttribute("name");
        oSelect.removeAttribute("NAME");
        oSelect.setAttribute("NAME", selectName.value);
    }
    
    
    function SetSize()
    {
        oSelect.size = sizeValue.value;
    }
    
    function CopySelection(selItemIndex)
    {

    
        NameDropDown.options[selItemIndex].selected = true;
        ValueDropDown.options[selItemIndex].selected = true;        
        
        for (var i=0;  i < oSelect.length; i++)
        {
            oSelect.options[i].selected = false;
        }
        
        oSelect.options[selItemIndex].selected = true;
        itemText.value = NameDropDown.options[selItemIndex].text;
        itemValue.value = ValueDropDown.options[selItemIndex].text;
    }
    
    function DisableAll()
    {
        updateButton.disabled = true;
        deleteButton.disabled = true;
        upButton.disabled = true;
        downButton.disabled = true;
    }
    
    function EnableAll()
    {
        updateButton.disabled = false;
        deleteButton.disabled = false;
        upButton.disabled = false;
        downButton.disabled = false;
    }

    function AddItem()
    {
       var option1 = document.createElement('option');
       var option2 = document.createElement('option');
       var option3 = document.createElement('option');
       option1.text = itemText.value;
       option2.text= itemValue.value;
       option3.text = itemText.value;
       option3.value = itemValue.value;

       if (document.all) 
       {
           NameDropDown.add(option1, 0);
           ValueDropDown.add(option2, 0);
           oSelect.add(option3,0);
       }
       else 
       {
                NameDropDown.add(option1,NameDropDown.options[0]);
               ValueDropDown.add(option2,ValueDropDown.options[0]); 
               oSelect.add(option3,oSelect.options[0]);
          
       }
       
               
        // Validation: Empty Case
        if (NameDropDown.length == 0) DisableAll();
        else EnableAll(); 
    }

    function UpdateItem()
    {
        NameDropDown.options[NameDropDown.selectedIndex].text = itemText.value;
        ValueDropDown.options[ValueDropDown.selectedIndex].text = itemValue.value;
        oSelect.options[oSelect.selectedIndex].text = itemText.value;
        oSelect.options[oSelect.selectedIndex].value = itemValue.value;
    }
        
    function AddListBoxesItem(oText, oValue)
    {
        var option1 = document.createElement('option');
        var option2 = document.createElement('option');
        option1.text = oText;
        option2.text= oValue;
        
        if (document.all)
        {
            NameDropDown.add(option1);
            ValueDropDown.add(option2);
        } else {
            NameDropDown.add(option1,NameDropDown.options[NameDropDown.length]);
            ValueDropDown.add(option2,ValueDropDown.options[ValueDropDown.length]);
        }
 
    }

    function DeleteItem()
    {
        var keepFocus = NameDropDown.selectedIndex - 1;
        if (keepFocus < 0) keepFocus = 0; 
        NameDropDown.remove(NameDropDown.selectedIndex);
        ValueDropDown.remove(ValueDropDown.selectedIndex);
        oSelect.remove(oSelect.selectedIndex);
        
        NameDropDown.selectedIndex = keepFocus;
        ValueDropDown.selectedIndex = keepFocus;
        oSelect.selectedIndex = keepFocus;
        
        // Validation: Empty Case
        if (NameDropDown.length == 0) DisableAll();
        else EnableAll(); 
    }

    function MoveItem(oSign)
    {
        //oSing can be -1 or 1
       var selIndex = NameDropDown.selectedIndex;
       var txtIndex = NameDropDown.options[selIndex].text;
       var valueIndex = ValueDropDown.options[selIndex].text;
     
     
       switch (oSign)
       {
        case 1:       
           if (NameDropDown.selectedIndex == 0 || ValueDropDown.selectedIndex == 0) 
           {
               return false;
           }
        break;
        case -1:
           if (NameDropDown.selectedIndex == NameDropDown.length - 1 || ValueDropDown.selectedIndex == ValueDropDown.length - 1) 
           {
               return false;
           }
        break;
       }
       
       NameDropDown.remove(selIndex);
       ValueDropDown.remove(selIndex);
       oSelect.selectedIndex = selIndex;
       oSelect.remove(selIndex);
       
       
       var option1 = document.createElement('option');
       var option2 = document.createElement('option');
       var option3 = document.createElement('option');
       
       option1.text = txtIndex;
       option2.text = valueIndex;
       option3.text = txtIndex;
       option3.value = valueIndex;
       
       if (document.all)
       {
           NameDropDown.add(option1, selIndex - oSign);
           ValueDropDown.add(option2, selIndex - oSign);
           oSelect.add(option3, selIndex - oSign);
       } else {
           NameDropDown.add(option1, NameDropDown.options[selIndex - oSign]);
           ValueDropDown.add(option2, ValueDropDown.options[selIndex - oSign]);
           oSelect.add(option3, oSelect.options[selIndex - oSign]);
       }
       
       NameDropDown.selectedIndex = selIndex - oSign;
       ValueDropDown.selectedIndex = selIndex - oSign;
       oSelect.selectedIndex = selIndex - oSign;

    }


    function SetMultipleSelection()
    {
        if (checkMultiSel.checked)
        {
             oSelect.multiple = true;
        }
        else
        {
            oSelect.multiple = false;
        }
    }
    
    function SetDefaultOption(checked)
    {       
        var selDef = NameDropDown.selectedIndex;
        if(selDef < 0)
        {
            alert("To use the Default selection option you should select an item from the select fields below.");
        }
        else
        {
            if (checked)
            {
                ValueDropDown.options[selDef].style.backgroundColor = "cccccc";
                NameDropDown.options[selDef].style.backgroundColor = "cccccc";
                ValueDropDown.options[selDef].style.color = "red";
                NameDropDown.options[selDef].style.color = "red";
                
            }
            else
            {
                ValueDropDown.options[selDef].style.backgroundColor = "white";
                NameDropDown.options[selDef].style.backgroundColor = "white";
                ValueDropDown.options[selDef].style.color = "black";
                NameDropDown.options[selDef].style.color = "black";
            }
        } 
    }
    
  
    function ApplyChages()
	{
		SetName();
        getRadWindow().close(null); //use the close function of the getRadWindow to close the dialog and pass the arguments from the dialog to the callback function on the main page.
    }

	</script>	
	</form>
</body>
</html>