<%@ Control Language="C#" %>
<%@ 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.Editor.DialogControls" TagPrefix="dc" %>
<%@ 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.TableWizard = function(element)
{
	Telerik.Web.UI.Widgets.TableWizard.initializeBase(this, [element]);
	
	this._clientParameters = null;
	this._insertButton = null;
	this._cancelButton = null;
	this._table = null;
	this._originalSelectedCell = null;
	this._currentlyEditedCell = null;
	this._originalTableClone = null;
	this._selectedTabIndex = 0;
	
	this._selectedCell = null;
	this._selectedCellIndex	= -1;
	
	this._accessibleTableControl = null;
	this._tablePropertiesControl = null;
	this._tableDesignControl = null;
	this._cellPropertiesControl	= null;
	this._tablePreviewControl = null;
	
	//Due to dialog caching make and difference in sequence of initialization we will use a trick to call
	this._isLoaded = false;
}

Telerik.Web.UI.Widgets.TableWizard.prototype = {
	initialize : function() 
	{
		Telerik.Web.UI.Widgets.TableWizard.callBaseMethod(this, 'initialize');		
		this._setupChildren();			
	},
	
	_initializeControl : function()
	{	
	    var params = this._clientParameters;
	    if(params.selectedTabIndex && params.selectedTabIndex >= 0)
		{
		    this._tab.selectTab(params.selectedTabIndex);
		    this._selectedTabIndex = params.selectedTabIndex;
		}
		
		//New - initialize manually subcontrols		
		this._tableDesignControl.clientInit(params);
		this._tablePropertiesControl.clientInit(params);
	    this._cellPropertiesControl.clientInit(params);
	    this._accessibleTableControl.clientInit(params);
		
			
	    this.tabChangedHandler = Function.createDelegate(this, this._tabChangedHandler);    
		this._tab.add_tabChanged(this.tabChangedHandler);
		this._loadTableProperties();							
	},
	
	//Called also when a dilog is cached
	clientInit : function(clientParameters)
	{
		this._clientParameters = clientParameters;
		this._table = this._clientParameters.originalTable;		
		this._originalTableClone = this._clientParameters.tableToModify;
		this._originalSelectedCell = this._clientParameters.cellToModify;
		
		this._initializeControl();		
	},
	
	_tabChangedHandler : function (sender, args)
	{
	    var selectedTab = sender.get_selectedIndex();
	    this._initTabControl(selectedTab);
	    this._selectedTabIndex = selectedTab;
	},
	
	_loadTableProperties : function()
	{
	    this._initTabControl(this._selectedTabIndex); 
	},
	
	_initTabControl : function(selectedTab)
	{
	    switch(selectedTab)
	    {
	     case 0 : 
	        this._initDesigner();  
	        break;
	     case 1 :
	        this._initTableProperties();
	        break; 
	     case 2 :
	        this._initCellProperties();
	        break;
	     case 3 :
	        this._initAccessibleTable();
	        break;
	    }
	},
	
	_setupChildren : function()
	{		
	    this._tableDesignControl = $find("tableDesignPanel");
	    this._tablePropertiesControl = $find("tablePropertiesPanel");	    
	    this._cellPropertiesControl = $find("cellPropertiesPanel");	 
	    this._accessibleTableControl = $find("accessibilityPanel");
	 	    
	    this._tablePreviewControl = this._cellPropertiesControl.get_tablePreviewControl();
	    
	    this._insertButton = $get("InsertButton");
	    this._cancelButton = $get("CancelButton");
	    
	    this._tab = $find("TableWizardTab");
	    
	    this._initializeChildEvents();
	},
	
	_initializeChildEvents : function()
	{
	    $addHandlers(this._insertButton, {"click" : this._insertClickHandler}, this);
	    $addHandlers(this._cancelButton, {"click" : this._cancelClickHandler}, this);
	},	
	
	_getModifiedTable : function()
	{
	    this._accessibleTableControl.set_tableToModify(this._table.cloneNode(true));
	    this._originalTableClone = this._accessibleTableControl._updateTable();
	    
	    this._tablePropertiesControl.set_tableToModify(this._originalTableClone);
	    var modifiedTable = this._tablePropertiesControl._updateTable();
	    if(modifiedTable) this._originalTableClone = modifiedTable;
	    
	    return this._originalTableClone;
	},
	
	 _insertClickHandler : function(e)
    {
        if (!this._saveLastEditedCellProperties(false))
		{
			return;
		}
		Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().close({tableToModify : this._getModifiedTable() });
    },
    
     _cancelClickHandler : function(e)
    {
        if (this._table && this._table.parentNode) //TEKI: According to SAFARI parentNode could be null when Cancel is pressed
		this._table.parentNode.replaceChild(this._originalTableClone, this._table);
		this._table = this._originalTableClone;
	
		Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().close();
    },
    
    /////////////////////////////////////////////////////////
     _getCurrentlyEditedCell : function()
	{
		return this._currentlyEditedCell;
	},

	_onCellPropertiesSelectedCellChanged : function()
	{	    
		// Update the last edited cells
		var editedCells = this._tablePreviewControl.get_editedCells();
		this._cellPropertiesControl._updateMultiple(this._getModifyCellsForPreviewCells(editedCells));

		this._synchronizeSelectedCell();

		if (this._selectedCell)
		{
			this._currentlyEditedCell = this._selectedCell;
			this._cellPropertiesControl._loadPropertyValues(this._selectedCell);
		}
	},

	_onCellPropertiesSelectedMultipleCells : function()
	{
		this._cellPropertiesControl._clear();
	},


	_synchronizeSelectedCell : function()
	{
		var previewSelectedCell = this._tablePreviewControl.get_selectedCell();
		var previewTable = this._tablePreviewControl.get_previewTable();

		var previewTableRows = previewTable.rows;

		this._selectedCell = null;
		this._selectedCellIndex = -1;
		
		for (var i=0; i<previewTableRows.length; i++)
		{		    
			var previewTableCells = previewTableRows[i].cells;
			for (var j=0; j<previewTableCells.length; j++)
			{
				if (previewTableCells[j] == previewSelectedCell)
				{
					this._selectedCell = this._table.rows[i].cells[j];
					
					this._selectedCellIndex = j;
					return;
				}
			}
		}
	},
	
	_synchronizeSelection : function(selectedCell, selectedIndex)
	{
	    this._selectedCell = selectedCell;
		this._selectedCellIndex = selectedIndex;
	},

	/**
	*
	* For a given preview cell return the model cell
	*
	*/
	_getModifyCellForPreviewCell : function(previewCell)
	{
		var rowIndex  = previewCell.parentNode.rowIndex;
		var cellIndex = this._tablePreviewControl._getCellIndex(previewCell);// PreviewCell.cellIndex; TEKI - SAFARI support! Defined in Common.js

		return this._table.rows[rowIndex].cells[cellIndex];
	},

	_getModifyCellsForPreviewCells : function(previewCells)
	{
		var modifyCells = [];
		
		for (var i=0; i < previewCells.length; i ++) 
		{
			modifyCells.push(this._getModifyCellForPreviewCell(previewCells[i]));
		}
		
		return modifyCells;
	},

	_saveLastEditedCellProperties : function(saveSelectedCell)
	{
		if (this._currentlyEditedCell)
		{
			
			var selectedCells = this._tablePreviewControl.get_selectedCells();
			if (!this._cellPropertiesControl._updateMultiple(this._getModifyCellsForPreviewCells(selectedCells)))
			{
				return false;
			}
			if(!saveSelectedCell)
			{
			    this._selectedCell = null;
			    this._selectedCellIndex = -1;
			}
		}
		return true;
	},
	
	_initCellProperties : function()
	{
		/*WARNING! POSSIBLE CROSS REFERENCE! */
		var theTableWizardControl = this;
		this._tablePreviewControl._onSelectedCellChanged = function anon()
		{
			theTableWizardControl._onCellPropertiesSelectedCellChanged();
		};
		this._tablePreviewControl.deSelectAllCells();
		this._tablePreviewControl.set_allowMultiCellSelection(true);

		if(!this._originalSelectedCell) 
		{
			if(!this._selectedCell) 
				this._initSelectedCell();
		}
		else
		{
			this._selectedCell = this._originalSelectedCell;
			//Clear the originally selected cell.
			this._originalSelectedCell = null;
		}
		
		this._tablePreviewControl._updateTable(this._table, this._selectedCell);
		
		this._currentlyEditedCell = this._selectedCell;
		this._cellPropertiesControl.set_cellToModify(this._currentlyEditedCell);
		this._cellPropertiesControl._loadPropertyValues(this._currentlyEditedCell);
	},

	_initTableProperties : function()
	{
	    if(!this._originalSelectedCell) 
		{
		    if(!this._selectedCell) 
		        this._initSelectedCell();
		}
		else 
		{
		    this._selectedCell = this._originalSelectedCell;
		    //Clear the originally selected cell.
	        this._originalSelectedCell = null;
	    }
	    
		this._saveLastEditedCellProperties(true);
		this._tablePropertiesControl.set_tableToModify(this._table.cloneNode(true));
	},

	_initAccessibleTable : function()
	{
	    //Clear the originally selected cell.
	    this._originalSelectedCell = null;
	    
		this._saveLastEditedCellProperties(true);
		this._accessibleTableControl.set_tableToModify(this._table.cloneNode(true));		
	},

	_initSelectedCell : function()
	{
	    if (this._table.rows.length > 0)
	    {
		    if (this._table.rows[0].cells.length > 0)
		    {
			    this._selectedCell = this._table.rows[0].cells[0];
		    }
	    }
	},

	_initDesigner : function()
	{
	    //Clear the originally selected cell.
	    this._originalSelectedCell = null;	    
		this._saveLastEditedCellProperties(true);
		
		this._tableDesignControl.set_tableWizardControl(this);
		
		if(!this._selectedCell)
		    this._initSelectedCell();
		this._tableDesignControl.set_selectedCell(this._selectedCell);
	},
   
    
    //////////////////////////////////////////////////////////
    
    
    dispose : function() 
	{	
	    $clearHandlers(this._insertButton);
	    $clearHandlers(this._cancelButton);
	    
	    this._tab.remove_tabChanged(this.tabChangedHandler);
	    
	    this._clientParameters = null;
	    this._insertButton = null;
	    this._cancelButton = null;
	    this._table = null;
	    this._originalSelectedCell = null;
	    this._currentlyEditedCell = null;
	    this._originalTableClone = null;
	    this._selectedCell = null;
	    this._tablePreviewControl = null;
	    
	    this._accessibleTableControl = null;
	    this._tablePropertiesControl = null;
	    this._tableDesignControl = null;
	    this._cellPropertiesControl	= null;
	
		Telerik.Web.UI.Widgets.TableWizard.callBaseMethod(this, 'dispose');
	}
}

Telerik.Web.UI.Widgets.TableWizard.registerClass('Telerik.Web.UI.Widgets.TableWizard', Telerik.Web.UI.RadWebControl, Telerik.Web.IParameterConsumer);
</script>
<style type="text/css">
/* NEW TABLE WIZARD DIALOG */

#TableDesign_PreviewTableHolder
{
   clear: both;
   padding-top: 4px;
}

#TableDesign_PreviewTableHolder table
{
    clear: both;
}

.rade_dialog .spinList
{
    height: 26px;
}

.rade_dialog .spinItem span
{
    line-height: 26px;
}
/*.rade_dialog.reTableWizard
{
	height: 420px;
	float: left;
}

*+html .rade_dialog.reTableWizard
{
	height: 410px;
}

.rade_dialog.reTableWizard .dialogtabstrip
{
	width: 653px;
}

.rade_dialog.reTableWizard .dialogtabstrip .tabIcon
{
	display: none;
}

.rade_dialog.reTableWizard .customControl .rade_toolbar,
.rade_dialog.reTableWizard .customControl .rade_toolbar li
{
	background: none;
}

.rade_dialog.reTableWizard .rade_colorPickerContainer li,
.rade_dialog.reTableWizard .rade_alignmentContainer li
{
	height: 24px !important;
	line-height: 24px;
}

.rade_dialog.reTableWizard .customControl .rade_grip
{
	display: none;
}

.rade_dialog.reTableWizard #tableWizardControlButtons
{
	position: absolute;
	bottom: 0;
	left: 17px;
	width: 620px;
	border: 0;
	border-top: 1px solid #868686;
	
	padding: 0;
	margin: 0;
}

.rade_dialog.reTableWizard #tableWizardControlButtons .floatright
{
	margin: 8px 0 0;
	padding: 0;
}

.rade_dialog.reTableWizard #tableWizardControlButtons legend
{
	display: none;
}

.rade_dialog.reTableWizard #tableWizardControlButtons ul
{
	list-style-type: none;
	width: 150px;
}

.rade_dialog.reTableWizard table.tableDesignPreview
{
	border: 0;
	background: #b0b0b0;
	empty-cells: show;
	width: 310px;
	height: 256px;
}

.rade_dialog.reTableWizard table.tableDesignPreview td
{
	background: #ececec;
	padding: 0; margin: 0;
	cursor: pointer;
	border: 1px solid #fdfdfd;
	width: auto !important;
}

.rade_dialog.reTableWizard table.tableDesignPreview td.reSelectedCell
{
	background: #cecece;
	border: 1px solid #d6d6d6;
}*/
/* END OF NEW TABLE WIZARD DIALOG */
</style>
<!-- table wizard -->
<table cellpadding="0" cellspacing="0" class="rade_dialog TableWizard" style="width: 100%;">
    <tr>
        <td class="rade_topcell">
            <!-- dialog tabstrip -->
            <widgets:SimpleTabStrip id="TableWizardTab" runat="server">
				<tabs>
					<widgets:SimpleTab Selected="true" Name="TableDesign" Text="Table Design" ContainerId="tableDesignRow"></widgets:SimpleTab>
					<widgets:SimpleTab Name="TableProperties" Text="Table Properties" ContainerId="tablePropertiesRow"></widgets:SimpleTab>
					<widgets:SimpleTab Name="CellProperties" Text="Cell Properties" ContainerId="cellPropertiesRow"></widgets:SimpleTab>
					<widgets:SimpleTab Name="Accessibility" Text="Accessibility" ContainerId="accessibilityRow"></widgets:SimpleTab>
				</tabs>
			</widgets:SimpleTabStrip>
			<!-- end of dialog tabstrip -->
        </td>
    </tr>
    <tr id="tableDesignRow">
        <td class="rade_middlecell" style="height: 400px; padding: 0; vertical-align: top;">
            <dc:TableDesign id="tableDesignPanel" runat="server"></dc:TableDesign>
        </td>
    </tr>
    <tr id="tablePropertiesRow" style="display: none;">
        <td class="rade_middlecell" style="height: 400px; padding: 0; vertical-align: top;">
            <dc:TableProperties id="tablePropertiesPanel" runat="server"></dc:TableProperties>
        </td>
    </tr>
    <tr id="cellPropertiesRow" style="display: none;">
        <td class="rade_middlecell" style="height: 400px; padding: 0; vertical-align: top;">
            <dc:CellProperties id="cellPropertiesPanel" runat="server"></dc:CellProperties>
        </td>
    </tr>
    <tr id="accessibilityRow" style="display: none;">
        <td class="rade_middlecell" style="height: 400px; padding: 0; vertical-align: top;">
            <dc:AccessibleTable id="accessibilityPanel" runat="server"></dc:AccessibleTable>
        </td>
    </tr>
    <tr>
        <td class="rade_bottomcell" style="padding-right: 8px;">
          <button type="button" id="InsertButton" style="min-width: 80px; _width: 80px; margin-right: 8px;">
				<script type="text/javascript">
				setInnerHtml("InsertButton", localization["OK"]);
				</script>
			</button>
			<button type="button" id="CancelButton" style="min-width: 80px; _width: 80px;">
				<script type="text/javascript">
				setInnerHtml("CancelButton", localization["Cancel"]);
				</script>
			</button>
        </td>
    </tr>
</table>
<!-- end of table wizard -->

