<%@ 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.set_selectedIndex(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_tabSelected(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_tabSelected(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">
			<telerik:RadTabStrip ID="TableWizardTab" runat="server" SelectedIndex="0" MultiPageID="dialogMultiPage">
				<Tabs>
					<telerik:RadTab Text="Table Design" Value="TableDesign">
					</telerik:RadTab>
					<telerik:RadTab Text="Table Properties" Value="TableProperties">
					</telerik:RadTab>
					<telerik:RadTab Text="Cell Properties" Value="CellProperties">
					</telerik:RadTab>
					<telerik:RadTab Text="Accessibility" Value="Accessibility">
					</telerik:RadTab>
				</Tabs>
			</telerik:RadTabStrip>
		</td>
	</tr>
	<tr>
		<td class="rade_middlecell" style="height: 400px; padding: 0; vertical-align: top;">
			<telerik:RadMultiPage ID="dialogMultiPage" runat="server" SelectedIndex="0">
				<telerik:RadPageView ID="tableDesignRow" runat="server">
					<dc:TableDesign id="tableDesignPanel" runat="server">
					</dc:TableDesign>
				</telerik:RadPageView>
				<telerik:RadPageView ID="tablePropertiesRow" runat="server">
					<dc:TableProperties id="tablePropertiesPanel" runat="server">
					</dc:TableProperties>
				</telerik:RadPageView>
				<telerik:RadPageView ID="cellPropertiesRow" runat="server">
					<dc:CellProperties id="cellPropertiesPanel" runat="server">
					</dc:CellProperties>
				</telerik:RadPageView>
				<telerik:RadPageView ID="accessibilityRow" runat="server">
					<dc:AccessibleTable id="accessibilityPanel" runat="server">
					</dc:AccessibleTable>
				</telerik:RadPageView>
			</telerik:RadMultiPage>
		</td>
	</tr>
	<tr>
		<td class="rade_bottomcell" style="padding-right: 8px; padding-top: 4px;">
			<table border="0" cellpadding="0" cellspacing="0" style="display: block; float: right;">
				<tr>
					<td style="padding-right: 4px;">
						<button type="button" id="InsertButton" style="width: 100px !important;">
							<script type="text/javascript">
							setInnerHtml("InsertButton", localization["OK"]);
							</script>		
						</button>
					</td>
					<td>
						<button type="button" id="CancelButton" style="width: 100px !important;">
							<script type="text/javascript">
							setInnerHtml("CancelButton", localization["Cancel"]);
							</script>
						</button>
					</td>				
				</tr>
			</table>
		</td>
	</tr>
</table>
<!-- end of table wizard -->
