Navigation

← Previous Changeset
Next Changeset →

Changeset 5763

Timestamp:

01/15/08 17:14:19 (1 year ago)

Author:

ianmayo

Message:

resize the new map component on resize

Files:

sandbox/ianmayo/branches/app2/js/script.js (modified) (2 diffs)
sandbox/ianmayo/branches/app2/js/scriptIE.js (modified) (1 diff)

Legend:

: Unmodified
: Added
: Removed
: Modified
: Copied
: Moved

sandbox/ianmayo/branches/app2/js/script.js

r5761	r5763
1	1
2		var minPageWidth~~=700;~~
3		var minPageHeight~~=530;~~
	2	var minPageWidth = 700;
	3	var minPageHeight = 530;
4	4
5	5	// set the dimensions of the DOM elements
6	6	function setDimensions(){
7		// get the width and heigth of the window
8		var wh=$(window).height();
9		var ww=$(window).width();
10
11		if (ww<minPageWidth){
12		ww=minPageWidth;
13
14		window.innerWidth=ww;
15		}
16
17		if (wh<minPageHeight){
18		wh=minPageHeight;
19
20		window.innerHeight=wh;
21		}
22
23		var lpw=$("#LeftPanel").width();
24		var lph=$("#LeftPanel").height();
25		var mct=$("#MapContainer").position().top;
26
27		var horizExtraSpace = 60;
28		var vertExtraSpace = 50;
29		var mapPadding = 5;
30
31		//set the width of the map container
32		$("#MapContainer").width(ww-(lpw+horizExtraSpace));
33		$("#MapContainer>div").width(ww-(lpw+horizExtraSpace)-2*mapPadding);
34
35		var imgH=$("#MapContainer div").height();
36		var imgW=$("#MapContainer div").width();
37		var imgPH=$("#MapContainer div").parent().height();
38		var imgPW=$("#MapContainer div").parent().width();
39		if (imgH<imgPH) $("#MapContainer div").height(imgPH);
40		if (imgW<imgPW) $("#MapContainer div").height(imgPW);
41		// gets the padding of the left panel
42		var paddingLP=$("#LeftPanel").css("paddingTop");
43		// the returned string is sliced, the last two chars are discarded
44		// because the string returned has the format numberpx (for example "100px")
45		padLP=paddingLP.slice(0,paddingLP.length-2);
46
47		//the distance from the top of the page is returned by offset().top
48		var topLP=$("#LeftPanel").offset().top;
49		var newLPh;
50
51		//set the height of the map container
52		$("#MapContainer").height(wh-(mct+vertExtraSpace));
53		$("#MapContainer>div").height(wh-(mct+vertExtraSpace-2*mapPadding));
54
55		$("#LeftPanel").height(wh-padLP-topLP);
56		newLPh=wh-padLP-topLP;
57
58		var tableTop=$("#divTable").parent().offset().top;
59
60		var dT=$("#divTable");
61
62		$(dT).parent().height(newLPh-tableTop);
63		$(dT).width($(dT).parent().parent().width()-10).parent().width($(dT).parent().parent().width()-10);
64		$('.subOpScrollPane').width($(dT).width()-35).parent().width($(dT).width()-30);
65		$(".tableHeader").width($(dT).width());
66
67		$('.scrollablePane').jScrollPane();
68
	7	// get the width and heigth of the window
	8	var wh = $(window).height();
	9	var ww = $(window).width();
	10
	11	if (ww < minPageWidth) {
	12	ww = minPageWidth;
	13
	14	window.innerWidth = ww;
	15	}
	16
	17	if (wh < minPageHeight) {
	18	wh = minPageHeight;
	19
	20	window.innerHeight = wh;
	21	}
	22
	23	var lpw = $("#LeftPanel").width();
	24	var lph = $("#LeftPanel").height();
	25	var mct = $("#MapContainer").position().top;
	26
	27	var horizExtraSpace = 60;
	28	var vertExtraSpace = 50;
	29	var mapPadding = 5;
	30
	31	//set the width of the map container
	32	$("#MapContainer").width(ww - (lpw + horizExtraSpace));
	33	$("#MapContainer>div").width(ww - (lpw + horizExtraSpace) - 2 * mapPadding);
	34
	35	var imgH = $("#MapContainer div").height();
	36	var imgW = $("#MapContainer div").width();
	37	var imgPH = $("#MapContainer div").parent().height();
	38	var imgPW = $("#MapContainer div").parent().width();
	39	if (imgH < imgPH)
	40	$("#MapContainer div").height(imgPH);
	41	if (imgW < imgPW)
	42	$("#MapContainer div").height(imgPW);
	43	// gets the padding of the left panel
	44	var paddingLP = $("#LeftPanel").css("paddingTop");
	45	// the returned string is sliced, the last two chars are discarded
	46	// because the string returned has the format numberpx (for example "100px")
	47	padLP = paddingLP.slice(0, paddingLP.length - 2);
	48
	49	//the distance from the top of the page is returned by offset().top
	50	var topLP = $("#LeftPanel").offset().top;
	51	var newLPh;
	52
	53	//set the height of the map container
	54	$("#MapContainer").height(wh - (mct + vertExtraSpace));
	55	$("#MapContainer>div").height(wh - (mct + vertExtraSpace - 2 * mapPadding));
	56
	57	$("#LeftPanel").height(wh - padLP - topLP);
	58	newLPh = wh - padLP - topLP;
	59
	60	var tableTop = $("#divTable").parent().offset().top;
	61
	62	var dT = $("#divTable");
	63
	64	$(dT).parent().height(newLPh - tableTop);
	65	$(dT).width($(dT).parent().parent().width() - 10).parent().width($(dT).parent().parent().width() - 10);
	66	$('.subOpScrollPane').width($(dT).width() - 35).parent().width($(dT).width() - 30);
	67	$(".tableHeader").width($(dT).width());
	68
	69	$('.scrollablePane').jScrollPane();
	70
69	71	}
70	72
…	…
77	79
78	80	$(document).ready(function(){
79		//create a scrollable pane for the log view
80		$('.scrollablePane').jScrollPane();
81		$("#categSel, #filesSel").addClass("subOpScrollPane");
82		//create a scrollable pane for the category select and files select
83		$(".subOpScrollPane").jScrollPane();
84
85
86
87		//sets the dimensions of the page elements according to window size
88		setDimensions();
89
90		var dT=$("#divTable");
91		//adjust the size of the log view the first time the page is loaded
92		$(dT).parent().height($(dT).parent().height()+120);
93
94		addMapNameClickEvent();
95		addEventsToTableRows();
96		addEventsToSubAccCheckBoxes();
97		addHoverEvents();
98		// Code for wrapping the text inside the log view
99		addWrapTextEvent();
100
101
102		//code attached to the button that hides the LeftPanel
103		$("#hideCtrlLeftPanel").toggle( function(){
104		var jqCtrlPanel=this;
105		$("#LeftPanel").animate({
106		width: "0px",
107		paddingLeft:"9px"
108		},
109		{ duration: "slow",
110		easing: "easein",
111		complete: function(){
112
113		$("#hideCtrlLeftPanel img").attr("src","images/showControl.gif");
114		setDimensions();
115		$(this).children().filter(":not(#hideCtrlLeftPanel)").hide();
116		}
117		} );
118		},
119		function(){
120		$("#LeftPanel").children().show().end().animate({
121		width: "290px",
122		paddingLeft:"12px"
123		},
124		{ duration: "slow",
125		easing: "easein",
126		complete: function(){
127
128		$("#hideCtrlLeftPanel img").attr("src","images/hideControl.gif");
129		setDimensions();
130		}
131		});
132		});
133
134		// Allow resizing of the Left Panel
135		// when the resizing is finished setDimensions is called in order to adjust
136		// the dimensions of the elements in the page
137
138		$("#LeftPanel").resizable({
139		handles:{ e:"#resizeHandle"},
140		minWidth:290,
141		maxWidth:600,
142		stop:function(e,ui){
143		setDimensions();
144		}
145		});
146
147
148
149		// code for styling the <input type="file"/> element
150		$("input[type=file]").stylefile({
151		image: "images/browse.gif",
152		imageheight : 20,
153		imagewidth : 78,
154		width : 200
155		});
156
157		//Recalculate dimensions when the window gets resized
158		$(window).resize(function(){
159		setDimensions();
160		});
161
162
163		//the accordion behaviour (the outermost accordion)
164		// Each part of an accordion contains a head and a body
165		// when the head is clicked the body is shown or hidden
166		// the size of the log view is recomputed taking into account the size of the current visible part of the accordion
167		// divTable is the id of the div element containing the log View
168		// the parrent of the divTable element (in the DOM tree) is a div with the class jScrollPaneContainer. This div contains the custom scrollbars and is created by calling jScrollPane()
169		$('#Options .accordionHead:first').addClass("selected");
170		$('#Options .accordionBody').not(":first").hide();
171
172		$('#Options .accordionHead').click(function(){
173		var lph=$("#LeftPanel").height();
174		var dT=$("#divTable");
175		var tableTop=$("#divTable").parent().offset().top;
176		var curPanelHeight=$(this).next().height();
177		var newTableHeight=0;
178		if ($(this).is(":not(.selected)")){
179		var openedPanel=$('#Options .accordionHead').filter(".selected");
180
181		var oph=0;
182		if (openedPanel.length>0)
183		{
184		$(openedPanel)
185		.removeClass("selected")
186		.next()
187		.slideUp("slow");
188		oph= $(openedPanel).next().height();
189		}
190
191		newTableHeight = lph - tableTop + oph - curPanelHeight;
192
193		$(this).addClass("selected");
194		setScrollPane($(this).next());
195
196
197		}
198		else{
199
200		newTableHeight = lph - tableTop + curPanelHeight;
201
202		$('#Options .accordionHead').filter(".selected").removeClass("selected").next().slideUp("slow");
203
204		}
205
206		$(dT).parent().height(newTableHeight);
207		$(dT).width($(dT).parent().parent().width()-10);
208		$(dT).parent().width($(dT).parent().parent().width()-10);
209		$(".tableHeader").width($(dT).width());
210
211
212		$('.scrollablePane').jScrollPane();
213		});
214
215		// code for the subAccordion (the inner accordion)
216		$('#subOptions .subAccordionHead:first').addClass("selected");
217		$('#subOptions .subAccordionBody').not(":first").hide();
218		$('#subOptions .subAccordionHead').click(function(){
219		if ($(this).is(":not(.selected)")){
220		$('#subOptions .subAccordionHead').filter(".selected").removeClass("selected").next().hide();
221		$(this).addClass("selected");
222		$(this).next().fadeIn("slow");
223
224		}
225		});
226
227
228
229
230
231		});
232
	81	//create a scrollable pane for the log view
	82	$('.scrollablePane').jScrollPane();
	83	$("#categSel, #filesSel").addClass("subOpScrollPane");
	84	//create a scrollable pane for the category select and files select
	85	$(".subOpScrollPane").jScrollPane();
	86
	87
	88
	89	//sets the dimensions of the page elements according to window size
	90	setDimensions();
	91
	92	var dT = $("#divTable");
	93	//adjust the size of the log view the first time the page is loaded
	94	$(dT).parent().height($(dT).parent().height() + 120);
	95
	96	addMapNameClickEvent();
	97	addEventsToTableRows();
	98	addEventsToSubAccCheckBoxes();
	99	addHoverEvents();
	100	// Code for wrapping the text inside the log view
	101	addWrapTextEvent();
	102
	103
	104	//code attached to the button that hides the LeftPanel
	105	$("#hideCtrlLeftPanel").toggle(function(){
	106	var jqCtrlPanel = this;
	107	$("#LeftPanel").animate({
	108	width: "0px",
	109	paddingLeft: "9px"
	110	}, {
	111	duration: "slow",
	112	easing: "easein",
	113	complete: function(){
	114
	115	$("#hideCtrlLeftPanel img").attr("src", "images/showControl.gif");
	116	setDimensions();
	117	$(this).children().filter(":not(#hideCtrlLeftPanel)").hide();
	118	}
	119	});
	120	}, function(){
	121	$("#LeftPanel").children().show().end().animate({
	122	width: "290px",
	123	paddingLeft: "12px"
	124	}, {
	125	duration: "slow",
	126	easing: "easein",
	127	complete: function(){
	128
	129	$("#hideCtrlLeftPanel img").attr("src", "images/hideControl.gif");
	130	setDimensions();
	131	}
	132	});
	133	});
	134
	135	// Allow resizing of the Left Panel
	136	// when the resizing is finished setDimensions is called in order to adjust
	137	// the dimensions of the elements in the page
	138
	139	$("#LeftPanel").resizable({
	140	handles: {
	141	e: "#resizeHandle"
	142	},
	143	minWidth: 290,
	144	maxWidth: 600,
	145	stop: function(e, ui){
	146	setDimensions();
	147	}
	148	});
	149
	150
	151
	152	// code for styling the <input type="file"/> element
	153	$("input[type=file]").stylefile({
	154	image: "images/browse.gif",
	155	imageheight: 20,
	156	imagewidth: 78,
	157	width: 200
	158	});
	159
	160	//Recalculate dimensions when the window gets resized
	161	$(window).resize(function(){
	162	setDimensions();
	163	});
	164
	165
	166	//the accordion behaviour (the outermost accordion)
	167	// Each part of an accordion contains a head and a body
	168	// when the head is clicked the body is shown or hidden
	169	// the size of the log view is recomputed taking into account the size of the current visible part of the accordion
	170	// divTable is the id of the div element containing the log View
	171	// the parrent of the divTable element (in the DOM tree) is a div with the class jScrollPaneContainer. This div contains the custom scrollbars and is created by calling jScrollPane()
	172	$('#Options .accordionHead:first').addClass("selected");
	173	$('#Options .accordionBody').not(":first").hide();
	174
	175	$('#Options .accordionHead').click(function(){
	176	var lph = $("#LeftPanel").height();
	177	var dT = $("#divTable");
	178	var tableTop = $("#divTable").parent().offset().top;
	179	var curPanelHeight = $(this).next().height();
	180	var newTableHeight = 0;
	181	if ($(this).is(":not(.selected)")) {
	182	var openedPanel = $('#Options .accordionHead').filter(".selected");
	183
	184	var oph = 0;
	185	if (openedPanel.length > 0) {
	186	$(openedPanel).removeClass("selected").next().slideUp("slow");
	187	oph = $(openedPanel).next().height();
	188	}
	189
	190	newTableHeight = lph - tableTop + oph - curPanelHeight;
	191
	192	$(this).addClass("selected");
	193	setScrollPane($(this).next());
	194
	195
	196	}
	197	else {
	198
	199	newTableHeight = lph - tableTop + curPanelHeight;
	200
	201	$('#Options .accordionHead').filter(".selected").removeClass("selected").next().slideUp("slow");
	202
	203	}
	204
	205	$(dT).parent().height(newTableHeight);
	206	$(dT).width($(dT).parent().parent().width() - 10);
	207	$(dT).parent().width($(dT).parent().parent().width() - 10);
	208	$(".tableHeader").width($(dT).width());
	209
	210
	211	$('.scrollablePane').jScrollPane();
	212	});
	213
	214	// code for the subAccordion (the inner accordion)
	215	$('#subOptions .subAccordionHead:first').addClass("selected");
	216	$('#subOptions .subAccordionBody').not(":first").hide();
	217	$('#subOptions .subAccordionHead').click(function(){
	218	if ($(this).is(":not(.selected)")) {
	219	$('#subOptions .subAccordionHead').filter(".selected").removeClass("selected").next().hide();
	220	$(this).addClass("selected");
	221	$(this).next().fadeIn("slow");
	222
	223	}
	224	});
	225
	226
	227
	228
	229
	230	});
	231

sandbox/ianmayo/branches/app2/js/scriptIE.js

r5761	r5763
1	1
2		function setPath(f) {
3		document.getElementById('mypath').value = f;
	2	function setPath(f){
	3	document.getElementById('mypath').value = f;
4	4	}
5		function browse() {
6		document.getElementById('realFile').click();
7		//alert(document.getElementById('realFile').value);
8		//$("realFile").trigger("click");
	5
	6	function browse(){
	7	document.getElementById('realFile').click();
	8	//alert(document.getElementById('realFile').value);
	9	//$("realFile").trigger("click");
9	10	}
10		function clearIt(f) {
11		f.value='';
12		var d = document.getElementById('browser');
13		var olddiv = document.getElementById('realFile');
14		var new_element = document.createElement( 'input' );
15		new_element.type = 'file';
16		new_element.id='realFile';
17		new_element.onchange = function() {document.getElementById('mypath').value = document.getElementById('realFile').value;};
18		d.replaceChild( new_element,olddiv );
	11
	12	function clearIt(f){
	13	f.value = '';
	14	var d = document.getElementById('browser');
	15	var olddiv = document.getElementById('realFile');
	16	var new_element = document.createElement('input');
	17	new_element.type = 'file';
	18	new_element.id = 'realFile';
	19	new_element.onchange = function(){
	20	document.getElementById('mypath').value = document.getElementById('realFile').value;
	21	};
	22	d.replaceChild(new_element, olddiv);
19	23	}
20	24
21		var minPageWidth~~=700;~~
22		var minPageHeight~~=530;~~
	25	var minPageWidth = 700;
	26	var minPageHeight = 530;
23	27
24	28	// set the dimensions of the DOM elements
25	29	function setDimensions(){
26		// get the width and heigth of the window
27		var wh=$(window).height();
28		var ww=$(window).width();
29		if (ww<minPageWidth){
30		ww=minPageWidth;
31
32		window.innerWidth=ww;
33		}
34		if (wh<minPageHeight){
35		wh=minPageHeight;
36
37		window.innerHeight=wh;
38		}
39
40		//window.resizeTo(ww,wh);
41
42		var lpw=$("#LeftPanel").width();
43		var lph=$("#LeftPanel").height();
44		var mct=$("#MapContainer").position().top;
45
46		var horizExtraSpace = 70;
47		var vertExtraSpace = 50;
48		var mapPadding = 5;
49
50
51		$("#MapContainer").width(ww-(lpw+horizExtraSpace));
52		$("#MapContainer>div").width(ww-(lpw+horizExtraSpace)-2*mapPadding);
53
54		var imgH=$("#MapContainer div").height();
55		var imgW=$("#MapContainer div").width();
56		var imgPH=$("#MapContainer div").parent().height();
57		var imgPW=$("#MapContainer div").parent().width();
58		if (imgH<imgPH) $("#MapContainer div").height(imgPH);
59		if (imgW<imgPW) $("#MapContainer div").height(imgPW);
60
61		padLP=0;//paddingLP.slice(0,paddingLP.length-2);
62
63		var topLP=$("#LeftPanel").offset().top;
64		var newLPh;
65
66		$("#MapContainer").height(wh-(mct+vertExtraSpace));
67		$("#MapContainer>div").height(wh-(mct+vertExtraSpace-2*mapPadding));
68
69		$("#LeftPanel").height(wh-padLP-topLP);
70		newLPh=wh-padLP-topLP;
71
72		var tableTop=$("#divTable").parent().offset().top;
73
74		var dT=$("#divTable");
75		$("#resizeHandle").height(newLPh);
76
77		$(dT).parent().height(newLPh-tableTop);
78
79		$(dT).width(lpw-10).parent().width(lpw-10);
80		$('.subOpScrollPane').width($(dT).width()-35).parent().width($(dT).width()-20);
81		$(".tableHeader").width($(dT).width());
82		$("#loadedData").width($(dT).width()-15);
83		$(".CB").width($(dT).width()-50);
84		$(".accordionBody").width($(dT).width()-10);
85		$(".accordionHead").width($(dT).width()-14);
86
87		$('.scrollablePane').jScrollPane();
88
	30	// get the width and heigth of the window
	31	var wh = $(window).height();
	32	var ww = $(window).width();
	33	if (ww < minPageWidth) {
	34	ww = minPageWidth;
	35
	36	window.innerWidth = ww;
	37	}
	38	if (wh < minPageHeight) {
	39	wh = minPageHeight;
	40
	41	window.innerHeight = wh;
	42	}
	43
	44	//window.resizeTo(ww,wh);
	45
	46	var lpw = $("#LeftPanel").width();
	47	var lph = $("#LeftPanel").height();
	48	var mct = $("#MapContainer").position().top;
	49
	50	var horizExtraSpace = 70;
	51	var vertExtraSpace = 50;
	52	var mapPadding = 5;
	53
	54
	55	$("#MapContainer").width(ww - (lpw + horizExtraSpace));
	56	$("#MapContainer>div").width(ww - (lpw + horizExtraSpace) - 2 * mapPadding);
	57
	58	var imgH = $("#MapContainer div").height();
	59	var imgW = $("#MapContainer div").width();
	60	var imgPH = $("#MapContainer div").parent().height();
	61	var imgPW = $("#MapContainer div").parent().width();
	62	if (imgH < imgPH)
	63	$("#MapContainer div").height(imgPH);
	64	if (imgW < imgPW)
	65	$("#MapContainer div").height(imgPW);
	66
	67	padLP = 0;//paddingLP.slice(0,paddingLP.length-2);
	68	var topLP = $("#LeftPanel").offset().top;
	69	var newLPh;
	70
	71	$("#MapContainer").height(wh - (mct + vertExtraSpace));
	72	$("#MapContainer>div").height(wh - (mct + vertExtraSpace - 2 * mapPadding));
	73
	74	$("#LeftPanel").height(wh - padLP - topLP);
	75	newLPh = wh - padLP - topLP;
	76
	77	var tableTop = $("#divTable").parent().offset().top;
	78
	79	var dT = $("#divTable");
	80	$("#resizeHandle").height(newLPh);
	81
	82	$(dT).parent().height(newLPh - tableTop);
	83
	84	$(dT).width(lpw - 10).parent().width(lpw - 10);
	85	$('.subOpScrollPane').width($(dT).width() - 35).parent().width($(dT).width() - 20);
	86	$(".tableHeader").width($(dT).width());
	87	$("#loadedData").width($(dT).width() - 15);
	88	$(".CB").width($(dT).width() - 50);
	89	$(".accordionBody").width($(dT).width() - 10);
	90	$(".accordionHead").width($(dT).width() - 14);
	91
	92	$('.scrollablePane').jScrollPane();
	93
89	94	}
90	95
91	96	$(document).ready(function(){
92		//create a scrollable pane for the log view
93		$('.scrollablePane').jScrollPane();
94		$("#categSel, #filesSel").addClass("subOpScrollPane");
95		//create a scrollable pane for the category select and files select
96		$(".subOpScrollPane").jScrollPane();
97
98		// the following line was added to solve a problem encountered on IE
99		// the problem: when moving the mouse over the part before the text in the subAccordionHead had no effect
100		// the same was true when executing a mouse click over the same part
101		$("div").filter(function(){return (($(this).attr("class")==null)&&($(this).attr("id")==null))}).css("position","relative");
102
103		addMapNameClickEvent()
104		addEventsToTableRows();
105		addEventsToSubAccCheckBoxes();
106		addHoverEvents();
107		// Code for wrapping the text inside the log view
108		addWrapTextEvent();
109
110
111		//code attached to the button that hides the LeftPanel
112		$("#hideCtrlLeftPanel").toggle( function(){
113		var jqCtrlPanel=this;
114		$("#LeftPanel").animate({
115		width: "0px",
116		paddingLeft:"9px"
117		},
118		{ duration: "slow",
119		easing: "easein",
120		complete: function(){
121
122		$("#hideCtrlLeftPanel img").attr("src","images/showControl.gif");
123
124		$(this).children().filter(":not(#hideCtrlLeftPanel)").hide();
125
126		var ww=$(window).width();
127		$("#MapContainer").width(ww-60);
128		$("#MapContainer>div").width(ww-70);
129
130		}
131		} );
132		},
133		function(){
134		$("#LeftPanel").children().show().end().animate({
135		width: "290px",
136		paddingLeft:"12px"
137		},
138		{ duration: "slow",
139		easing: "easein",
140		complete: function(){
141
142		$("#hideCtrlLeftPanel img").attr("src","images/hideControl.gif");
143		setDimensions();
144		}
145		});
146		});
147
148
149		// Allow resizing of the Left Panel
150		// when the resizing is finished setDimensions is called in order to adjust
151		// the dimensions of the elements in the page
152		$("#LeftPanel").resizable({
153		handles:{ e:"#resizeHandle"},
154		minWidth:290,
155		maxWidth:600,
156
157
158		start:function(e,ui){
159		var dT=$("#divTable");
160		var dim=e.clientX;
161		if (e.clientX<290){dim=290;}
162		if (e.clientX>600){dim=600;}
163
164		$(dT).width("auto");
165
166		$('.subOpScrollPane').width("auto");
167		$(".tableHeader").width("auto");
168		$("#loadedData").width("auto");
169		$(".CB").width("auto");
170		$(".accordionBody").width("auto");
171		$(".accordionHead").width("auto");
172
173
174		},
175		stop:function(e,ui){
176		var dim=e.clientX;
177		var dT=$("#divTable");
178		if (e.clientX<290){dim=290;}
179		if (e.clientX>600){dim=600;}
180
181		$("#LeftPanel").width(dim);
182		$(dT).width(dim-15).parent().width(dim-15);
183
184		$('.subOpScrollPane').width($(dT).width()-35).parent().width($(dT).width()-20);
185		$(".tableHeader").width($(dT).width());
186		$("#loadedData").width($(dT).width()-15);
187		$(".CB").width($(dT).width()-50);
188		$(".accordionBody").width($(dT).width()-10);
189		$(".accordionHead").width($(dT).width()-7);
190
191		setDimensions();
192		}
193		});
194
195		//Recalculate dimensions when the window gets resized
196		$(window).resize(function(){
197		if ($("#optionsContainer").is(":hidden")){
198		$("#hideCtrlLeftPanel").click();
199		setDimensions();
200		$("#hideCtrlLeftPanel").click();
201		}
202		else{
203		setDimensions();
204		}
205
206
207		});
208		//the accordion behaviour (the outermost accordion)
209		// Each part of an accordion contains a head and a body
210		// when the head is clicked the body is shown or hidden
211		// the size of the log view is recomputed taking into account the size of the current visible part of the accordion
212		// divTable is the id of the div element containing the log View
213		// the parrent of the divTable element (in the DOM tree) is a div with the class jScrollPaneContainer. This div contains the custom scrollbars and is created by calling jScrollPane()
214		$('#Options .accordionHead:first').addClass("selected");
215		$('#Options .accordionBody').not(":first").hide();
216
217		$('#Options .accordionHead').click(function(){
218		var lph=$("#LeftPanel").height();
219		var lpw=$("#LeftPanel").width();
220		var dT=$("#divTable");
221		var tableTop=$("#divTable").parent().offset().top;
222		var curPanelHeight=$(this).next().height();
223		var newTableHeight=0;
224		if ($(this).is(":not(.selected)")){
225		var openedPanel=$('#Options .accordionHead').filter(".selected");
226
227		var oph=0;
228		if (openedPanel.length>0)
229		{
230		$(openedPanel)
231		.removeClass("selected")
232		.next()
233		.slideUp("slow");
234		oph= $(openedPanel).next().height();
235		}
236
237		newTableHeight = lph - tableTop + oph - curPanelHeight;
238
239		$(this).addClass("selected");
240
241		$(this).next().slideDown("slow",function(){
242		if ($(".subOpScrollPane",this).length>0){
243		$(".subOpScrollPane").each(function(){
244		if ($(this).parent().parent().is(":visible"))
245		{
246		$(this).jScrollPane();
247		}
248		})
249		}
250		})
251
252		}
253		else{
254
255		newTableHeight = lph - tableTop + curPanelHeight;
256
257		$('#Options .accordionHead').filter(".selected").removeClass("selected").next().slideUp("slow");
258
259		}
260
261		$(dT).parent().height(newTableHeight);
262
263		$(dT).width(lpw-10);
264		$(dT).parent().width(lpw-10);
265		$(".CB").width(lpw-50);
266		$(".tableHeader").width($(dT).width());
267		$("#loadedData").width($(dT).width());
268