
/* STEP 1 */
/* Create the data model for the panes */
var paneModel = new DHTMLSuite.paneSplitterModel();
DHTMLSuite.commonObj.setCssCacheStatus(false)
var paneWest = new DHTMLSuite.paneSplitterPaneModel( { position : "west", id:"westPane",size:200,minSize:100,maxSize:300,scrollbars:true,callbackOnCollapse:'callbackFunction',callbackOnExpand:'callbackFunction',callbackOnShow:'callbackFunction',callbackOnHide:'callbackFunction',callbackOnSlideIn:'callbackFunction',callbackOnSlideOut:'callbackFunction',callbackOnResize:'callBackFunctionResizePane' } );
paneWest.addContent( new DHTMLSuite.paneSplitterContentModel( { id:"westContent",htmlElementId:'westContent',title:'West',tabTitle:'West pane' } ) );
paneWest.addContent( new DHTMLSuite.paneSplitterContentModel( { id:"eastContent3",contentUrl:'includes/pane-splitter-paypal.inc',title:'Support Us',tabTitle:'Support Us' } ) );

var paneEast = new DHTMLSuite.paneSplitterPaneModel( { position : "east", id:"eastPane",size:150,minSize:100,maxSize:200,callbackOnCollapse:'callbackFunction',callbackOnCloseContent:'callbackFunction',callbackOnBeforeCloseContent:'validateCloseContent' } );
paneEast.addContent( new DHTMLSuite.paneSplitterContentModel( { id:"eastContent",htmlElementId:'eastContent',title:'East',tabTitle: 'Tab 1' } ) );
paneEast.addContent( new DHTMLSuite.paneSplitterContentModel( { id:"eastContent2",htmlElementId:'eastContent2',title:'East 2',tabTitle:'Tab 2' } ) );



var paneSouth = new DHTMLSuite.paneSplitterPaneModel( { position : "south", id:"southPane",size:60,minSize:50,maxSize:130,resizable:true,callbackOnCollapse:'callbackFunction' } );
paneSouth.addContent( new DHTMLSuite.paneSplitterContentModel( { id:"southContent",htmlElementId:'southContent',title:'South pane' } ) );

var paneNorth = new DHTMLSuite.paneSplitterPaneModel( { position : "north", id:"northPane",size:65,scrollbars:false,resizable:false } );
paneNorth.addContent( new DHTMLSuite.paneSplitterContentModel( { id:"northContent",htmlElementId:'northContent',title:'' } ) );

var paneCenter = new DHTMLSuite.paneSplitterPaneModel( { position : "center", id:"centerPane",size:150,minSize:100,maxSize:200,callbackOnCloseContent:'callbackFunction',callbackOnTabSwitch:'callbackFunction' } );
paneCenter.addContent( new DHTMLSuite.paneSplitterContentModel( { id: 'center',htmlElementId:'center',title:'DHTML Suite for application',tabTitle: 'Welcome',closable:false } ) );
paneCenter.addContent( new DHTMLSuite.paneSplitterContentModel( { id:'center3', htmlElementId:'center3',title:'Pane splitter methods',tabTitle: 'Pane splitter' } ) );


paneModel.addPane(paneSouth);
paneModel.addPane(paneEast);
paneModel.addPane(paneNorth);
paneModel.addPane(paneWest);
paneModel.addPane(paneCenter);



/* STEP 2 */
/* Create the pane object */
var paneSplitter = new DHTMLSuite.paneSplitter();
paneSplitter.addModel(paneModel);	// Add the data model to the pane splitter
paneSplitter.init();	// Add the data model to the pane splitter

/* callbackOnBeforeCloseContent call back function for the east pane */
function validateCloseContent(modelObj,action,contentObj)
{
	var confirmMessage = 'Click OK to verify that you want to close pane';
	if(contentObj)confirmMessage = confirmMessage + ' ' + contentObj.title;
	confirmMessage = confirmMessage +' ?';
	confirmMessage= confirmMessage + '\n\nThis is a custom function defined to be a callback for the event\ncallbackOnBeforeCloseContent';
	return confirm(confirmMessage);	
}

// This function opens a new tab - called by the menu items
function openPage(position,id,contentUrl,title,tabTitle,closable,onCompleteJsCode)
{
	var inputArray = new Array();
	inputArray['id'] = id;
	inputArray['position'] = position;
	inputArray['contentUrl'] = contentUrl;
	inputArray['title'] = title;
	inputArray['tabTitle'] = tabTitle;
	inputArray['closable'] = closable;
	// if(inputArray['position']=='center')inputArray['displayRefreshButton'] = true;
	if(!paneSplitter.addContent(position, new DHTMLSuite.paneSplitterContentModel( inputArray ),onCompleteJsCode )){

		paneSplitter.reloadContent(id) 
	};
	paneSplitter.showContent(id);		
	
}
/* This is a demo for a call back function for the panes */
function callbackFunction(modelObj,action,contentObj)
{
	self.status = 'Event "' + action + '" triggered for pane with id "' + modelObj.id + (contentObj?'" - content id: ' + contentObj.id:'');
}


function callBackFunctionResizePane(modelObj,action,contentObj)
{
	var size = paneSplitter.getSizeOfPaneInPixels(modelObj.getPosition());
	self.status = 'Pane ' + modelObj.getPosition() + ' has been resized to ' + size.width + ' x ' + size.height + ' pixels';
}

function openClassDocumentation()
{
	var docWin = window.open('../doc/js_docs_out/index.html');
	docWin.focus();
	
}