function loadImage()
{
	document.body.style.display = "block";
}

/* Rotator.js */
HW.Carousel = function(id,opts) {
	
	// create an options object based on default values and user inputs
	this.opts = HW.extendObject(HW.Carousel.Options,opts);
	
	// launch the rotator
	this.init(id,'phRotatingElement');
}

HW.Carousel.prototype = {
	// set the starting theta value to bring the first image to the centre
	theta:3*Math.PI/2,
	// tracks the current focussed image
	current:0,
	// tracks the previously focussed image
	previous:0,
	// stores the angles needed to bring each image to the centre
	offsets:[],
	// flag if animation is happening
	active:true,
	/*
	* init(id,cls)
	* id - id of the container element
	* cls - class of the elements to rotate
	*/
	init:function(id,cls) {
		var obj = this;
		
		// find the container element
		this.container = $(id);
		// if the container does not exists then exit
		if(!this.container) {return;}
		
		// set the container width
		HW.setStyle(this.container,{width:this.opts.width+'px'});
		
		// create a wrapper div for our images to get around some css issues
		this.wrapper = HW.createNode('div',this.container,'',{className:'phRotatorWrapper'});
		
		// adjust the wrapper to fit our content
		this.findBounds();
		
		// find the elements to rotate
		this.images = _$('#'+id+' .'+cls);
		
		for(var i=0,j=this.images.length;i<j;i++) {
			HW.addClass(this.images[i],'phPhoto');
			// place the image in the wrapper element
			this.wrapper.appendChild(this.images[i]);
			//populate the offsets array
			this.offsets[i] = this.theta + i*2*Math.PI/j;
			// add an event handler to bring content to centre
			// put in closure to allow asynchronous access to 'i'
			(function(){
				var n = obj.images.length - i;
				HW.attachEvent(obj.images[i],'click',function(){obj.goTo(n);})
			})()
		}
		// add the left and right links
		this.drawButtons();
		// render the content
		this.draw();
	},
	/*
	* findBounds()
	* sets the position and dimensions of teh wrapper depending on the options defined by the user
	*/
	findBounds:function() {
		// ensure the images fill the space allowed by calculating the width of an image at the extremities
		var dw = this.opts.image_width*this.opts.image_scale;
		this.wrapperWidth = this.opts.width-dw;
		HW.setStyle(this.wrapper,{position:'relative',left:dw/2+'px',width:this.opts.width-dw+'px',height:this.opts.height+'px'});
	},
	/*
	* drawButtons()
	* create the footer section with left and right links
	*/
	drawButtons:function() {
		var obj = this;
		// create a footer wrapper to contain the links
		this.footer = HW.createNode('div',this.container,'',{className:'phRotatorButtons'});
		
		//create the left link and bind event handler
		var left = HW.createNode('a',this.footer,this.opts.leftLink,{className:'p_leftButton p_Button',href:'#'});
		HW.attachEvent(left,'click',function(e){HW.preventDefault(e);obj.go(1);});
		//create the right link and bind event handler
		var right = HW.createNode('a',this.footer,this.opts.rightLink,{className:'p_rightButton p_Button',href:'#'});
		HW.attachEvent(right,'click',function(e){HW.preventDefault(e);obj.go(-1);});
		
	},
	/*
	* go(d)
	* rotate the content
	* d - direction to rotate (1: left, -1: right)
	*/
	go:function(d) {
		// if no current animation
		if(this.active) {
			// set the previous and current elements
			this.previous = this.current;
			this.current = this.current + d;
			this.current = (this.current+this.images.length)%this.images.length;
			
			// set active flag
			this.active = false;
			
			// start animation
			this.animate();
		}
	},
	/*
	* goTo(n)
	* rotate the content to a specific element
	* n - index of the element to bring to center
	*/
	goTo:function(n) {
		// if no current animation
		if(this.active) {
			// ensure n is within bounds
			n = (n + this.images.length)%this.images.length;
			// if n is the current element then fire the onclickmain event and exit
			if(n == this.current) {
				this.clickMain();
				return;
			}
			// set the previous and current elements
			this.previous = this.current;
			this.current = n;
			
			// set active flag
			this.active = false;
			
			// start animation
			this.animate();
		}
	},
	/*
	* draw()
	* position the elements
	*/
	draw:function() {
		for(var i=0,j=this.images.length;i<j;i++) {
			// get the angle between the current element and element 0
			var offset = i*2*Math.PI/this.images.length;
			
			// calculate the z position
			// the is roughly equivalent to z-index, but is also used to position in vertical axis
			var z = 1 + Math.sin(this.theta + offset);
			
			// calculate the x position
			var x = this.wrapperWidth/2 + this.wrapperWidth*Math.cos(this.theta + offset)/2;
			
			// calculate the y position from the z value and the tilt option
			var y = -z * this.opts.height/2 * Math.sin(this.opts.tilt);
			
			// scale the content depending on z value and the image_scale option
			var scale = (2 - (z*2*(1-this.opts.image_scale)))/(this.opts.height/2)*(this.opts.height/4);
			
			// finally set the left/top positions and content sizes
			var _top = y + this.opts.height/2 - this.opts.image_height*scale/2 + 'px';
			var _left = x - this.opts.image_width*scale/2 + 'px';
			var _height = Math.max(this.opts.image_height*scale,0) + 'px';
			var _width = Math.max(this.opts.image_width*scale,0) + 'px';
			HW.setStyle(this.images[i],{top:_top,left:_left,width:_width,height:_height});
			
			// define the elements z value
			this.images[i].z = z;
		}
		// sort the elements by z value and apply z-indexes to allow layering
		this.sortZ();
	},
	/*
	* sortZ()
	* sort the elements in z value order in the z-index
	*/
	sortZ:function() {
		// create a temp copy of this.images
		var t = [];
		for(var i=0,j=this.images.length;i<j;i++) {
			t[i] = this.images[i];
		}
		// sort by the z value
		t.sort(function(a,b){
			return b.z - a.z;
		});
		// set the z-indexes in order
		for(var i=0,j=t.length;i<j;i++) {
			t[i].style.zIndex = i;
		}
	},
	/*
	* animate()
	* animate the rotator
	*/
	animate:function() {
		var obj = this;
		// set the current and final theta values
		var v1 = this.theta
		var v2 = this.offsets[this.current];
		
		// need to make sure we always go the shortest way round from one item to the next
		// if were more than half a revolution (Math.PI) apart then increment the values by 2*Math.PI (i.e. one full revolution)
		var dt = Math.abs(v2-v1);
		while(dt > Math.PI) {
			if(v1>v2) {
				v2 += 2*Math.PI;
			}
			else {
				v1 += 2*Math.PI;
			}
			dt = Math.abs(v2-v1);
		}
		
		// create an instance of the animator object to perform animation over 500ms
		// pass setter function as this.setTheta
		// pass callback funtion as this.callback
		new HW.Animator(this,v1,v2,function(o,v){obj.setTheta(v);},500,function(){obj.callback();});
	},
	/*
	* setTheta(v)
	* move the rotator to an angle of v
	* v - the angle to move to
	*/
	setTheta:function(v) {
		this.theta = v;
		// keep theta within sensible bounds
		while(this.theta > 2*Math.PI) {this.theta -= 2*Math.PI;}
		// render the content
		this.draw();
	},
	/*
	* callback()
	* finish animation
	*/
	callback:function() {
		// reset active flag to enable links
		this.active = true;
		// if onchange is defined then call it with argument of current index
		if(typeof this.opts.onchange == 'function') {
			this.opts.onchange(this.current);
		}
	},
	/*
	* clickMain()
	* handle click on main content
	*/
	clickMain:function() {
		// if onclickmain is defined then call it with argument of current index
		if(typeof this.opts.onclickmain == 'function') {
			this.opts.onclickmain(this.current);
		}
	}
	
	
}

// define the default options for our rotator
HW.Carousel.Options = {
	// dimensions of the images
	image_width:100,
	image_height:100,
	
	// dimensions of the container
	width:900,
	height:300,
	
	// angle to view rotator at
	// values >0 will view from above
	// values <0 will view from below
	tilt:0,
	
	// set the extent to which images shoudl scale
	image_scale:0.707,
	
	// text/innerHTML of left/right links
	leftLink:'prev',
	rightLink:'next',
	
	// event handler functions
	onchange:function(n){},
	onclickmain:function(n){}
}

function closeAll()
{}

function killSession(a)
{}

// Auto rotator function
	function autoRotator(){
	btn = document.getElementsByClassName("p_rightButton",null,"A");
	if(document.body.style.display == "block" && btn.length > 0){ 
		if(!btn[0].click)
		{
			btn[0].click=function(){
			var evt = this.ownerDocument.createEvent('MouseEvents');
			evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
			this.dispatchEvent(evt);
			}
		}
		else
		{
			btn[0].click();	
		}
	}

	}

/*slides start*/
function showHidePrevNext(currentLeft, idPrev, bannerCount, idNext, endLeft){
	if(currentLeft == 0){
		$(idPrev).style.display = 'none';
		if (bannerCount == 2) {
			$(idNext).style.display = '';
		}
	} else if(currentLeft == endLeft){
		$(idNext).style.display = 'none';
		if (bannerCount == 2) {
			$(idPrev).style.display = '';
		}
	}
	else
	{
		$(idPrev).style.display = '';
		$(idNext).style.display = '';
	}
}
/* slides end*/


/* extends a js object */
function hsbcJsExtendObject(d, s)
{
	for (p in s)
	{
		d[p] = s[p];
	}
	return d;
}

/* attaches an event to an object */
function hsbcJsAttachEvent(obj,evt,fnc)
{
	if(window.addEventListener)
	{
		obj.addEventListener(evt, fnc, false);
	}
	else if(window.attachEvent)
	{
		obj.attachEvent('on'+evt, fnc);
	}
	else if (obj.getElementById && evt=='load')
	{
		obj.onload = fnc;
	}
}

/* gets an element from the DOM based on it's className */
document.getElementsByClassName = function(cls,n,t)
{
	if(cls=='')
	{
		return '';
	}
	var rtn = [];
	n=n===null?document:n;
	t=t===null?'*':t;
	var els = n.getElementsByTagName ? n.getElementsByTagName(t) : document.all;
	els = (!els||!els.length ) && document.all ? document.all : els;
	if(cls==null){return els;}
	for (var i=0,j=0; i < els.length; i++)
	{
		if(els[i].className.match("(^|\\s)"+cls+"(\\s|$)"))
		{
			rtn[j++] = els[i];
		}
	}
	return rtn;
};

/* Attach open window */
function jsfAttachOpenWindow(classname)
{
	enlargeImageObjects = document.getElementsByClassName(classname,null,"A");
	for(var i=0;i<enlargeImageObjects.length;i++)
	{
		enlargeImageObjects[i].onclick = function(){
			window.open(this,'enlargePhoto','width=565,height=600,scrollbars=yes,resizable=yes');
			return false;
		};
	}
}

/* Attach close window */
function jsfAttachCloseWindow(classname)
{
	closeObjects = document.getElementsByClassName(classname,null,"A");
	for(var i=0;i<closeObjects.length;i++)
	{
		closeObjects[i].onclick = function()
		{
			window.close();
			return false;
		};
	}
}


function formValidationContactUs(e)
{
	var formCompleted = true;
	if (!($("input01a").checked || $("input01b").checked))
		formCompleted = false;
	if ($("input02").value=="")
		formCompleted = false;
	if ($("input03").value=="")
		formCompleted = false;
	if ($("input04").value=="")
		formCompleted = false;
	if (!($("input05a").checked || $("input05b").checked))
		formCompleted = false;
	if ($("input01a").checked)
	{
		var atLeastOneChecked = false;
		var arrPersonalProducts = document.getElementsByClassName(null,$("jvsPersonalProducts"),"input");
		for (var x=0; x<arrPersonalProducts.length; x++)
		{
			atLeastOneChecked = (arrPersonalProducts[x].checked || atLeastOneChecked);
		}
		if (!atLeastOneChecked)
			formCompleted = false;
	}
	if ($("input01b").checked)
	{
		var atLeastOneChecked = false;
		var arrBusinessProducts = document.getElementsByClassName(null,$("jvsBusinessProducts"),"input");
		for (var x=0; x<arrBusinessProducts.length; x++)
		{
			atLeastOneChecked = (arrBusinessProducts[x].checked || atLeastOneChecked);
		}
		if (!atLeastOneChecked)
			formCompleted = false;
	}
	if (formCompleted) {
		return true;
	} else {
		$("jvsErrorBox").style.display="block";
		scroll(0,0);
			e=e||window.event;
		if(e.stopPropogation) {e.stopPropogation();}
			else {e.cancelBubble = true;}
		if(e.preventDefault) {e.preventDefault();}
			else {e.returnValue = false;}  
	}
}
function formValidationApplyNow(e)
{
	var formCompleted = true;
	if ($("input02").value=="")
		formCompleted = false;
	if ($("input03").value=="")
		formCompleted = false;
	if ($("input04").value=="")
		formCompleted = false;
	if (!($("input05a").checked || $("input05b").checked))
		formCompleted = false;
	if ($("input06").selectedIndex==0)
		formCompleted = false;
	if ($("input08").value=="")
		formCompleted = false;
	if (formCompleted) {
		return true;
	} else {
		$("jvsErrorBox").style.display="block";
		scroll(0,0);
			e=e||window.event;
		if(e.stopPropogation) {e.stopPropogation();}
			else {e.cancelBubble = true;}
		if(e.preventDefault) {e.preventDefault();}
			else {e.returnValue = false;}  
	}
}

function enablePersonalCheckbox()
{
	var arrPersonalProducts = document.getElementsByClassName(null,$("jvsPersonalProducts"),"input");
	for (var x=0; x<arrPersonalProducts.length; x++)
	{
		arrPersonalProducts[x].disabled=false;
	}
	var arrPersonalProductsText = document.getElementsByClassName(null,$("jvsPersonalProducts"),"label");
	for (var x=0; x<arrPersonalProductsText.length; x++)
	{
		arrPersonalProductsText[x].style.color="#333"
	}
	var arrPersonalProductsText2 = document.getElementsByClassName(null,$("jvsPersonalProducts"),"strong");
	for (var x=0; x<arrPersonalProductsText2.length; x++)
	{
		arrPersonalProductsText2[x].style.color="#f00"
	}
	var arrPersonalProductsText3 = document.getElementsByClassName(null,$("jvsPersonalProducts"),"span");
	for (var x=0; x<arrPersonalProductsText3.length; x++)
	{
		arrPersonalProductsText3[x].style.color="#f00"
	}
	var arrBusinessProducts = document.getElementsByClassName(null,$("jvsBusinessProducts"),"input");
	for (var x=0; x<arrBusinessProducts.length; x++)
	{
		arrBusinessProducts[x].disabled=true;
		arrBusinessProducts[x].checked=false;
	}
	var arrBusinessProductsText = document.getElementsByClassName(null,$("jvsBusinessProducts"),"label");
	for (var x=0; x<arrBusinessProductsText.length; x++)
	{
		arrBusinessProductsText[x].style.color="#ccc"
	}
	var arrBusinessProductsText2 = document.getElementsByClassName(null,$("jvsBusinessProducts"),"strong");
	for (var x=0; x<arrBusinessProductsText2.length; x++)
	{
		arrBusinessProductsText2[x].style.color="#ccc"
	}
	var arrBusinessProductsText3 = document.getElementsByClassName(null,$("jvsBusinessProducts"),"span");
	for (var x=0; x<arrBusinessProductsText3.length; x++)
	{
		arrBusinessProductsText3[x].style.color="#ccc"
	}
}

function enableBusinessCheckbox()
{
	var arrPersonalProducts = document.getElementsByClassName(null,$("jvsPersonalProducts"),"input");
	for (var x=0; x<arrPersonalProducts.length; x++)
	{
		arrPersonalProducts[x].disabled=true;
		arrPersonalProducts[x].checked=false;
	}
	var arrPersonalProductsText = document.getElementsByClassName(null,$("jvsPersonalProducts"),"label");
	for (var x=0; x<arrPersonalProductsText.length; x++)
	{
		arrPersonalProductsText[x].style.color="#ccc"
	}
	var arrPersonalProductsText2 = document.getElementsByClassName(null,$("jvsPersonalProducts"),"strong");
	for (var x=0; x<arrPersonalProductsText2.length; x++)
	{
		arrPersonalProductsText2[x].style.color="#ccc"
	}
	var arrPersonalProductsText3 = document.getElementsByClassName(null,$("jvsPersonalProducts"),"span");
	for (var x=0; x<arrPersonalProductsText3.length; x++)
	{
		arrPersonalProductsText3[x].style.color="#ccc"
	}
	
	var arrBusinessProducts = document.getElementsByClassName(null,$("jvsBusinessProducts"),"input");
	for (var x=0; x<arrBusinessProducts.length; x++)
	{
		arrBusinessProducts[x].disabled=false;
	}
	var arrBusinessProductsText = document.getElementsByClassName(null,$("jvsBusinessProducts"),"label");
	for (var x=0; x<arrBusinessProductsText.length; x++)
	{
		arrBusinessProductsText[x].style.color="#333"
	}
	var arrBusinessProductsText2 = document.getElementsByClassName(null,$("jvsBusinessProducts"),"strong");
	for (var x=0; x<arrBusinessProductsText2.length; x++)
	{
		arrBusinessProductsText2[x].style.color="#f00"
	}
	var arrBusinessProductsText3 = document.getElementsByClassName(null,$("jvsBusinessProducts"),"span");
	for (var x=0; x<arrBusinessProductsText3.length; x++)
	{
		arrBusinessProductsText3[x].style.color="#f00"
	}
}

function getIeVersion()
{
	if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
	 var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
	 if (ieversion>=8)
		return "8.x"
	 else if (ieversion>=7)
		return "7.x"
	 else if (ieversion>=6)
		return "6.x"
	 else if (ieversion>=5)
		return "5.x"
	}
	else
	 return "notIE"
}

HW.onload(function() {
	try{
	jsfAttachOpenWindow("jstPopup");
	jsfAttachCloseWindow("jstPopupClose");
	
	if (document.getElementById('jstDropDownLink01'))
	{
		var trigger = document.getElementsByClassName("jstDropDownLink01Trigger",document.getElementById('jstDropDownLink01'),"a")[0];
		trigger = hsbcJsExtendObject(trigger, {onclick:function()
		{
			var target = document.getElementById('jstDropDownLink01Target');
			if (this.className.indexOf("selected")<0)
			{
				target.style.display = "block";
				this.className = this.className + " selected";
				return false;
			}
			else
			{
				target.style.display = "none";
				this.className = this.className.replace(" selected", "");
				return false;
			}
		}});
		trigger = hsbcJsExtendObject(trigger, {onBlur:function()
		{
			var target = $("jstDropDownLink01Target");
			target.style.display = "none";
			this.className = this.className.replace(" selected", "");
			
		}});
	}

	if ($("rotator01"))
	{
		new HW.Carousel('rotator01',{image_width:400,image_height:250,image_scale:0.8,width:610,height:260});
	}
	if ($("hsbcAmanahHomepageMenu01"))
	{
		$("hsbcAmanahHomepageMenu01").style.display = "block";
		//add selected status
		var arrMenuItems = document.getElementsByClassName(null,$("hsbcAmanahHomepageMenu01"),"a");
		for (var j=0; j<arrMenuItems.length; j++)
		{
			arrMenuItems[j].onclick = function(){
				var arrMenuItems = document.getElementsByClassName(null,$("hsbcAmanahHomepageMenu01"),"a");
				if(this.parentNode.className.search(/frist/) >=0 && this.parentNode.className.search(/selected/) < 0){
					autoRotator();
				}
				for (var j=0; j<arrMenuItems.length; j++)
				{
					arrMenuItems[j].parentNode.className = arrMenuItems[j].parentNode.className.replace("selected", "")
				}
				this.parentNode.className = this.parentNode.className + " selected";
			};
		}
	}
	if ($('hsbcAmanahSlide01'))
	{
		// disable this part of JavaScript in IE 5.5 or below
		var bName = navigator.appName;
		var bVer = parseFloat(navigator.appVersion);
		if ((bName!="Microsoft Internet Explorer")||((bName=="Microsoft Internet Explorer")&&(document.compatMode && document.all))) {
			initHsbcAmanahSlide();
		}
	}
	if ($("formContactUs"))
	{
		hsbcJsAttachEvent($("input01a"),'click', function(e){enablePersonalCheckbox()});
		hsbcJsAttachEvent($("input01b"),'click', function(e){enableBusinessCheckbox()});
		hsbcJsAttachEvent($("jstSubmit"),'click', function(e){formValidationContactUs(e);});
	}
	if ($("formApplyNow"))
	{
		hsbcJsAttachEvent($("jstSubmit"),'click', function(e){formValidationApplyNow(e);});
	}
	if ($("hsbcAmanahAndYou"))
	{
		HW.Animator.prototype.set = function(v) {
			this.target.style.left = v+"px";
		}
		initHsbcAmanahAndYou();
	}
	
	/* financail fitness test start */
	if ($("jstFinancialFitnessTestStep01"))
	{
		initForm01();
		hsbcJsAttachEvent($("nextBtn"),'click', function(e){validateForm01(e)});
	}
	if ($("jstFinancialFitnessTestStep02HomeLoan"))
	{
		hsbcJsAttachEvent($("nextBtn"),'click', function(e){validateForm02HomeLoan(e)});
	}
	if ($("jstFinancialFitnessTestStep03HomeLoan"))
	{
		initForm03HomeLoan();
	}
	if ($("jstFinancialFitnessTestStep02Expenditure"))
	{
		initForm02Expenditure();
		hsbcJsAttachEvent($("nextBtn"),'click', function(e){validateForm02Expenditure(e)});
	}
	if ($("jstFinancialFitnessTestStep03Expenditure"))
	{
		initForm03Expenditure();
	}
	if ($("jstFinancialFitnessTestStep02Saving"))
	{
		hsbcJsAttachEvent($("nextBtn"),'click', function(e){validateForm02Saving(e)});
	}
	if ($("jstFinancialFitnessTestStep03Saving"))
	{
		initForm03Saving();
	}
	/* financail fitness test end */
	
	/* slides start */
	if($('jstSlideContainer') && getIeVersion()!="5.x")
	{
		HW.Animator.prototype.set = function(v) {
			this.target.style.left = v+"px";
		}
		var currentLeft = 0;
		var idPanel = 'jstSlidePanel';
		var idSlides = 'jstSlide';
		var idPrev = 'jstSlidePrev';
		var idNext = 'jstSlideNext';	
		var idControl = 'jstSlideControl';
		var slidePanelWidth = 591;
		var bannerCount = document.getElementsByClassName("jstSlideGrid",$(idSlides),"div").length;
		
		var endLeft = (bannerCount - 1) * slidePanelWidth * -1;
		$(idPrev).style.display = 'none';
		if (bannerCount<=1)
			$(idNext).style.display = 'none';
		$(idControl).style.display = 'block';
		$(idPanel).style.overflow = 'hidden';
		//$(idPanel).style.height = '200px';
		var slidesWidth = (bannerCount * slidePanelWidth)+600;
		$(idSlides).style.width = slidesWidth+'px';
		
		HW.attachEvent($(idNext), 'click', function(e){new HW.Animator($(idSlides),currentLeft,currentLeft-slidePanelWidth,null,591,function(){currentLeft -= slidePanelWidth;showHidePrevNext(currentLeft, idPrev, bannerCount, idNext, endLeft);});HW.preventDefault(e);});
		HW.attachEvent($(idPrev), 'click', function(e){new HW.Animator($(idSlides),currentLeft,currentLeft+slidePanelWidth,null,591,function(){currentLeft += slidePanelWidth;showHidePrevNext(currentLeft, idPrev, bannerCount, idNext, endLeft);});HW.preventDefault(e);});
	}
	/* slides end */
	
	/* slides01 start */
	if($('jstSlideContainer01') && getIeVersion()!="5.x")
	{
		var currentLeft01 = 0;
		var idPanel01 = 'jstSlidePanel01';
		var idSlides01 = 'jstSlide01';
		var idPrev01 = 'jstSlidePrev01';
		var idNext01 = 'jstSlideNext01';	
		var idControl01 = 'jstSlideControl01';
		var slidePanelWidth01 = 591;
		var bannerCount01 = document.getElementsByClassName("jstSlideGrid01",$(idSlides01),"div").length;
		
		var endLeft01 = (bannerCount01 - 1) * slidePanelWidth01 * -1;
		$(idPrev01).style.display = 'none';
		if (bannerCount01<=1)
			$(idNext01).style.display = 'none';
		$(idControl01).style.display = 'block';
		$(idPanel01).style.overflow = 'hidden';
		//$(idPanel).style.height = '200px';
		var slidesWidth01 = (bannerCount * slidePanelWidth01)+600;
		$(idSlides01).style.width = slidesWidth01+'px';
		
		HW.attachEvent($(idNext01), 'click', function(e1){new HW.Animator($(idSlides01),currentLeft01,currentLeft01-slidePanelWidth01,null,591,function(){currentLeft01 -= slidePanelWidth01;showHidePrevNext(currentLeft01, idPrev01, bannerCount01, idNext01, endLeft01);});HW.preventDefault(e1);});
		HW.attachEvent($(idPrev01), 'click', function(e1){new HW.Animator($(idSlides01),currentLeft01,currentLeft01+slidePanelWidth01,null,591,function(){currentLeft01 += slidePanelWidth01;showHidePrevNext(currentLeft01, idPrev01, bannerCount01, idNext01, endLeft01);});HW.preventDefault(e1);});
	}
	/* slides01 end */
	
	/* slides02 start */
	if($('jstSlideContainer02') && getIeVersion()!="5.x")
	{
		var currentLeft02 = 0;
		var idPanel02 = 'jstSlidePanel02';
		var idSlides02 = 'jstSlide02';
		var idPrev02 = 'jstSlidePrev02';
		var idNext02 = 'jstSlideNext02';	
		var idControl02 = 'jstSlideControl02';
		var slidePanelWidth02 = 591;
		var bannerCount02 = document.getElementsByClassName("jstSlideGrid02",$(idSlides02),"div").length;
		
		var endLeft02 = (bannerCount02 - 1) * slidePanelWidth02 * -1;
		$(idPrev02).style.display = 'none';
		if (bannerCount02<=1)
			$(idNext02).style.display = 'none';
		$(idControl02).style.display = 'block';
		$(idPanel02).style.overflow = 'hidden';
		//$(idPanel).style.height = '200px';
		var slidesWidth02 = (bannerCount * slidePanelWidth02)+600;
		$(idSlides02).style.width = slidesWidth02+'px';
		
		HW.attachEvent($(idNext02), 'click', function(e1){new HW.Animator($(idSlides02),currentLeft02,currentLeft02-slidePanelWidth02,null,591,function(){currentLeft02 -= slidePanelWidth02;showHidePrevNext(currentLeft02, idPrev02, bannerCount02, idNext02, endLeft02);});HW.preventDefault(e1);});
		HW.attachEvent($(idPrev02), 'click', function(e1){new HW.Animator($(idSlides02),currentLeft02,currentLeft02+slidePanelWidth02,null,591,function(){currentLeft02 += slidePanelWidth02;showHidePrevNext(currentLeft02, idPrev02, bannerCount02, idNext02, endLeft02);});HW.preventDefault(e1);});
	}
	/* slides02 end */
	
	/* slides03 start */
	if($('jstSlideContainer03') && getIeVersion()!="5.x")
	{
		var currentLeft03 = 0;
		var idPanel03 = 'jstSlidePanel03';
		var idSlides03 = 'jstSlide03';
		var idPrev03 = 'jstSlidePrev03';
		var idNext03 = 'jstSlideNext03';	
		var idControl03 = 'jstSlideControl03';
		var slidePanelWidth03 = 591;
		var bannerCount03 = document.getElementsByClassName("jstSlideGrid03",$(idSlides03),"div").length;
		
		var endLeft03 = (bannerCount03 - 1) * slidePanelWidth03 * -1;
		$(idPrev03).style.display = 'none';
		if (bannerCount03<=1)
			$(idNext03).style.display = 'none';
		$(idControl03).style.display = 'block';
		$(idPanel03).style.overflow = 'hidden';
		//$(idPanel).style.height = '200px';
		var slidesWidth03 = (bannerCount * slidePanelWidth03)+600;
		$(idSlides03).style.width = slidesWidth03+'px';
		
		HW.attachEvent($(idNext03), 'click', function(e1){new HW.Animator($(idSlides03),currentLeft03,currentLeft03-slidePanelWidth03,null,591,function(){currentLeft03 -= slidePanelWidth03;showHidePrevNext(currentLeft03, idPrev03, bannerCount03, idNext03, endLeft03);});HW.preventDefault(e1);});
		HW.attachEvent($(idPrev03), 'click', function(e1){new HW.Animator($(idSlides03),currentLeft03,currentLeft03+slidePanelWidth03,null,591,function(){currentLeft03 += slidePanelWidth03;showHidePrevNext(currentLeft03, idPrev03, bannerCount03, idNext03, endLeft03);});HW.preventDefault(e1);});
	}
	/* slides03 end */
	
	/* personal / business sliding panel start*/
	if ($("slidingPanel")) {
		// add sliding panel
		HW.Animator.prototype.set = function(v){this.target.style.right = v+"px";}
		var slidingPanelId = "slidingPanel"
		var slidingPanel;
		var menuStartPoint = 0;
		var menuEndPoint = -343;
		
		hsbcJsExtendObject($("slidingPanelTrigger"), {onclick:function(e)
		{
			if ((!slidingPanel) || (slidingPanel.endValue != menuStartPoint))
			{
			this.style.backgroundImage = "url('/1/themes/html/hsbc_amanah_no_menu_level/images/templates/background-image-20a.gif')";
			slidingPanel = new HW.Animator($(slidingPanelId),menuEndPoint, menuStartPoint, null);HW.preventDefault(e);
			}
			else {
			this.style.backgroundImage = "url('/1/themes/html/hsbc_amanah_no_menu_level/images/templates/background-image-20.gif')";
			slidingPanel = new HW.Animator($(slidingPanelId),menuStartPoint, menuEndPoint, null);HW.preventDefault(e);
			} 

		}});
		// add panel controls
		var panelControlClassName = "jstSlidingControls"
		var arrPanelControls = document.getElementsByClassName(panelControlClassName,$(slidingPanelId),"div");
		for (var x=0; x<arrPanelControls.length; x++)
		{
			if (arrPanelControls[x].className.indexOf("selected")>0)
			{
				var selectedItem = document.getElementsByClassName("jstSlidingContent",arrPanelControls[x],"div")[0];
				selectedItem.style.display = "block";
			}
			arrPanelControls[x] = hsbcJsExtendObject(arrPanelControls[x], {onclick:function()
			{
				var arrPanelControls = document.getElementsByClassName(panelControlClassName,$(slidingPanelId),"div");
				for (var x=0; x<arrPanelControls.length; x++)
				{
					var selectedItem = document.getElementsByClassName("jstSlidingContent",arrPanelControls[x],"div")[0];
					selectedItem.style.display = "none";
					if (arrPanelControls[x].className.indexOf("selected")>0)
						arrPanelControls[x].className = arrPanelControls[x].className.replace(" selected", "");
				}
				var strCurClassName = this.className;
				if (strCurClassName.indexOf("selected")<0)
				{
					var selectedItem = document.getElementsByClassName("jstSlidingContent",this,"div")[0];
					selectedItem.style.display = "block";
					this.className = strCurClassName + " selected";
				}
			}});
		}
		// add popup controls
		if ($("amanahImageMap01"))
		{
			var arrPopupDetails = document.getElementsByClassName("jstPopupDetails",null,"div");
			for (var x=0; x<arrPopupDetails.length; x++)
			{
				arrPopupDetails[x].id = "jstPopupDetails"+x;
			}
			var arrPopupControls = document.getElementsByClassName("jstPopupTrigger",$("amanahImageMap01"),"area");
			for (var x=0; x<arrPopupControls.length; x++)
			{
				arrPopupControls[x].id = "jstPopupControls"+x;
				arrPopupControls[x] = hsbcJsExtendObject(arrPopupControls[x], {onclick:function()
				{
					var popupControlsId = this.id.replace("jstPopupControls", "")
					var popupDetailsId = "jstPopupDetails"+popupControlsId;
					$("jstPopupDetails"+popupControlsId).style.display = "block";
				}});
			}
			var arrClosePopup = document.getElementsByClassName("jstClosePopup",null,"a");
			for (var x=0; x<arrClosePopup.length; x++) 
			{
				arrClosePopup[x] = hsbcJsExtendObject(arrClosePopup[x], {onclick:function()
				{
					this.parentNode.parentNode.parentNode.style.display = "none";
				}});
			}
		}
	}
	/* personal / business sliding panel end */
	
	//Smart Account Calculator
	if($('jstSmartAccountCalculator')){		
		new smartAccountCalculator();
	}
	
	//APF Calculator
	if($('jstAPFCalculator')){		
		new APFCalculator();
	}
	//clear text in search box 
	searchBoxId = "search";
	defaultSearchText = "Search ";
	if($(searchBoxId)){
		HW.attachEvent($(searchBoxId), 'focus', function(){if($(searchBoxId).value == defaultSearchText) $(searchBoxId).value = ""});
		HW.attachEvent($(searchBoxId), 'blur', function(){if($(searchBoxId).value == "") $(searchBoxId).value = defaultSearchText});
	}
	
	
	}catch(e){}
});
/****************************************************************************
* 																			*
* HW Javascript Showhide Module												*
* -----------------------------												*
* 																			*
* Author:			Leonard Martin (leonard.martin@heathwallace.com)		*
* Version:			0.0.4													*
* Updated:			29 May 2008												*
* 																			*
* **************************************************************************/

/*
--- SHOWHIDE FUNCTIONS ---
Requires:	Core
Optional:	Animate
CSS:		None
--------------------------
*/

HW.ShowHide = {
	// first set the classes for automagical showing and hiding
	
	// hide elements on load
	hideClass:'jvsHide',
	
	// link triggers and targets together
	// links should be made by appending a number to the end of this class - e.g. jvsShowHideItem01, jvsShowHideItem02
	itemClass:'jvsShowHideItem',
	
	// make an item a trigger
	triggerClass:'jvsShowHideTrigger',
	
	// make an item a target
	targetClass:'jvsShowHideTarget',
	
	// set the trigger to either show or hide
	// if the trigger is a link, then omitting these classes will cause the trigger to toggle its targets on and off
	showTrigger:'jvsShowTrigger',
	hideTrigger:'jvsHideTrigger',
	
	// set the transition style
	slideClass:'jvsSlide',
	fadeClass:'jvsFade',
	
	// if selecting one item from a group should hide all of the others
	// append a number to this class to form groups - e.g. jvsHideAll01, jvsHideAll02
	hideAllClass:'jvsHideAll',
	
	// time for transitions to take, in milliseconds
	transitionTime:250,
	
	/*
	* init()
	* set up automagical hiding and showing using classes defined above
	* Returns:	Nothing
	*/
	init:function() {
		// hide anything set to hide on load
		var h = $$(this.hideClass,document.body,null);
		for(var i=0,j=h.length;i<j;i++) {
			// call hide with only one parameter to hide without transition
			this.hide(h[i]);
		}
		// find trigger elements and attach events to them
		this.attachTriggers();
	},
	/*
	* attachTriggers()
	* find trigger elements and attach events to them
	* Returns:	Nothing
	*/
	attachTriggers:function() {
		var obj = this;
		// get all the trigger elements
		var triggers = $$(this.triggerClass,document.body,null);
		for(var i=0;i<triggers.length;i++) {
			// different trigger types will respond to different events, so sort by tag type
			// add event listeners
			if(triggers[i].tagName == 'A') {
				HW.attachEvent(triggers[i],'click',function(e){HW.preventDefault(e);obj.fireTrigger(e);});
			}
			else if(triggers[i].tagName == 'AREA') {
				HW.attachEvent(triggers[i],'click',function(e){HW.preventDefault(e);obj.fireTrigger(e);});
			}
			else if(triggers[i].tagName == 'INPUT' && (triggers[i].type == 'radio' || triggers[i].type == 'checkbox')) {
				HW.attachEvent(triggers[i],'click',function(e){obj.fireTrigger(e);});
			}
			else if(triggers[i].tagName == 'SELECT') {
				HW.attachEvent(triggers[i],'change',function(e){obj.fireTrigger(e);});
			}
			// we need to apply a 1ms timeout to make sure IE has time to catch up so wrap everything in a closure to ensure we are using the right 'i'
			(function(){
				var k=i;
				// fire each trigger so that show/hide state corresponds with trigger state on page load
				setTimeout(function(){obj.fireTrigger(triggers[k],true);},1);
			})()
		}
	},
	/*
	* fireTriggers(e[,onload[,closed]])
	* fires a trigger element when interacted with, or on page load
	* e			Event if responding to user interaction
	*			Object if firing on page load
	* onload	Boolean (optional) set as true on page load, omitted on user interaction
	* closed	Boolean (optional) set as true if this is the recursive call after a hideAll method
	* Returns:	Nothing
	*/
	fireTrigger:function(e,onload,closed) {
		// set up regexps for groupings
		var reg = new RegExp("(^|\\w*)"+this.itemClass+"(\\d*|([\\w* ]))");
		var reg2 = new RegExp("(^|\\w*)"+this.hideAllClass+"(\\d*|([\\w* ]))");
		
		var trg;
		
		// fix events cross browser
		e=e||window.event;
		trg = e.srcElement||e.target;
		
		// if running on page load, get the element
		if(!trg && (onload || closed)) {
			trg = e;
		}
		
		// establish the transition style to use
		// if running on page load, suppress transitions
		var trans;
		if(HW.hasClass(trg,this.slideClass) && !onload) {
			trans = 'slide';
		}
		if(HW.hasClass(trg,this.fadeClass) && !onload) {
			trans = 'fade';
		}
		// need to behave differently dependent on trigger type so sort accordingly
		switch(trg.tagName) {
			case 'A':
				// links do not change state so don't need to check on page load
				if(!onload) {
					// find targets with matching class name
					var cls = reg.exec(trg.className)[0];
					var targets = $$(cls,document.body,null);
					
					// if part of a hideall group, hide others
					if(reg2.exec(trg.className) && !closed) {
						this.hideAll(reg2.exec(trg.className)[0],cls,trans,trg,onload);
						return;
					}
					
					// loop through the targets and show/hide accordingly
					for(var i=0,j=targets.length;i<j;i++) {
						// only act if the element is a target element
						// i.e. don't hide yourself
						if(HW.hasClass(targets[i],this.targetClass)) {
							if(HW.hasClass(trg,this.showTrigger)) {
								this.show(targets[i],trans);
							}
							else if(HW.hasClass(trg,this.hideTrigger)) {
								this.hide(targets[i],trans);
							}
							else {
								this.toggle(targets[i],trans);
							}
						}
					}
				}
				break;
			case 'AREA':
				// links do not change state so don't need to check on page load
				if(!onload) {
					// find targets with matching class name
					var cls = reg.exec(trg.className)[0];
					var targets = $$(cls,document.body,null);
					
					// if part of a hideall group, hide others
					if(reg2.exec(trg.className) && !closed) {
						this.hideAll(reg2.exec(trg.className)[0],cls,trans,trg,onload);
						return;
					}
					
					// loop through the targets and show/hide accordingly
					for(var i=0,j=targets.length;i<j;i++) {
						// only act if the element is a target element
						// i.e. don't hide yourself
						if(HW.hasClass(targets[i],this.targetClass)) {
							if(HW.hasClass(trg,this.showTrigger)) {
								this.show(targets[i],trans);
							}
							else if(HW.hasClass(trg,this.hideTrigger)) {
								this.hide(targets[i],trans);
							}
							else {
								this.toggle(targets[i],trans);
							}
						}
					}
				}
				break;
			case 'INPUT':
				// find targets with matching class name
				var cls = reg.exec(trg.className)[0];
				var targets = $$(cls,document.body,null);
				
				// only act on radio buttons and checkboxes which are checked
				if(trg.type == 'radio') {
					//if(trg.checked) {alert(trg.checked);}
					if(trg.checked) {
						// if part of a hideall group, hide other elements
						if(reg2.exec(trg.className) && !closed) {
							this.hideAll(reg2.exec(trg.className)[0],cls,trans,trg,onload);
							return;
						}
						
						// loop through the targets and show/hide accordingly
						for(var i=0,j=targets.length;i<j;i++) {
							// only act if the element is a target element
							// i.e. don't hide yourself
							if(HW.hasClass(targets[i],this.targetClass)) {
								if(HW.hasClass(trg,this.hideTrigger)) {
									this.hide(targets[i],trans);
								}
								else if(HW.hasClass(trg,this.showTrigger)) {
									this.show(targets[i],trans);
								}
								else {
									this.toggle(targets[i],trans);
								}
							}
						}
					}
				}
				else if(trg.type == 'checkbox') {
					// loop through the targets and show/hide accordingly
					for(var i=0,j=targets.length;i<j;i++) {
						// only act if the element is a target element
						// i.e. don't hide yourself
						if(HW.hasClass(targets[i],this.targetClass)) {
							if(!trg.checked) {
								if(HW.hasClass(trg,this.hideTrigger)) {
									this.show(targets[i],trans);
								}
								else {
									this.hide(targets[i],trans);
								}
							}
							else {
								if(HW.hasClass(trg,this.hideTrigger)) {
									this.hide(targets[i],trans);
								}
								else {
									this.show(targets[i],trans);
								}
							}
						}
					}
				}
				break;
			case 'SELECT':
				// get the option selected
				var elm = trg.options[trg.selectedIndex];
				
				// find targets with matching class name
				var cls = reg.exec(elm.className)[0];
				var targets = $$(cls,document.body,null);
				
				// if part of a hideall group, hide other elements
				if(reg2.exec(elm.className) && !closed) {
					this.hideAll(reg2.exec(elm.className)[0],cls,trans,trg,onload);
					return;
				}
				
				// loop through the targets and show/hide accordingly
				for(var i=0,j=targets.length;i<j;i++) {
					// only act if the element is a target element
					// i.e. don't hide yourself
					if(HW.hasClass(targets[i],this.targetClass)) {
						if(HW.hasClass(elm,this.hideTrigger)) {
							this.hide(targets[i],trans);
						}
						else if(HW.hasClass(elm,this.showTrigger)) {
							this.show(targets[i],trans);
						}							
						else {
							this.toggle(targets[i],trans);
						}

					}
				}
				break;
		}
	},
	/*
	* show(e[,t[,c[,time]]])
	* show an element
	* e			Object to show
	* t			Transition style - 'slide' or 'fade'
	* c			Function to call on completion
	* time		Number of milliseconds for transition to take
	* Returns:	Nothing
	*/
	show:function(e,t,c,time) {
		// if time is not specified then fall back to default
		time = time?time:this.transitionTime;
		
		// if animation script is not included then don't use transitions
		if(!HW.Animate) {t = null;}
		if(e) {
			switch(t) {
				case 'slide':
					// get start and end heights
					var h1 = e.offsetHeight;
					var h2 = this.getTotalSize(e);
					// only slide open if you're hidden
					if(h1 != h2) {
						// set initial styles
						var s = {display:'block',height:h1+'px',overflow:'hidden'};
						HW.setStyle(e,s);
						// define callback function
						var cb = function(){HW.ShowHide.finishAnimateShow(e);if(c){c();}};
						// create an instance of the animator class to handle the slide
						new HW.Animator(e,h1,h2,function(e,v){e.style.height=v+'px';},time,cb);
					}
					else {
						e.style.display = 'block';
						e.hidden = false;
						// if callback is defined, fire it
						if(c) {c();}
					}
					break;
				case 'fade':
					// only fade in if item is already hidden
					if(e.hidden) {
						var obj = this;
						// set callback function
						var cb = function() {obj.finishAnimateShow(e);if(c){c();}};
						// fade from 0% opacity
						HW.setFade(e,0);
						e.style.display = 'block';
						// fade item in to 100% opacity
						HW.Animate.fade(e,100,time,cb);
					}
					break;
				// if no transition style is set, or we don't have animate classes
				default:
					e.style.display = 'block';
					e.hidden = false;
					// if callback is defined, fire it
					if(c) {c();}
					break;
			}
		}
	},
	/*
	* hide(e[,t[,c[,time]]])
	* hide an element
	* e			Object to hide
	* t			Transition style - 'slide' or 'fade'
	* c			Function to call on completion
	* time		Number of milliseconds for transition to take
	* Returns:	Nothing
	*/
	hide:function(e,t,c,time) {
		// if time is not specified then fall back to default
		time = time?time:this.transitionTime;
		
		// if animation script is not included then don't use transitions
		if(!HW.Animate) {t = null;}
		
		if(e) {
			switch(t) {
				case 'slide':
					// get start and end heights
					var h1 = e.offsetHeight;
					var h2 = 0;
					// only slide closed if you're not already hidden
					if(h1 != h2) {
						// set initial styles
						var s = {display:'block',height:h1+'px',overflow:'hidden'};
						HW.setStyle(e,s);
						// define callback function
						var cb = function(){HW.ShowHide.finishAnimateHide(e);if(c){c();}};
						// create an instance of the animator class to handle the slide
						new HW.Animator(e,h1,h2,function(e,v){e.style.height=v+'px';},time,cb);
					}
					else {
						e.style.display = 'none';
						e.hidden = true;
						// if callback is defined, fire it
						if(c) {c();}
					}
					break;
				case 'fade':
					var obj = this;
					// define callback function
					var cb = function() {obj.finishAnimateHide(e);if(c){c();}};
					// fade item out to 0% opacity
					HW.Animate.fade(e,0,time,cb);
					break;
				// if no transition style is set, or we don't have animate classes
				default:
					e.style.display = 'none';
					e.hidden = true;
					// if callback is defined, fire it
					if(c) {c();}
					break;
			}
		}
	},
	/*
	* toggle(e[,t[,c[,time]]])
	* toggle an element on and off
	* e			Object to toggle
	* t			Transition style - 'slide' or 'fade'
	* c			Function to call on completion
	* time		Number of milliseconds for transition to take
	* Returns:	Nothing
	*/
	toggle:function(e,t,c,time) {
		if(e) {
			// if item is hidden then show it, otherwise hide it
			if(e.hidden) {
				this.show(e,t,c,time);
				return 'closed';
			}
			else {
				this.hide(e,t,c,time);
				return 'open';
			}
		}
	},
	/*
	* hideAll(c,s,t,trg,onload)
	* hide all target elements with a particular class
	* c			Class of elements to hide
	* s			Class of any elements to keep open
	* t			Transition style to use
	* trg		Object we're acting on
	* onload	Boolean value is true if we're running code on page load
	* Returns:	Nothing
	*/
	hideAll:function(c,s,t,trg,onload) {
		var obj = this;
		// get all the matching elements
		var elms = $$(c,document.body,null);
		// reset the counters so we know everything is hidden before we continue
		this.elmsToHide = 0;
		this.elmsHidden = 0;
		// need to loop twice to make sure we're done counting the items we need to hide before we hide them
		for(var i=0,j=elms.length;i<j;i++) {
			// if it doesn't have the class we want to keep, and is a target element then hide it
			if(!HW.hasClass(elms[i],s) && HW.hasClass(elms[i],this.targetClass)) {
				this.elmsToHide++;
			}
		}
		// once we are done counting we can hide the elements
		for(var i=0,j=elms.length;i<j;i++) {
			// hide it
			if(!HW.hasClass(elms[i],s) && HW.hasClass(elms[i],this.targetClass)) {
				// hide the element calling our checking function as a callback
				this.hide(elms[i],t,function(){obj.checkAllHidden(trg,onload);});
			}
		}
	},
	/*
	* checkAllHidden(trg,onload)
	* checks if all the elements to hide are hidden before we continue
	* trg		Object trigger being acted on
	* onload	Boolean flag to track if code is being run on page load
	* Returns:	Nothing
	*/
	checkAllHidden:function(trg,onload) {
		// this function is called as a callback on hide so if it's being called it means an item has just been hidden so count it
		this.elmsHidden++;
		// if they're all hidden
		if(this.elmsHidden == this.elmsToHide) {
			// then fire our trigger again with a third parameter of true to show that it's the response to a hideall
			this.fireTrigger(trg,onload,true);
		}
	},
	/*
	* finishAnimateShow(e)
	* set all the styles back to neutral after an animation
	* e			Object which has been animated
	* Returns:	Nothing
	*/
	finishAnimateShow:function(e) {
		var s = {height:'',overflow:'',position:''};
		HW.setStyle(e,s);
		e.hidden = false;
	},
	/*
	* finishAnimateHide(e)
	* set all the styles back to neutral after an animation
	* e			Object which has been animated
	* Returns:	Nothing
	*/
	finishAnimateHide:function(e) {
		var s = {display:'none',height:'',overflow:'',position:''};
		HW.setStyle(e,s);
		e.hidden = true;
	},
	/*
	* getTotalSize(e)
	* get the total possible size of an element when displayed
	* e			Object to measure
	* Returns:	Nothing
	*/
	getTotalSize:function(e) {
		// define the styles to measure element without making it visible
		var newStyle = {height:'',visibility:'hidden',display:'',position:'absolute'};
		// create a placeholder for the existing style
		var tmp = {};
		// give our elements the new style whilst storing the old values
		for(s in newStyle) {
			tmp[s] = e.style[s];
			e.style[s] = newStyle[s];
		}
		// get the height
		var h = e.offsetHeight;
		// reset the styles back to normal
		HW.setStyle(e,tmp);
		// return the height
		return h;
	}
};
// set up the auto triggers
HW.onload(function(){HW.ShowHide.init();});
/*
--- END SHOWHIDE FUNCTIONS ---
*/

/****************************************************************************
* 																			*
* HW Javascript Drag-and-Drop Module										*
* ----------------------------------										*
* 																			*
* Author:			Leonard Martin (leonard.martin@heathwallace.com)		*
* Version:			0.0.9													*
* Updated:			11 September 2008										*
* 																			*
* **************************************************************************/
/*
--- DRAGANDDROP FUNCTIONS ---
Requires:	Core
CSS:		None
-----------------------------
*/

HW.DragAndDrop = {
	/*
	* getMousePosition(e)
	* gets the position of a mouse event relative to the document
	* e:		Mouse Event
	* Returns:	Position object with properties x,y
	*/
	getMousePosition:function(e) {
		var p = {x:0,y:0};
		// have to try a couple of methods to work cross-browser
		if (e.pageX || e.pageY) 	{
			p.x = e.pageX;
			p.y = e.pageY;
		}
		else if(e.clientX || e.clientY) {
			p.x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			p.y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
		}
		return p;
	},
	
	/*
	* getPosition(o)
	* gets the position of an object relative to the document
	* o:		Object to measure
	* Returns:	Position object with properties x,y
	*/
	getPosition:function(o) {
		var p = {x:0,y:0};
		// step up the DOM getting offsets as we go
		while (o.offsetParent) 	{
			p.x += o.offsetLeft;
			p.y += o.offsetTop;
			o = o.offsetParent;
		}
		return p;
	},	
	/*
	* getWindowScroll()
	* gets the current scroll position of the window
	* Returns:	Position object with properties x,y
	*/
	getWindowScroll:function() {
		var p = {x:0,y:0};
		// have to try a couple of methods to work cross-browser
		if(window.scrollX || window.scrollY) {
			p.x = window.scrollX;	
			p.y = window.scrollY;
		}
		else if(document.body.scrollLeft || document.body.scrollTop) {
			p.x = document.body.scrollLeft;
			p.y = document.body.scrollTop;
		}
		else if(document.body.parentNode.scrollLeft || document.body.parentNode.scrollTop) {
			p.x = document.body.parentNode.scrollLeft;
			p.y = document.body.parentNode.scrollTop;
		}
		return p;
	},	
	/*
	* getDocSize()
	* gets the size of the document, if document does not fill window then returns window size
	* Returns:	Position object with properties x,y
	*/
	getDocSize:function() {
		// take window size as a minimum
		var p = this.getWindowSize();
		
		// have to try a couple of methods to work cross-browser
		p.x = Math.max(p.x,document.body.offsetWidth);
		p.x = Math.max(p.x,document.documentElement.offsetWidth);
		p.y = Math.max(p.x,document.documentElement.scrollWidth);
		
		p.y = Math.max(p.y,document.body.offsetHeight);
		p.y = Math.max(p.y,document.documentElement.offsetHeight);
		p.y = Math.max(p.y,document.documentElement.scrollHeight);
		
		return p;
	},	
	/*
	* getWindowSize()
	* gets the size of the viewable window
	* Returns:	Position object with properties x,y
	*/
	getWindowSize:function() {
		var p = {x:0,y:0};
		
		// have to try a couple of methods to work cross-browser
		if(window.innerWidth) {
			p.x = window.innerWidth;
			p.y = window.innerHeight;
		}
		else if(document.documentElement.clientWidth) {
			p.x = document.documentElement.clientWidth;
			p.y = document.documentElement.clientHeight;
		}
		else if(document.body.clientWidth) {
			p.x = document.body.clientWidth;
			p.y = document.body.clientHeight;
		}
		
		return p;
	}
};
/*
* HW.DragAndDrop.Element(o,h,b,c) 
* makes an element draggable
* o:		The object to drag
* opts:		DragAndDrop.Options object containing the parameters for the drag and drop element
* Returns:	Self
*/
HW.DragAndDrop.Element = function(o,opts) {
	// if opts is not specified then create a null object
	this.options = new HW.DragAndDrop.Options();
	this.options = HW.extendObject(this.options,opts);
	
	// set the target element
	this.target = o;
	
	// if a handle is specified, use it, otherwise set the handle as the whole object
	this.handle = this.options.handle?this.options.handle:o;
	
	// set the limits
	this.bounds = this.options.bounds;
	
	// set the active class
	this.activeClass = this.options.activeClass;
	
	// give the handle a tabIndex so it can receive focus
	this.handle.tabIndex = 0;
	
	// add event handlers to object
	this.addEventHandlers();
	
	// set limits
	this.setBounds();
	
}
HW.DragAndDrop.Element.prototype = {
	// current position of element
	position:{x:0,y:0},
	
	// class to be given to active elements
	activeClass:'',
	
	// boundaries to keep object within
	bounds:{
		top:null,
		bottom:null,
		left:null,
		right:null
	},
	
	// flags to set if element is currently dragging
	dragging:false,
	keyDragging:false,
	
	// offset between mouse and top-left of object when dragging
	offset:{x:0,y:0},
	
	// move handler function, set by user
	onmove:function(e) {},
	
	// drop handler function, set by user
	ondrop:function(e) {},
	
	/*
	* addEventHandlers()
	* adds events handlers to D&D object
	* Returns:	Nothing
	*/
	addEventHandlers:function() {
		// create object alias for closures
		var obj = this;
		
		// add mousedown event to handle calling drag function
		HW.attachEvent(this.handle,'mousedown',function(e){HW.preventDefault(e);obj.drag(e);});
		
		// add focus event to handle calling drag function to allow keyboard interaction
		HW.attachEvent(this.handle,'focus',function(e){obj.keyDrag(e);});
		
		// add blur event to handle calling drop function to allow keyboard interaction
		HW.attachEvent(this.handle,'blur',function(e){obj.drop(e);});
		
		// add blur event to handle calling drop function to allow keyboard interaction
		HW.attachEvent(this.handle,'drag',function(e){HW.preventDefault(e);});
		
		// add blur event to handle calling drop function to allow keyboard interaction
		HW.attachEvent(document,'keydown',function(e){obj.keyMove(e);});
		
		// add mousemove event to document so that if cursor gets outside handle then dragging still occurs
		HW.attachEvent(document,'mousemove',function(e){obj.move(e);});
		
		// add mouseup to document so releasing the mouse anywhere drops any dragged element
		HW.attachEvent(document,'mouseup',function(e){obj.drop(e);});
	},
	/*
	* setBounds()
	* sets the dragging limits to an object, if not specified then are set to the document dimensions
	* Returns:	Nothing
	*/
	setBounds:function() {
		// get document dimensions
		var doc = HW.DragAndDrop.getDocSize();
		
		// set top-left limits to zero unless specified
		this.bounds.top = this.bounds.top!==null?this.bounds.top:0;
		this.bounds.left = this.bounds.left!==null?this.bounds.left:0;
		
		// set bottom right limits to doc size unless specified
		this.bounds.bottom = this.bounds.bottom!==null?this.bounds.bottom:doc.y - this.target.offsetHeight;
		this.bounds.right = this.bounds.right!==null?this.bounds.right:doc.x - this.target.offsetWidth;
	},	
	/*
	* drag()
	* called when handle is clicked
	* e:		Mouse Event
	* Returns:	Nothing
	*/
	drag:function(e) {
		e=e||window.event;
		
		// get the cursor position
		var p = HW.DragAndDrop.getMousePosition(e);
		
		// get the current position of target
		var o = HW.DragAndDrop.getPosition(this.target);
		
		// calculate coords of click relative to target
		this.offset.x = p.x - o.x;
		this.offset.y = p.y - o.y;
		
		// set dragging flag
		this.dragging = true;
		
		// give the target element the active class
		HW.addClass(this.target,this.activeClass);
		
		// add event listener to stop selecting text whilst dragging
		HW.attachEvent(document,'selectstart',function(e){HW.preventDefault(e);});
		
		// call the move handler function
		this.move(e);
	},	
	/*
	* keyDrag()
	* called when handle is focused using keyboard
	* e:		Event
	* Returns:	Nothing
	*/
	keyDrag:function(e) {
		e=e||window.event;
		
		// get the current position of target
		var o = HW.DragAndDrop.getPosition(this.target);
		
		this.position = o;
		
		// since we're using keyboard offset will be 0
		this.offset = {x:0,y:0};
		
		// set dragging flag
		this.keyDragging = true;
		
		// give the target element the active class
		HW.addClass(this.target,this.activeClass);
		
		this.keyMove(e);
	},	
	/*
	* keyMove()
	* called when handle is moved using keyboard
	* e:		Event
	* Returns:	Nothing
	*/
	keyMove:function(e) {
		if(this.keyDragging) {
			
			e=e||window.event;
		
			var dx=0,dy=0;
			switch(e.keyCode) {
				case 37:
					dx = -1*this.options.increment;
					break;
				case 38:
					dy = -1*this.options.increment;
					break;
				case 39:
					dx = this.options.increment;
					break;
				case 40:
					dy = this.options.increment;
					break;
			}
			switch(e.keyCode) {
				case 37:
				case 38:
				case 39:
				case 40:
					HW.preventDefault(e);
				default:
					this.position.x += dx;
					this.position.y += dy;
					this.moveElement();
					break;
			}
		}
	},	
	/*
	* move()
	* called when cursor moves
	* e:		Mouse Event
	* Returns:	Nothing
	*/
	move:function(e) {
		
		// we only need to act if we're being dragged
		if(this.dragging) {
			e=e||window.event;
			
			// get the cursor location
			var p = HW.DragAndDrop.getMousePosition(e);
			
			// get the position of the element relative to the document
			this.position.x = p.x - this.offset.x;
			this.position.y = p.y - this.offset.y;
			
			this.moveElement();
		}
	},	
	moveElement:function() {
			
		// have to set element to position absolute first to fix bug in ie
		HW.setStyle(this.target,{position:'absolute'});
		
		// if a parent object has position absolute or relative need to ensure we take this into account when positioning
		var h = HW.DragAndDrop.getPosition(this.target.offsetParent);
		
		// ensure the element is within the set limits
		
		var b = HW.extendObject({},this.bounds);
		
		if(this.bounds.scope == 'parent') {
			b.top += h.y;
			b.bottom += h.y;
			
			b.left += h.x;
			b.right += h.x;
		}
		
		// check vertical limits
		if(this.bounds.top !== null) {this.position.y = Math.max(b.top,this.position.y);}
		if(this.bounds.bottom !== null) {this.position.y = Math.min(b.bottom,this.position.y);}
		
		// check horizontal limits
		if(this.bounds.left !== null) {this.position.x = Math.max(b.left,this.position.x);}
		if(this.bounds.right !== null) {this.position.x = Math.min(b.right,this.position.x);}
	
		// then set the position, now relative to any container
		HW.setStyle(this.target,{left:this.position.x - h.x + 'px',top:this.position.y - h.y + 'px'});
		
		// need to scroll the window if we drag to the edges
		// first get the current scroll values
		var scr = HW.DragAndDrop.getWindowScroll();
		// then get the window size
		var win = HW.DragAndDrop.getWindowSize();
		
		// take care of horizontal scrolling first
		// if going off left then  scroll left
		if(this.position.x < scr.x + 50) {
			window.scroll(scr.x - 10,scr.y);
		}
		// if going off right then  scroll right
		if(this.position.x > scr.x + win.x - 50) {
			window.scroll(scr.x + 10,scr.y);
		}
		
		// then take care of vertical scrolling
		// if going off top of screen scroll up
		if(this.position.y < scr.y + 50) {
			window.scroll(scr.x,scr.y - 10);
		}
		// if going off bottom of screen scroll down
		if(this.position.y > scr.y + win.y - 50) {
			window.scroll(scr.x,scr.y + 10);
		}
		
		// call the onmove event to allow user specified functionality
		this.onmove();
	},	
	/*
	* drop()
	* called when mouse is released
	* Returns:	Nothing
	*/
	drop:function(e) {
		
		// if element is being dragged then called its ondrop event
		if(this.dragging || this.keyDragging) {
			// remove the active class from the target element
			HW.removeClass(this.target,this.activeClass);
			
			// fire ondrop function
			this.ondrop();
		}
		
		// stop dragging
		this.dragging = false;
		this.keyDragging = false;
		
		// allow text selection again
		HW.detachEvent(document,'selectstart',function(e){HW.preventDefault(e);});
	}
}
// create an instance of the DragAndDrop.Options object
HW.DragAndDrop.Options = function(){}

HW.DragAndDrop.Options.prototype = {
	// default drag limits
	bounds:{top:null,bottom:null,left:null,right:null,scope:'document'},
	// default active class
	activeClass:'active',
	// default handle element
	handle:null,
	// set the increment size for keyboard nav
	increment:5
}
/*
--- END DRAGANDDROP FUNCTIONS ---
*/
/****************************************************************************
* 																			*
* HW Javascript UI.Slider Module											*
* ------------------------------											*
* 																			*
* Author:			Leonard Martin (leonard.martin@heathwallace.com)		*
* Version:			0.0.1													*
* Updated:			4 June 2008												*
* 																			*
* **************************************************************************/

if(!HW.UI) {
	HW.UI = {};
}

// Check for required extensions
if(!HW.DragAndDrop) {
	HW.error('UI.Slider Modules requires DragAndDrop to run!');
}

/*
--- UI.SLIDER FUNCTIONS ---
Requires:	Core, DragAndDrop
CSS:		css/slider.css
----------------------------
*/

/*
* HW.UI.Slider(o) 
* creates a slider element
* opts:		A Slider.Options object containing the setup paramters for the Slider
* Returns:	Self
*/
HW.UI.Slider = function(o,opts) {
	this.options = new HW.UI.Slider.Options();
	this.options = HW.extendObject(this.options,opts);
	
	if(!this.options.value) {this.options.value = this.options.lower;}
	
	this.build(o);
	HW.setStyle(o,{display:'none'});
	this.value = o.value?o.value:this.options.lower;
	this.input = o;
		
	this.handle.title = this.value.toString();
	
	this.setPosition(this.getPosition());
	
	// check this.options.increments is an Array
	if (this.options.increments.constructor.toString().indexOf("Array") > 0){
		this.options.incrementsArray = this.options.increments;
		this.options.increments = this.options.increments.length;
	}
	
}
HW.UI.Slider.prototype = {
	handle:null,
	track:null,
	onchange:function(){},
	onmove:function(){},
	build:function(o) {
		var obj = this;
		
		var slider = HW.createNode('div',o.parentNode);
		o.parentNode.insertBefore(o,slider);
		
		HW.addClass(slider,'SliderWrapper');
		HW.addClass(slider,this.options.direction);
		HW.addClass(slider,this.options.className);
		
		if(this.options.wheelscroll) {
			HW.attachEvent(slider,'mousewheel',function(e){HW.preventDefault(e);obj.mouseScroll(e);});
		}
		
		HW.attachEvent(slider,'click',function(e){obj.trackClick(e);});
		
		this.wrapper = HW.createNode('div',slider);
		
		switch(this.options.direction) {
			case 'horizontal':
				var s = {width:this.options.size+'px'};
				break;
			case 'vertical':
				var s = {height:this.options.size+'px'};
				break;
			default:
				var s = {};
				break;
		}
		s.position = 'relative';
		
		HW.setStyle(this.wrapper,s);
		
		this.track = HW.createNode('div',this.wrapper);
		this.track.className = 'SliderTrack';
		
		this.handle = HW.createNode('a',this.wrapper);
		this.handle.href = '#';
		var h = HW.createNode('span',this.handle,'&nbsp;');
		h.className = 'SliderHandle';
		HW.attachEvent(this.handle,'click',function(e){HW.preventDefault(e);});
		HW.attachEvent(h,'drag',function(e){HW.preventDefault(e);});
		var bounds = null;
		
		if(this.options.direction == 'horizontal') {
			bounds = {top:0,bottom:0,left:0,right:this.options.size,scope:'parent'};
		}
		if(this.options.direction == 'vertical') {
			bounds = {top:0,bottom:this.options.size,left:0,right:0,scope:'parent'};
		}
		
		var inc = 1;
		if(this.options.increments > 0) {
			inc = this.options.size/this.options.increments;
		}
		
		var s = new HW.DragAndDrop.Element(this.handle,{bounds:bounds,activeClass:'active',increment:inc});
		s.onmove = function() {
			var p = this.position;
			var q = HW.DragAndDrop.getPosition(this.handle.parentNode);
			obj.move({x:p.x-q.x,y:p.y-q.y});
		}
		s.ondrop = function() {
			obj.drop();
		}
		HW.attachEvent(this.handle,'drag',HW.preventDefault);
	},
	trackClick:function(e) {
		var p = HW.DragAndDrop.getMousePosition(e);
		var q = HW.DragAndDrop.getPosition(this.handle.parentNode);
		this.move({x:p.x-q.x,y:p.y-q.y});
	},
	mouseScroll:function(e) {
		var d = e.wheelDelta/Math.abs(e.wheelDelta);
		var incSize = 1;
		if(this.options.increments > 0) {
			incSize = this.options.size/this.options.increments;
		}
		var p = this.getPosition();
		if(this.options.direction == 'horizontal') {
			this.move({x:p.x+d*incSize,y:0});
		}
		if(this.options.direction == 'vertical') {
			this.move({x:0,y:p.y-d*incSize});
		}
	},
	move:function(p) {
		if(this.options.direction == 'horizontal') {
			p.x = Math.max(0,Math.min(this.options.size,p.x));
		}
		if(this.options.direction == 'vertical') {
			p.y = Math.max(0,Math.min(this.options.size,p.y));
		}
		if(this.options.snap) {
			this.options.increments = this.options.increments?this.options.increments:1;
			var incSize = this.options.size/this.options.increments;
			
			switch(this.options.direction) {
				case 'horizontal':
					p.x = incSize * Math.round(p.x/incSize);
					break;
				case 'vertical':
					p.y = incSize * Math.round(p.y/incSize);
					break;
			}
			
		}
		this.setPosition(p);
		this.value = this.getValue(p);
		
		this.input.value = this.value;
		if(this.options.indicator) {
			$(this.options.indicator).innerHTML = this.value;
		}
		
		this.handle.title = this.value;
		
		this.onmove();
	},
	drop:function(p) {
		this.onchange();
	},
	getValue:function(pos) {
		var p = this.options.direction=='horizontal'?pos.x:this.options.size-pos.y;
		
		var v = this.options.lower + (p/this.options.size)*(this.options.upper - this.options.lower);
		
		v = Math.round(v);
		
		return v;
	},
	getPosition:function() {
		
		var p = this.options.size*(this.value - this.options.lower)/(this.options.upper - this.options.lower);
		if(this.options.direction == 'horizontal') {
			var pos = {x:p,y:0};
		}
		if(this.options.direction == 'vertical') {
			p = this.options.size - p;
			var pos = {x:0,y:p};
		}
		
		return pos;
	},
	setPosition:function(pos) {
		if(this.options.direction == 'horizontal') {
			HW.setStyle(this.handle,{left:pos.x+'px',top:0,position:'absolute'});
		}
		else if(this.options.direction == 'vertical') {
			HW.setStyle(this.handle,{top:pos.y+'px',left:0,position:'absolute'});
		}
	}
}
HW.UI.Slider.Options = function() {}
HW.UI.Slider.Options.prototype = {
	size:200,
	increments:10,
	snap:false,
	lower:0,
	upper:1,
	direction:'horizontal',
	className:null,
	wheelscroll:true
}
/*
--- END UI.SLIDER FUNCTIONS ---
*/
/* HSBC Amanah and You.js */
function initHsbcAmanahAndYou()
{
	hsbcAmanahAndYouSetStyle(); 
	hsbcAmanahAndYouSetSlider();
}

function hsbcAmanahAndYouSetStyle()
{
	var displayAreaId = "hsbcAmanahAndYou";
	var yearListAreaId = "hsbcAmanahAndYouYearList";
	if(document.getElementByID(displayAreaId))
	{

	//hide h2
	var arrH2 = document.getElementsByClassName(null,$(displayAreaId),"h2");
	for (var j=0; j<arrH2.length; j++)
	{
		arrH2[j].style.display = "none";
	}
	//show year list
	$(yearListAreaId).style.display = "block";
	//add selected status
	var arrYearLink = document.getElementsByClassName(null,$(yearListAreaId),"a");
	for (var j=0; j<arrYearLink.length; j++)
	{
		arrYearLink[j].onclick = function(){
			var arrYearLink = document.getElementsByClassName(null,$(yearListAreaId),"a");
			for (var j=0; j<arrYearLink.length; j++)
			{
					arrYearLink[j].parentNode.className = arrYearLink[j].parentNode.className.replace("selected", "");
			}
			this.parentNode.className = this.parentNode.className + " selected";
		};
	}
	}
}

var readyToSlide = true;
function enableSlider()
{
	readyToSlide = true;
}
function disableSlider()
{
	readyToSlide = false;
}
function hsbcAmanahAndYouSetSlider()
{
	var btnPrevious = $("hsbcAmanahSlideToPrevious");
	var btnNext = $("hsbcAmanahSlideToNext");
	btnPrevious = hsbcJsExtendObject(btnPrevious, {onclick:function(e)
	{
		var itemWidth = 125;
		var curSlot = $("hsbcAmanahSlide03").className;
		curSlot = curSlot==""?0:parseInt(curSlot);
		if (curSlot>0 && readyToSlide)
		{
			disableSlider();
			var initValue = $("hsbcAmanahSlide03").style.left;
			initValue = parseInt(initValue==""?0:initValue);
			newValue = initValue + itemWidth;
			new HW.Animator($("hsbcAmanahSlide03"),initValue,newValue,null,0,enableSlider);
			HW.preventDefault(e);
			curSlot--;
			$("hsbcAmanahSlide03").className = curSlot;
			hsbcAmanahAndYouSetControlStyle();
		}
		else
		{
			return false;
		}
	}});
	btnNext = hsbcJsExtendObject(btnNext, {onclick:function(e)
	{
		var itemWidth = 125;
		var slotSize = 4;
		var totalSlots = document.getElementsByClassName(null,$("hsbcAmanahSlide03"),"li").length;
		var curSlot = $("hsbcAmanahSlide03").className;
		curSlot = curSlot==""?0:parseInt(curSlot);
		if (curSlot<totalSlots-slotSize && readyToSlide)
		{
			disableSlider();
			var initValue = $("hsbcAmanahSlide03").style.left;
			initValue = parseInt(initValue==""?0:initValue);
			newValue = initValue - itemWidth;
			new HW.Animator($("hsbcAmanahSlide03"),initValue,newValue,null,0,enableSlider);
			HW.preventDefault(e);
			curSlot++;
			$("hsbcAmanahSlide03").className = curSlot;
			hsbcAmanahAndYouSetControlStyle();
		}
		else
		{
			return false;
		}
	}});
}

function hsbcAmanahAndYouSetControlStyle()
{
	var slotSize = 4;
	var curSlot = $("hsbcAmanahSlide03").className;
	var totalSlots = document.getElementsByClassName(null,$("hsbcAmanahSlide03"),"li").length;
	var btnPrevious = $("hsbcAmanahSlideToPrevious");
	var btnNext = $("hsbcAmanahSlideToNext");
	// disable unnecessary
	if (curSlot==0)
	{
		btnPrevious.childNodes[0].src = btnPrevious.childNodes[0].src.replace("slide-previous.gif", "slide-previous-dim.gif");
		btnNext.childNodes[0].src = btnNext.childNodes[0].src.replace("slide-next-dim.gif", "slide-next.gif");
	}else if (curSlot==totalSlots-slotSize)
	{
		btnNext.childNodes[0].src = btnNext.childNodes[0].src.replace("slide-next.gif", "slide-next-dim.gif");
		btnPrevious.childNodes[0].src = btnPrevious.childNodes[0].src.replace("slide-previous-dim.gif", "slide-previous.gif");
	}else
	{
		btnNext.childNodes[0].src = btnNext.childNodes[0].src.replace("slide-next-dim.gif", "slide-next.gif");
		btnPrevious.childNodes[0].src = btnPrevious.childNodes[0].src.replace("slide-previous-dim.gif", "slide-previous.gif");		
	}
}

/**
 * reflection.js v1.9
 * http://cow.neondragon.net/stuff/reflection/
 * Freely distributable under MIT-style license.
 */
 
/* From prototype.js */
if (!document.myGetElementsByClassName) {
	document.myGetElementsByClassName = function(className) {
		var children = document.getElementsByTagName('*') || document.all;
		var elements = new Array();
	  
		for (var i = 0; i < children.length; i++) {
			var child = children[i];
			var classNames = child.className.split(' ');
			for (var j = 0; j < classNames.length; j++) {
				if (classNames[j] == className) {
					elements.push(child);
					break;
				}
			}
		}
		return elements;
	}
}

var Reflection = {
	defaultHeight : 0.5,
	defaultOpacity: 0.5,
	
	add: function(image, options) {
		Reflection.remove(image);
		
		doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }
		if (options) {
			for (var i in doptions) {
				if (!options[i]) {
					options[i] = doptions[i];
				}
			}
		} else {
			options = doptions;
		}
	
		try {
			var d = document.createElement('div');
			var p = image;
			
			var classes = p.className.split(' ');
			var newClasses = '';
			for (j=0;j<classes.length;j++) {
				if (classes[j] != "reflect") {
					if (newClasses) {
						newClasses += ' '
					}
					
					newClasses += classes[j];
				}
			}

			var reflectionHeight = Math.floor(p.height*options['height']);
			var divHeight = Math.floor(p.height*(1+options['height']));
			
			var reflectionWidth = p.width;
			
			if (document.all && !window.opera) {
				/* Fix hyperlinks */
                if(p.parentElement.tagName == 'A') {
	                var d = document.createElement('a');
	                d.href = p.parentElement.href;
                }  
                    
				/* Copy original image's classes & styles to div */
				d.className = newClasses;
				p.className = 'reflected';
				
				d.style.cssText = p.style.cssText;
				p.style.cssText = 'vertical-align: bottom';
			
				var reflection = document.createElement('img');
				reflection.src = p.src;
				reflection.style.width = reflectionWidth+'px';
				reflection.style.display = 'block';
				reflection.style.height = p.height+"px";
				
				reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
				reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';
				
				d.style.width = reflectionWidth+'px';
				d.style.height = divHeight+'px';
				p.parentNode.replaceChild(d, p);
				
				d.appendChild(p);
				d.appendChild(reflection);
			} else {
				var canvas = document.createElement('canvas');
				if (canvas.getContext) {
					/* Copy original image's classes & styles to div */
					d.className = newClasses;
					p.className = 'reflected';
					
					d.style.cssText = p.style.cssText;
					p.style.cssText = 'vertical-align: bottom';
			
					var context = canvas.getContext("2d");
				
					canvas.style.height = reflectionHeight+'px';
					canvas.style.width = reflectionWidth+'px';
					canvas.height = reflectionHeight;
					canvas.width = reflectionWidth;
					
					d.style.width = reflectionWidth+'px';
					d.style.height = divHeight+'px';
					p.parentNode.replaceChild(d, p);
					
					d.appendChild(p);
					d.appendChild(canvas);
					
					context.save();
					
					context.translate(0,image.height-1);
					context.scale(1,-1);
					
					context.drawImage(image, 0, 0, reflectionWidth, image.height);
	
					context.restore();
					
					context.globalCompositeOperation = "destination-out";
					var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
					
					gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
					gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");
		
					context.fillStyle = gradient;
					if (navigator.appVersion.indexOf('WebKit') != -1) {
						context.fill();
					} else {
						context.fillRect(0, 0, reflectionWidth, reflectionHeight*2);
					}
				}
			}
		} catch (e) {
	    }
	},
	
	remove : function(image) {
		if (image.className == "reflected") {
			image.className = image.parentNode.className;
			image.parentNode.parentNode.replaceChild(image, image.parentNode);
		}
	}
}

function addReflections() {
	var rimages = document.myGetElementsByClassName('reflect');
	for (i=0;i<rimages.length;i++) {
		var rheight = null;
		var ropacity = null;
		
		var classes = rimages[i].className.split(' ');
		for (j=0;j<classes.length;j++) {
			if (classes[j].indexOf("rheight") == 0) {
				var rheight = classes[j].substring(7)/100;
			} else if (classes[j].indexOf("ropacity") == 0) {
				var ropacity = classes[j].substring(8)/100;
			}
		}
		
		Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
	}
}

var previousOnload = window.onload;
window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }

// SprySlidingPanels.js - version 0.5 - Spry Pre-Release 1.6.1
//
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.

var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.SlidingPanels = function(element, opts)
{
	this.element = this.getElement(element);
	this.enableAnimation = true;
	this.currentPanel = null;
	this.enableKeyboardNavigation = true;
	this.hasFocus = false;
	this.previousPanelKeyCode = Spry.Widget.SlidingPanels.KEY_LEFT;
	this.nextPanelKeyCode = Spry.Widget.SlidingPanels.KEY_RIGHT;

	this.currentPanelClass = "SlidingPanelsCurrentPanel";
	this.focusedClass = "SlidingPanelsFocused";
	this.animatingClass = "SlidingPanelsAnimating";

	Spry.Widget.SlidingPanels.setOptions(this, opts);

	if (this.element)
		this.element.style.overflow = "hidden";

	// Developers can specify the default panel as an index,
	// id or an actual element node. Make sure to normalize
	// it into an element node because that is what we expect
	// internally.

	if (this.defaultPanel)
	{
		if (typeof this.defaultPanel == "number")
			this.currentPanel = this.getContentPanels()[this.defaultPanel];
		else
			this.currentPanel = this.getElement(this.defaultPanel);
	}

	// If we still don't have a current panel, use the first one!

	if (!this.currentPanel)
		this.currentPanel = this.getContentPanels()[0];

	// Since we rely on the positioning information of the
	// panels, we need to wait for the onload event to fire before
	// we can attempt to show the initial panel. Once the onload
	// fires, we know that all CSS files have loaded. This is
	// especially important for Safari.

	if (Spry.Widget.SlidingPanels.onloadDidFire)
		this.attachBehaviors();
	else
		Spry.Widget.SlidingPanels.loadQueue.push(this);
};

Spry.Widget.SlidingPanels.prototype.onFocus = function(e)
{
	this.hasFocus = true;
	this.addClassName(this.element, this.focusedClass);
	return false;
};

Spry.Widget.SlidingPanels.prototype.onBlur = function(e)
{
	this.hasFocus = false;
	this.removeClassName(this.element, this.focusedClass);
	return false;
};

Spry.Widget.SlidingPanels.KEY_LEFT = 37;
Spry.Widget.SlidingPanels.KEY_UP = 38;
Spry.Widget.SlidingPanels.KEY_RIGHT = 39;
Spry.Widget.SlidingPanels.KEY_DOWN = 40;

Spry.Widget.SlidingPanels.prototype.onKeyDown = function(e)
{
	var key = e.keyCode;
	if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
		return true;

	if (key == this.nextPanelKeyCode)
		this.showNextPanel();
	else /* if (key == this.previousPanelKeyCode) */
		this.showPreviousPanel();

	if (e.preventDefault) e.preventDefault();
	else e.returnValue = false;
	if (e.stopPropagation) e.stopPropagation();
	else e.cancelBubble = true;

	return false;
};

Spry.Widget.SlidingPanels.prototype.attachBehaviors = function()
{
	var ele = this.element;
	if (!ele)
		return;

	if (this.enableKeyboardNavigation)
	{
		var focusEle = null;
		var tabIndexAttr = ele.attributes.getNamedItem("tabindex");
		if (tabIndexAttr || ele.nodeName.toLowerCase() == "a")
			focusEle = ele;
	
		if (focusEle)
		{
			var self = this;
			Spry.Widget.SlidingPanels.addEventListener(focusEle, "focus", function(e) { return self.onFocus(e || window.event); }, false);
			Spry.Widget.SlidingPanels.addEventListener(focusEle, "blur", function(e) { return self.onBlur(e || window.event); }, false);
			Spry.Widget.SlidingPanels.addEventListener(focusEle, "keydown", function(e) { return self.onKeyDown(e || window.event); }, false);
		}
	}

	if (this.currentPanel)
	{
		// Temporarily turn off animation when showing the
		// initial panel.

		var ea = this.enableAnimation;
		this.enableAnimation = false;
		this.showPanel(this.currentPanel);
		this.enableAnimation = ea;
	}
};

Spry.Widget.SlidingPanels.prototype.getElement = function(ele)
{
	if (ele && typeof ele == "string")
		return document.getElementById(ele);
	return ele;
};

Spry.Widget.SlidingPanels.prototype.addClassName = function(ele, className)
{
	if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
		return;
	ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.SlidingPanels.prototype.removeClassName = function(ele, className)
{
	if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
		return;
	ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

Spry.Widget.SlidingPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
	if (!optionsObj)
		return;
	for (var optionName in optionsObj)
	{
		if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
			continue;
		obj[optionName] = optionsObj[optionName];
	}
};

Spry.Widget.SlidingPanels.prototype.getElementChildren = function(element)
{
	var children = [];
	var child = element.firstChild;
	while (child)
	{
		if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
			children.push(child);
		child = child.nextSibling;
	}
	return children;
};

Spry.Widget.SlidingPanels.prototype.getCurrentPanel = function()
{
	return this.currentPanel;
};

Spry.Widget.SlidingPanels.prototype.getContentGroup = function()
{
	return this.getElementChildren(this.element)[0];
};

Spry.Widget.SlidingPanels.prototype.getContentPanels = function()
{
	return this.getElementChildren(this.getContentGroup());
};

Spry.Widget.SlidingPanels.prototype.getContentPanelsCount = function()
{
	return this.getContentPanels().length;
};

Spry.Widget.SlidingPanels.onloadDidFire = false;
Spry.Widget.SlidingPanels.loadQueue = [];

Spry.Widget.SlidingPanels.addLoadListener = function(handler)
{
	if (typeof window.addEventListener != 'undefined')
		window.addEventListener('load', handler, false);
	else if (typeof document.addEventListener != 'undefined')
		document.addEventListener('load', handler, false);
	else if (typeof window.attachEvent != 'undefined')
		window.attachEvent('onload', handler);
};

Spry.Widget.SlidingPanels.processLoadQueue = function(handler)
{
	Spry.Widget.SlidingPanels.onloadDidFire = true;
	var q = Spry.Widget.SlidingPanels.loadQueue;
	var qlen = q.length;
	for (var i = 0; i < qlen; i++)
		q[i].attachBehaviors();
};

Spry.Widget.SlidingPanels.addLoadListener(Spry.Widget.SlidingPanels.processLoadQueue);

Spry.Widget.SlidingPanels.addEventListener = function(element, eventType, handler, capture)
{
	try
	{
		if (element.addEventListener)
			element.addEventListener(eventType, handler, capture);
		else if (element.attachEvent)
			element.attachEvent("on" + eventType, handler);
	}
	catch (e) {}
};

Spry.Widget.SlidingPanels.prototype.getContentPanelIndex = function(ele)
{
	if (ele)
	{
		ele = this.getElement(ele);
		var panels = this.getContentPanels();
		var numPanels = panels.length;
		for (var i = 0; i < numPanels; i++)
		{
			if (panels[i] == ele)
				return i;
		}
	}
	return -1;
};

Spry.Widget.SlidingPanels.prototype.showPanel = function(elementOrIndex)
{
	var pIndex = -1;
	
	if (typeof elementOrIndex == "number")
		pIndex = elementOrIndex;
	else // Must be the element for the content panel.
		pIndex = this.getContentPanelIndex(elementOrIndex);

	var numPanels = this.getContentPanelsCount();
	if (numPanels > 0)
		pIndex = (pIndex >= numPanels) ? numPanels - 1 : pIndex;
	else
		pIndex = 0;

	var panel = this.getContentPanels()[pIndex];
	var contentGroup = this.getContentGroup();

	if (panel && contentGroup)
	{
		if (this.currentPanel)
			this.removeClassName(this.currentPanel, this.currentPanelClass);
		this.currentPanel = panel;

		var nx = -panel.offsetLeft;
		var ny = -panel.offsetTop;

		if (this.enableAnimation)
		{
			if (this.animator)
				this.animator.stop();
			var cx = contentGroup.offsetLeft;
			var cy = contentGroup.offsetTop;
			if (cx != nx || cy != ny)
			{
				var self = this;
				this.addClassName(this.element, this.animatingClass);
				this.animator = new Spry.Widget.SlidingPanels.PanelAnimator(contentGroup, cx, cy, nx, ny, { duration: this.duration, fps: this.fps, transition: this.transition, finish: function()
				{
					self.removeClassName(self.element, self.animatingClass);
					self.addClassName(panel, self.currentPanelClass);
				} });
				this.animator.start();
			}
		}
		else
		{
			contentGroup.style.left = nx + "px";
			contentGroup.style.top = ny + "px";
			this.addClassName(panel, this.currentPanelClass);
		}
	}

	return panel;
};

Spry.Widget.SlidingPanels.prototype.showFirstPanel = function()
{
	return this.showPanel(0);
};

Spry.Widget.SlidingPanels.prototype.showLastPanel = function()
{
	return this.showPanel(this.getContentPanels().length - 1);
};

Spry.Widget.SlidingPanels.prototype.showPreviousPanel = function()
{
	return this.showPanel(this.getContentPanelIndex(this.currentPanel) - 1);
};

Spry.Widget.SlidingPanels.prototype.showNextPanel = function()
{
	return this.showPanel(this.getContentPanelIndex(this.currentPanel) + 1);
};

Spry.Widget.SlidingPanels.PanelAnimator = function(ele, curX, curY, dstX, dstY, opts)
{
	this.element = ele;

	this.curX = curX;
	this.curY = curY;
	this.dstX = dstX;
	this.dstY = dstY;
	this.fps = 600;
	this.duration = 1000;
	this.transition = Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition;
	this.startTime = 0;
	this.timerID = 0;
	this.finish = null;

	var self = this;
	this.intervalFunc = function() { self.step(); };
	
	Spry.Widget.SlidingPanels.setOptions(this, opts, true);

	this.interval = 1000/this.fps;
};

Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.Widget.SlidingPanels.PanelAnimator.prototype.start = function()
{
	this.stop();
	this.startTime = (new Date()).getTime();
	this.timerID = setTimeout(this.intervalFunc, this.interval);
};

Spry.Widget.SlidingPanels.PanelAnimator.prototype.stop = function()
{
	if (this.timerID)
		clearTimeout(this.timerID);
	this.timerID = 0;
};

Spry.Widget.SlidingPanels.PanelAnimator.prototype.step = function()
{
	var elapsedTime = (new Date()).getTime() - this.startTime;
	var done = elapsedTime >= this.duration;
	var x, y;

	if (done)
	{
		x = this.curX = this.dstX;
		y = this.curY = this.dstY;
	}
	else
	{
		x = this.transition(elapsedTime, this.curX, this.dstX - this.curX, this.duration);
		y = this.transition(elapsedTime, this.curY, this.dstY - this.curY, this.duration);
	}

	this.element.style.left = x + "px";
	this.element.style.top = y + "px";

	if (!done)
		this.timerID = setTimeout(this.intervalFunc, this.interval);
	else if (this.finish)
		this.finish();
};




/* polls.js */
function pollsFormControl(sp2)
{
	var allSlideInputs = document.getElementsByClassName(null,$("hsbcAmanahSlide01"),"input")
	var curSlideInputs = document.getElementsByClassName(null,sp2.currentPanel,"input")
	var allSlideInputs1 = document.getElementsByClassName(null,$("hsbcAmanahSlide01"),"a")
	var curSlideInputs1 = document.getElementsByClassName(null,sp2.currentPanel,"a")
	for(var j=0; j<allSlideInputs.length; j++)
	{
		allSlideInputs[j].disabled = true; 
	}
	for(var j=0; j<curSlideInputs.length; j++)
	{
		curSlideInputs[j].disabled = false;
	}
	for(var j=0; j<allSlideInputs1.length; j++)
	{
		allSlideInputs1[j].disabled = true;
	}
	for(var j=0; j<curSlideInputs1.length; j++)
	{
		curSlideInputs1[j].disabled = false;
	}
}

function pollsValidation()
{
	var slidingContentId = "hsbcAmanahSlide01";
	var arrErrorBox = document.getElementsByClassName("jstErrorBox",$(slidingContentId),"div")
	for (var j=0; j<arrErrorBox.length; j++)
	{
		arrErrorBox[j].id = "jvsErrorBox" + j;
	}
	var arrForms = document.getElementsByClassName("jstPollsForm",$(slidingContentId),"form");
	for (var j=0; j<arrForms.length; j++)
	{
		var arrSubmitBtn = document.getElementsByClassName("jstPollsSubmit",arrForms[j],"input")
		for (var i=0; i<arrSubmitBtn.length; i++)
		{
			arrSubmitBtn[i].className = arrSubmitBtn[i].className + j;
			arrSubmitBtn[i] = hsbcJsExtendObject(arrSubmitBtn[i], {onclick:function(e)
			{
				var formCompleted = false;
				var arrSubmitId = parseInt(this.className.replace("jstPollsSubmit", ""));
				var arrRadioBtn = document.getElementsByClassName("jstPollsRadio",this.parentNode.parentNode,"input");
				for (var i=0; i<arrRadioBtn.length; i++)
				{
					if (arrRadioBtn[i].checked)
						formCompleted = true;
				}
				if (formCompleted) {
					return true;
				} else {
					$("jvsErrorBox"+arrSubmitId).style.display="block";
					scroll(0,0);
					e=e||window.event;
					if(e.stopPropogation) {e.stopPropogation();}
						else {e.cancelBubble = true;}
					if(e.preventDefault) {e.preventDefault();}
						else {e.returnValue = false;}  
				}
			}});
				
		}
	}
}

/*
Amended By: Shaun Ng (MYH ITD)
Date Amended: 25 September 2008
Remark: 	1.	To allow dynamic changing of ages, ranges, and rates by user which used for both calculators' calculations
		2.	Change the default "$" to "RM" for HSBC Amanah Public Website calculators

Author: Health Wallace (Hong Kong)
Date Created: 20 September 2008
Remark: 	1.	Smart Account-i and Personal Financing-i calculators for HSBC Amanah Public Website
*/

var tempValue = "";
var objSliders = [];
var slider01 = [];
var pos01 = [];
var val = 0;
function smartAccountCalculator(){

	var 	idOption1 = "hsbcAmanahCalItem01",
			idOption2 = "hsbcAmanahCalItem02",
			idMonthlySavingAmount = "hsbcAmanahCalItem03a",
			idTargetSavingAmount = "hsbcAmanahCalItem03b",
			idTenreSlider = "hsbcLpiSliderOutput0",
			idTenreSliderIndicator = "jstShowMonth",
			idProfitRate = "idProfitRate",
			idBtnCalculate = "btnSmartAccountCalculate",
			idResultProfitEarned = "hsbcAmanahCalItem09",
			idResultDoubleProfitEarned = "hsbcAmanahCalItem09b",
			idResultProfitEarnedPlusSaving = "hsbcAmanahCalItem10",
			idResultDoubleProfitEarnedPlusSaving = "hsbcAmanahCalItem10b",
			idResultMonthlyPayment = "hsbcAmanahCalItem11",
			idResultDoubleMonthlyPayment = "hsbcAmanahCalItem11b",
			idResultYourContribution = "hsbcAmanahCalItem12",
			idErrorMonthly = "error01",
			idErrorTotal = "error02",
			classJsHide = "jsHide",
			classDefaultHide = "jstNonJSTag",
			rowMonthlySavingAmount = $(idMonthlySavingAmount).parentNode.parentNode,
			rowTargetSavingAmount = $(idTargetSavingAmount).parentNode.parentNode,
			formSmartAccountCalculator = document.formSmartAccountCalculator;
	
	//Hide elements
	HW.addClass(rowTargetSavingAmount, classJsHide);
	HW.removeClass($(idTenreSliderIndicator).parentNode, classJsHide);
	var objHide = $$(classDefaultHide, formSmartAccountCalculator, "SPAN");
	for (i in objHide){HW.addClass(objHide[i], classJsHide);}
	loadTooltip();	
	//attach events
	var option01Objs = [], option02Objs = [];
	HW.attachEvent($(idOption1),'click', function(){
												  option01Objs = $$('jstOption01Selected', document.body, null);
												  option02Objs = $$('jstOption02Selected', document.body, null);
												  for (i in option01Objs) HW.removeClass(option01Objs[i],classJsHide);
												  for (i in option02Objs) HW.addClass(option02Objs[i],classJsHide);
												  clearResult();
												  });
	HW.attachEvent($(idOption2),'click', function(){
												  option01Objs = $$('jstOption01Selected', document.body, null);
												  option02Objs = $$('jstOption02Selected', document.body, null);
												  for (i in option01Objs) HW.addClass(option01Objs[i],classJsHide);
												  for (i in option02Objs) HW.removeClass(option02Objs[i],classJsHide);
												  clearResult();
												  });

	slider01 = new HW.UI.Slider($(idTenreSlider),{lower:6,upper:120,size:160,increments:19,snap:true,indicator:idTenreSliderIndicator});
	HW.attachEvent($(idBtnCalculate),'click', function(e){calculate(e);});
	formatCurrencyInput(idMonthlySavingAmount);
	formatCurrencyInput(idTargetSavingAmount);

	function calculate(e){
		HW.preventDefault(e);
		HW.addClass($(idErrorMonthly), classJsHide);
		HW.addClass($(idErrorTotal), classJsHide);
		var monthlySaving = parseFloat($(idMonthlySavingAmount).value.replace(/[^0-9]/g,''));
		var tenure = parseInt($(idTenreSlider).value);
		var rate = parseFloat($(idProfitRate).innerHTML) / 100;
		var targetAmount = parseFloat($(idTargetSavingAmount).value.replace(/[^0-9]/g,''));
		objSliders = $$('SliderHandle', document.body, 'SPAN');
		
		if($$('SliderHandle', document.body, 'SPAN')[0].click != undefined)
		{
			pos01 = slider01.getPosition();
			val = slider01.value;
			$$('SliderHandle', document.body, 'SPAN')[0].click();
			slider01.value = val;
			slider01.move(pos01);
		}
		if ($(idOption1).checked){
			
			if (isNaN(monthlySaving)) {HW.removeClass($(idErrorMonthly), classJsHide);
										if($$('SliderHandle', document.body, 'SPAN')[0].click != undefined)
										{
											$$('SliderHandle', document.body, 'SPAN')[0].click();
											slider01.value = val;
											slider01.move(pos01);
										}
										return; }
			$(idResultProfitEarned).innerHTML = futureValue(monthlySaving, rate, tenure) - (tenure*monthlySaving);
			$(idResultDoubleProfitEarned).innerHTML = futureValue(monthlySaving, eval(rate*2), tenure) - (tenure*monthlySaving);
			$(idResultProfitEarnedPlusSaving).innerHTML = futureValue(monthlySaving, rate, tenure);
			$(idResultDoubleProfitEarnedPlusSaving).innerHTML = futureValue(monthlySaving, eval(rate*2), tenure);
			$(idResultYourContribution).innerHTML = monthlySaving*tenure;
			
			formatNumber($(idResultYourContribution),2,',','.','RM','','','');
			formatNumber($(idResultProfitEarned),2,',','.','RM','','','');
			formatNumber($(idResultProfitEarnedPlusSaving),2,',','.','RM','','','');
			formatNumber($(idResultDoubleProfitEarned),2,',','.','RM','','','');
			formatNumber($(idResultDoubleProfitEarnedPlusSaving),2,',','.','RM','','','');
		}else if ($(idOption2).checked){
			if (isNaN(targetAmount)) {HW.removeClass($(idErrorTotal), classJsHide);  return; }			
			$(idResultProfitEarned).innerHTML = futureValue(find_payment(targetAmount, rate, tenure), rate, tenure) - (tenure*find_payment(targetAmount, rate, tenure));
			$(idResultDoubleProfitEarned).innerHTML = futureValue(find_payment(targetAmount, rate, tenure), eval(rate*2), tenure) - (tenure*find_payment(targetAmount, rate, tenure));
			$(idResultMonthlyPayment).innerHTML = find_payment(targetAmount, rate, tenure);
			$(idResultDoubleMonthlyPayment).innerHTML = find_payment(targetAmount, eval(rate*2), tenure);
			
			
			formatNumber($(idResultProfitEarned),2,',','.','RM','','','');
			formatNumber($(idResultDoubleProfitEarned),2,',','.','RM','','','');
			formatNumber($(idResultMonthlyPayment),2,',','.','RM','','','');
			formatNumber($(idResultDoubleMonthlyPayment),2,',','.','RM','','','');
		}
	}
}

function APFCalculator(){
	var 	idOption1 = "hsbcAmanahCalItem01",
			idOption2 = "hsbcAmanahCalItem02",
			idTenreSlider0 = "hsbcAmanahSliderOutput0",
			idTenreSliderIndicator0 = "hsbcAmanahSliderIndicator0",
			idTenreSlider1 = "hsbcAmanahSliderOutput1",
			idTenreSliderIndicator1 = "hsbcAmanahSliderIndicator1",
			idDateRow = "hsbcAmanahCalItem12",
			idStartDateDD = "hsbcAmanahCalItem05a",
			idStartDateMM = "hsbcAmanahCalItem05b",
			idStartDateYYYY = "hsbcAmanahCalItem05c",
			idBtnCalculate = "btnSmartAccountCalculate",
			idResultProfitRate = "hsbcAmanahCalItem09",
			idResultProfitTotalPayment = "hsbcAmanahCalItem10",
			idResultProfitInstalmentAmount = "hsbcAmanahCalItem11",			
			idBirthdayError = "error01",
			classJsHide = "jsHide",
			classDefaultHide = "jstNonJSTag",
			formAPFCalculator = document.formAPFCalculator;
	loadTooltip();
	new HW.UI.Slider($(idTenreSlider0),{lower:6000,upper:100000,size:200,increments:188,snap:true,indicator:idTenreSliderIndicator0});
	new HW.UI.Slider($(idTenreSlider1),{lower:2,upper:5,size:200,increments:3,snap:true,indicator:idTenreSliderIndicator1});
	HW.removeClass($(idTenreSliderIndicator0).parentNode, classJsHide);
	HW.removeClass($(idTenreSliderIndicator1).parentNode, classJsHide);
	var objHide = $$(classDefaultHide, formAPFCalculator, "SPAN");
	for (i in objHide){HW.addClass(objHide[i], classJsHide);}

	HW.attachEvent($(idOption1),'click', function(e){HW.removeClass($(idDateRow), classJsHide);});
	HW.attachEvent($(idOption2),'click', function(e){HW.addClass($(idDateRow), classJsHide);HW.addClass($(idBirthdayError), classJsHide);}); 

	HW.attachEvent($(idStartDateDD),'mouseup', function(e){if($(idStartDateDD).value == "DD") $(idStartDateDD).value=""; $(idStartDateDD).select();});
	HW.attachEvent($(idStartDateDD),'blur', function(e){if($(idStartDateDD).value == "") $(idStartDateDD).value="DD";});
	HW.attachEvent($(idStartDateMM),'mouseup', function(e){if($(idStartDateMM).value == "MM") $(idStartDateMM).value=""; $(idStartDateMM).select();});
	HW.attachEvent($(idStartDateMM),'blur', function(e){if($(idStartDateMM).value == "") $(idStartDateMM).value="MM";});
	HW.attachEvent($(idStartDateYYYY),'mouseup', function(e){if($(idStartDateYYYY).value == "YYYY") $(idStartDateYYYY).value=""; $(idStartDateYYYY).select();});
	HW.attachEvent($(idStartDateYYYY),'blur', function(e){if($(idStartDateYYYY).value == "") $(idStartDateYYYY).value="YYYY";});
	HW.attachEvent($(idBtnCalculate),'click', function(e){calculate(e);HW.preventDefault(e);});

	function calculate(e){
		var profileRate = 0,
			monthlyPayment = 0,
			userAge = 0;
		
		var one_day=1000*60*60*24
		var one_month=1000*60*60*24*30
		var one_year=1000*60*60*24*30*12
		
		function displayage(yr, mon, day, unit, decimal, round){
			today=new Date()
			var pastdate=new Date(yr, mon-1, day)
			
			var countunit=unit
			var decimals=decimal
			var rounding=round
			
			finalunit=(countunit=="days")? one_day : (countunit=="months")? one_month : one_year
			decimals=(decimals<=0)? 1 : decimals*10
			
			if (unit!="years"){
			if (rounding=="rounddown")
				return(Math.floor((today.getTime()-pastdate.getTime())/(finalunit)*decimals)/decimals+" "+countunit)
			else
				return(Math.ceil((today.getTime()-pastdate.getTime())/(finalunit)*decimals)/decimals+" "+countunit)
			}
			else{
				yearspast=today.getFullYear()-yr-1
				tail=(today.getMonth()>mon-1 || today.getMonth()==mon-1 && today.getDate()>=day)? 1 : 0
				pastdate.setFullYear(today.getFullYear())
				pastdate2=new Date(today.getFullYear()-1, mon-1, day)
				tail=(tail==1)? tail+Math.floor((today.getTime()-pastdate.getTime())/(finalunit)*decimals)/decimals : Math.floor((today.getTime()-pastdate2.getTime())/(finalunit)*decimals)/decimals
				return(yearspast+tail+" "+countunit)
			}
		}
		userAge = displayage($(idStartDateYYYY).value, $(idStartDateMM).value, $(idStartDateDD).value, "", 0, "rounddown");
		
		if (((userAge >= age1) && (userAge <= age2) && ($(idOption1).checked))|| ($(idOption2).checked))
		{
			if($(idTenreSlider0).value <= amt1)
			{
				if($(idOption1).checked) profileRate = rt1; else profileRate = rt2;
			}else if($(idTenreSlider0).value <= amt2)
			{
				if($(idOption1).checked) profileRate = rt3; else profileRate = rt4;
			}else if($(idTenreSlider0).value >= amt3)
			{
				if($(idOption1).checked) profileRate = rt5; else profileRate = rt6;
			}
			$(idResultProfitRate).innerHTML = profileRate + "%";

			monthlyPayment = (($(idTenreSlider0).value*profileRate/100*$(idTenreSlider1).value)+parseInt($(idTenreSlider0).value))/($(idTenreSlider1).value*12);
			
			$(idResultProfitTotalPayment).innerHTML = Math.round(monthlyPayment * $(idTenreSlider1).value * 12*100)/100;
			$(idResultProfitInstalmentAmount).innerHTML = Math.round(monthlyPayment*100)/100;
			
			formatNumber($(idResultProfitTotalPayment),2,',','.','RM','','','');
			formatNumber($(idResultProfitInstalmentAmount),2,',','.','RM','','','');
			HW.preventDefault(e);
			
			HW.addClass($(idBirthdayError), classJsHide);
		}else
			HW.removeClass($(idBirthdayError), classJsHide);
	}
	
}

function formatNumber(objText,dec,thou,pnt,curr1,curr2,n1,n2) {
	if (objText.value != undefined)
	{
		if ((objText.value.lastIndexOf("RM") >= 0) || (objText.value == "")) { objText.value = tempValue; return false;}
		num = parseFloat(objText.value);
		var x = Math.round(num * Math.pow(10,dec));if (x >= 0) n1=n2='';var y = (''+Math.abs(x)).split('');var z = y.length - dec; if (z<0) z--; for(var i = z; i < 0; i++) y.unshift('0');y.splice(z, 0, pnt); if(y[0] == pnt) y.unshift('0'); while (z > 3) {z-=3; y.splice(z,0,thou);}var r = curr1+n1+y.join('')+n2+curr2;objText.value = r;
	}else
	{
		
		num = parseFloat(objText.innerHTML);
		var x = Math.round(num * Math.pow(10,dec));if (x >= 0) n1=n2='';var y = (''+Math.abs(x)).split('');var z = y.length - dec; if (z<0) z--; for(var i = z; i < 0; i++) y.unshift('0');y.splice(z, 0, pnt); if(y[0] == pnt) y.unshift('0'); while (z > 3) {z-=3; y.splice(z,0,thou);}var r = curr1+n1+y.join('')+n2+curr2;objText.innerHTML = r;
	}

}


function addPercentage(objText) {
	if ((objText.value.lastIndexOf("%") >= 0) || (objText.value == "")) {objText.value = tempValue; return false;}
	objText.value = parseInt(objText.value.replace(/[^0-9]/g,''))+"%";
}

function formatCurrencyInput(id){
	HW.attachEvent($(id),'blur', function(){formatNumber($(id),0,',','','RM','','','');});
	HW.attachEvent($(id),'click', function(){$(id).value = $(id).value.replace(/[^0-9]/g,''); $(id).select();});
	HW.attachEvent($(id),'focus', function(){tempValue = $(id).value;});
	HW.attachEvent($(id), 'keydown', function(e){if(e.keyCode == 46) tempValue = "RM";});
}

function formatPercentageInput(id){
	HW.attachEvent($(id),'blur', function(){addPercentage($(id));});
	HW.attachEvent($(id),'click', function(){$(id).value = $(id).value.replace(/[^0-9]/g,''); $(id).select();});
	HW.attachEvent($(id),'focus', function(){tempValue = $(id).value;});		
	HW.attachEvent($(id), 'keydown', function(e){if(e.keyCode == 46) tempValue = "%";});
}
function futureValue(m, r, t){

	 var newprin = ((Math.pow(eval(1+r), t) - 1)/r)*m ;
	 return newprin;
}
function find_payment(total, r, t){
	var m = total/((Math.pow(eval(1+r), t) - 1)/r);
	return m;
}
function clearResult(){
	$('hsbcAmanahCalItem09').innerHTML = "";
	$('hsbcAmanahCalItem09b').innerHTML = "";
	$('hsbcAmanahCalItem10').innerHTML = "";
	$('hsbcAmanahCalItem10b').innerHTML = "";
	$('hsbcAmanahCalItem11').innerHTML = "";
	$('hsbcAmanahCalItem11b').innerHTML = "";
	$('hsbcAmanahCalItem03a').value = "RM";
	$('hsbcAmanahCalItem03b').value = "RM";
	$('hsbcAmanahCalItem12').innerHTML = "";
}
function loadTooltip(){
	var classJstTooltip = "jstTooltip";
	var objTooltips = $$(classJstTooltip, document.body, "A" );
	for(i in objTooltips){
		HW.extendObject(objTooltips[i], {onmouseover:function(e)
				{
					
					e=e||window.event;
					var y = (HW.DragAndDrop.getMousePosition(e).y + 20)+"px";
					var x = (HW.DragAndDrop.getMousePosition(e).x - 20)+"px";
					var n = "<span>"+this.title+"</span>";
					var hideDropdown = document.getElementsByClassName("hsbcAmanahContentStyle50la",null,"tr"); 
					if(hideDropdown.length < 1){
						document.getElementById('hsbcAmanahCalItem05').style.visibility = "hidden";
					}
					HW.createNode("DIV", this, n, {className:"hsbcAmanahContentStyle50k"});
					if(this.lastChild.tagName == "DIV")this.title = "";
				},
				onmouseout:function()
				{
					document.getElementById('hsbcAmanahCalItem05').style.visibility = "visible";
					if(this.lastChild.lastChild){
						this.title = this.lastChild.lastChild.innerHTML;
					}
					if(this.lastChild.tagName == "DIV") this.removeChild(this.lastChild);
				},
				onclick:function(e)
				{
					e=e||window.event;
					HW.preventDefault(e);
				}
				});
	}
}

/* financial-fitness.js */
function initForm01()
{
	// if chosen "Self employed", display Q6
	$("input06dl").style.display = "none";
	hsbcJsAttachEvent($("input05"),'change', function(e){
		if ($("input05").selectedIndex==2)
			$("input06dl").style.display = "block";
		else
			$("input06dl").style.display = "none";
	});
	//select the left navigation
	var arrLeftNav = document.getElementsByClassName("hsbcAmanahPageFramework21",null,"div")[0];
	var arrLeftNavItems = document.getElementsByClassName(null,arrLeftNav,"li");
	var curTest = getUrlParameter("pmv1");
	if (curTest == "hl")
		arrLeftNavItems[0].className = "selected";
	else if (curTest == "e")
		arrLeftNavItems[1].className = "selected";
	else if (curTest == "s")
		arrLeftNavItems[2].className = "selected";
}

function validateForm01(e)
{
	// to control which form to display on step 2
	$("pmv1").value = getUrlParameter("pmv1");
	// form validation
	var formCompleted = true;
	if ($("input01").selectedIndex<=0)
		formCompleted = false;
	if (!($("input02a").checked || $("input02b").checked))
		formCompleted = false;
	if (!($("input03a").checked || $("input03b").checked))
		formCompleted = false;
	if (!($("input04a").checked || $("input04b").checked))
		formCompleted = false;
	if ($("input05").selectedIndex<=0)
		formCompleted = false;
	if ($("input05").selectedIndex==2 && $("input06").selectedIndex<=0)
		formCompleted = false;
	// sumbit if form us valid
	if (formCompleted) {
		if ($("pmv1").value=="hl")
			$("jstFinancialFitnessTestStep01").action = "financial-fitness-test-home-loan-step-2.html";
		if ($("pmv1").value=="e")
			$("jstFinancialFitnessTestStep01").action = "financial-fitness-test-expenditure-step-2.html";
		if ($("pmv1").value=="s")
			$("jstFinancialFitnessTestStep01").action = "financial-fitness-test-saving-step-2.html";
		return true;
	} else {
		$("jvsErrorBox").style.display="block";
		scroll(0,0);
		e=e||window.event;
		if(e.stopPropogation) {e.stopPropogation();}
			else {e.cancelBubble = true;}
		if(e.preventDefault) {e.preventDefault();}
			else {e.returnValue = false;}  
	}
}

function validateForm02HomeLoan(e)
{
	// to control which form to display on step 2
	$("pmv1").value = getUrlParameter("pmv1");
	// form validation
	var formCompleted = true;
	if (!($("input01a").checked || $("input01b").checked || $("input01c").checked))
		formCompleted = false;
	if (!($("input02a").checked || $("input02b").checked))
		formCompleted = false;
	if (!($("input03a").checked || $("input03b").checked))
		formCompleted = false;
	if (!($("input04a").checked || $("input04b").checked || $("input04c").checked || $("input04d").checked))
		formCompleted = false;
	// sumbit if form us valid
	if (formCompleted) {
		// decide which products to display on the next page
		var calculatorScore = 0;
		if ($("input02a").checked)
			calculatorScore++;
		if ($("input03a").checked)
			calculatorScore++;
		if ($("input04a").checked || $("input04b").checked)
			calculatorScore++;
		$("pmv2").value = calculatorScore>=2?"c":"gl";
		return true;
	} else {
		$("jvsErrorBox").style.display="block";
		scroll(0,0);
		e=e||window.event;
		if(e.stopPropogation) {e.stopPropogation();}
			else {e.cancelBubble = true;}
		if(e.preventDefault) {e.preventDefault();}
			else {e.returnValue = false;}  
	}
}

function initForm03HomeLoan()
{
	if (getUrlParameter("pmv2")=="c")
	{
		$("formHomeLoan03a").style.display = "block";
		$("formHomeLoan03b").style.display = "none";
	}
	else if (getUrlParameter("pmv2")=="gl")
	{
		$("formHomeLoan03a").style.display = "none";
		$("formHomeLoan03b").style.display = "block";
	}
}

function initForm02Expenditure()
{
	$("input02dl").style.display = "none";
	$("input03dl").style.display = "none";
	$("input04dl").style.display = "none";
	$("inputSet01").style.display = "none";
	$("inputSet02").style.display = "none";
	
	hsbcJsAttachEvent($("input01a"),'click', function(e){
		if ($("input01a").checked)
		{
			$("input02dl").style.display = "block";
			$("input03dl").style.display = "none";
		}
	});
	hsbcJsAttachEvent($("input01b"),'click', function(e){
		if ($("input01b").checked)
		{
			$("input02dl").style.display = "none";
			$("input03dl").style.display = "block";
		}
	});
	hsbcJsAttachEvent($("input02a"),'click', function(e){
		if ($("input02a").checked)
			$("input04dl").style.display = "block";
	});
	hsbcJsAttachEvent($("input02b"),'click', function(e){
		if ($("input02b").checked)
			$("input04dl").style.display = "block";
	});
	hsbcJsAttachEvent($("input02c"),'click', function(e){
		if ($("input02c").checked)
			$("input04dl").style.display = "block";
	});
	hsbcJsAttachEvent($("input03a"),'click', function(e){
		if ($("input03a").checked)
			$("input04dl").style.display = "block";
	});
	hsbcJsAttachEvent($("input03b"),'click', function(e){
		if ($("input03b").checked)
			$("input04dl").style.display = "block";
	});
	hsbcJsAttachEvent($("input04a"),'click', function(e){
		if ($("input04a").checked)
		{
			$("inputSet01").style.display = "block";
			$("inputSet02").style.display = "none";
		}
	});
	hsbcJsAttachEvent($("input04b"),'click', function(e){
		if ($("input04b").checked)
		{
			$("inputSet01").style.display = "none";
			$("inputSet02").style.display = "block";
		}
	});
}

function validateForm02Expenditure(e)
{
	// to control which form to display on step 2
	$("pmv1").value = getUrlParameter("pmv1");
	// form validation
	var formCompleted = true;
	if (!($("input01a").checked || $("input01b").checked))
		formCompleted = false;
	if (!($("input02a").checked || $("input02b").checked || $("input02c").checked) && $("input01a").checked)
		formCompleted = false;
	if (!($("input03a").checked || $("input03b").checked) && $("input01b").checked)
		formCompleted = false;
	if (!($("input04a").checked || $("input04b").checked))
		formCompleted = false;
	if (!($("input05a").checked || $("input05b").checked) && $("input04a").checked)
		formCompleted = false;
	if (!($("input06a").checked || $("input06b").checked) && $("input04a").checked)
		formCompleted = false;
	if (!($("input07a").checked || $("input07b").checked) && $("input04a").checked)
		formCompleted = false;
	if (!($("input08a").checked || $("input08b").checked || $("input08c").checked || $("input08d").checked) && $("input04a").checked)
		formCompleted = false;
	if (!($("input09a").checked || $("input09b").checked) && $("input04a").checked)
		formCompleted = false;
	if (!($("input10a").checked || $("input10b").checked) && $("input04b").checked)
		formCompleted = false;
	if (!($("input11a").checked || $("input11b").checked) && $("input04b").checked)
		formCompleted = false;
	if (!($("input12a").checked || $("input12b").checked || $("input12c").checked || $("input12d").checked) && $("input04b").checked)
		formCompleted = false;
	// sumbit if form us valid
	if (formCompleted) {
		// decide which products to display on the next page
		var calculatorScore = 0;
		$("pmv3").value = $("input04a").checked?"y":"n";
		if ($("input04a").checked)
		{
			if ($("input05a").checked)
				calculatorScore++;
			if ($("input06a").checked)
				calculatorScore++;
			if ($("input07a").checked)
				calculatorScore++;
			if ($("input08a").checked || $("input08b").checked)
				calculatorScore++;
			if ($("input09a").checked)
				calculatorScore++;
			$("pmv2").value = calculatorScore>=3?"c":"gl";
		}
		else if ($("input04b").checked)
		{
			if ($("input10a").checked)
				calculatorScore++;
			if ($("input11a").checked)
				calculatorScore++;
			if ($("input12a").checked || $("input12b").checked)
				calculatorScore++;
			$("pmv2").value = calculatorScore>=2?"c":"gl";
		}
		return true;
	} else {
		$("jvsErrorBox").style.display="block";
		scroll(0,0);
		e=e||window.event;
		if(e.stopPropogation) {e.stopPropogation();}
			else {e.cancelBubble = true;}
		if(e.preventDefault) {e.preventDefault();}
			else {e.returnValue = false;}  
	}
}

function initForm03Expenditure()
{
	if (getUrlParameter("pmv2")=="c" && getUrlParameter("pmv3")=="y")
	{
		$("formExpenditure03a").style.display = "block";
		$("formExpenditure03b").style.display = "none";
		$("formExpenditure03c").style.display = "none";
		$("formExpenditure03d").style.display = "none";
	}
	else if (getUrlParameter("pmv2")=="gl" && getUrlParameter("pmv3")=="y")
	{
		$("formExpenditure03a").style.display = "none";
		$("formExpenditure03b").style.display = "block";
		$("formExpenditure03c").style.display = "none";
		$("formExpenditure03d").style.display = "none";
	}
	else if (getUrlParameter("pmv2")=="c" && getUrlParameter("pmv3")=="n")
	{
		$("formExpenditure03a").style.display = "none";
		$("formExpenditure03b").style.display = "none";
		$("formExpenditure03c").style.display = "block";
		$("formExpenditure03d").style.display = "none";
	}
	else if (getUrlParameter("pmv2")=="gl" && getUrlParameter("pmv3")=="n")
	{
		$("formExpenditure03a").style.display = "none";
		$("formExpenditure03b").style.display = "none";
		$("formExpenditure03c").style.display = "none";
		$("formExpenditure03d").style.display = "block";
	}
}

function validateForm02Saving(e)
{
	// to control which form to display on step 2
	$("pmv1").value = getUrlParameter("pmv1");
	// form validation
	var formCompleted = true;
	if (!($("input01a").checked || $("input01b").checked || $("input01c").checked || $("input01d").checked))
		formCompleted = false;
	if (!($("input02a").checked || $("input02b").checked))
		formCompleted = false;
	if (!($("input03a").checked || $("input03b").checked || $("input03c").checked || $("input03d").checked))
		formCompleted = false;
	if (!($("input04a").checked || $("input04b").checked))
		formCompleted = false;
	if (!($("input05a").checked || $("input05b").checked || $("input05c").checked || $("input05d").checked))
		formCompleted = false;
	// sumbit if form us valid
	if (formCompleted) {
		// decide which products to display on the next page
		var calculatorScore = 0;
		if ($("input01a").checked || $("input01b").checked)
			calculatorScore++;
		if ($("input02a").checked)
			calculatorScore++;
		if ($("input03a").checked || $("input03b").checked)
			calculatorScore++;
		if ($("input04a").checked)
			calculatorScore++;
		if ($("input05a").checked || $("input05b").checked)
			calculatorScore++;
		$("pmv2").value = calculatorScore>=3?"c":"gl";
		return true;
	} else {
		$("jvsErrorBox").style.display="block";
		scroll(0,0);
		e=e||window.event;
		if(e.stopPropogation) {e.stopPropogation();}
			else {e.cancelBubble = true;}
		if(e.preventDefault) {e.preventDefault();}
			else {e.returnValue = false;}  
	}
}

function initForm03Saving()
{
	if (getUrlParameter("pmv2")=="c")
	{
		$("formSaving03a").style.display = "block";
		$("formSaving03b").style.display = "none";
	}
	else if (getUrlParameter("pmv2")=="gl")
	{
		$("formSaving03a").style.display = "none";
		$("formSaving03b").style.display = "block";
	}
}

function getUrlParameter(name) {
	name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
	var regexS = "[\\?&]" + name + "=([^&#]*)";
	var regex = new RegExp(regexS);
	var results = regex.exec(window.location.href);
	if (results == null) return "";
	else return results[1];
}

/* branch-showcase.js */
function initHsbcAmanahSlide1()
{


	if ($("hsbcAmanahSlide01"))
	{
		
                var slidingContentId = "hsbcAmanahSlide01";
		var slidingControlId = "slidingControl";
		var slidingContentClassName = "SlidingPanelsContent";
		var slidingThumbnailClassName = "SlidingThumbnail";
		var slidingContentIdPrefix = "slidingContent_";
		var slidingThumbnailIdPrefix = "slidingThumbnail_";
		
		
		/* adjusted in JavaScript to ensure the non-JavaScript looks good as well */
//		$(slidingContentId).style.height = "322px";
//		if ($(slidingContentId).innerHTML.indexOf("SlidingPanelsContentStyle01")>0)
//			$(slidingContentId).style.height = "280px";
		var arrSlidingPanelsContentGroup = document.getElementsByClassName("SlidingPanelsContentGroup",$(slidingContentId),"div");
		for(var j=0; j<arrSlidingPanelsContentGroup.length; j++)
		{
			arrSlidingPanelsContentGroup[j].style.width = "10000%"
		}
		
		/* MYH_IS200809 Chen */
		
		
		/* Get survey ID */
		var arrA_XsurveyID=document.getElementsByClassName("A_XsurveyID",$(slidingContentId),"div");
		var arrA_surveyID = new Array();		
		
		/* Count the number of survey portlets (questions) */
		var maxNum = document.getElementsByClassName(slidingContentClassName,$(slidingContentId),"div").length;
		var content = '';
		
		/* Find path to TS */
                var rootPath = document.getElementById('flashlight').innerHTML;
                
		arrXF = document.getElementsByClassName("NDate",$(slidingContentId),"span");
		arrXFX = document.getElementsByClassName("hintMsg",null,"span");
		
 		
		for(var x=1; x<=maxNum; x++)
		{
			j=x-1
			arrXFX[j].id="XFX_"+j;
			arrXF[j].id="XF_"+j;
			arrA_XsurveyID[j].id="A_XsurveyID_"+j;
			
			
			if (document.getElementsByClassName("langToggleColor",null,"a").length>0)
			{
				if (document.getElementsByClassName("langToggleColor",null,"a")[0].title=='English')
					{
						document.getElementById(arrXFX[j].id).innerHTML='Perhatian: Keputusan akan dikemaskini setiap minggu'; // Translates hint text
					}
			}
			
			document.getElementById(arrXF[j].id).innerHTML='#&nbsp;'+x+'&nbsp;'; // Writes question number
			arrA_surveyID[j]=document.getElementById(arrA_XsurveyID[j].id).innerHTML;
			content = content + '<a class="SlidingThumbnail" href="#"><img src="'+rootPath+'/application_resources/GSTResources/images/thumbs/'+arrA_surveyID[j]+'.jpg" height=34 width=51 /></a>&nbsp;';	// Writes thumb pathes
		}
			document.getElementById('farmland').innerHTML=content;	//Display thumbs
			
		/* MYH_IS200809 End */
		
		
		/* Hide slide control buttons if surveys less than 10, *Disabled*
			if (maxNum < 10)
		{ 
		document.getElementById('hsbcAmanahSlideToPrevious').innerHTML='';
	  	document.getElementById('hsbcAmanahSlideToNext').innerHTML='';
		}
		*/

	
		
		var sp2 = new Spry.Widget.SlidingPanels(slidingContentId);

		var btnPrevious = $("hsbcAmanahSlideToPrevious");
		var btnNext = $("hsbcAmanahSlideToNext");
		btnPrevious = hsbcJsExtendObject(btnPrevious, {onclick:function()
		{
			sp2.showPreviousPanel();
			showActiveThumbnail(sp2);
			slidingControlImageChange(sp2);
			return false;
		}});
		btnNext = hsbcJsExtendObject(btnNext, {onclick:function()
		{
			sp2.showNextPanel();
			showActiveThumbnail(sp2);
			slidingControlImageChange(sp2);
			return false;
		}});
		
		/* set slider control */
		var arrSlidingContent = document.getElementsByClassName(slidingContentClassName,$(slidingContentId),"div");
		for(var j=0; j<arrSlidingContent.length; j++)
		{
			arrSlidingContent[j].id = slidingContentIdPrefix + j;
			arrSlidingContent[j].style.styleFloat = "left"; //ie /* adjusted in JavaScript to ensure the non-JavaScript looks good as well */
			arrSlidingContent[j].style.cssFloat = "left"; //non ie /* adjusted in JavaScript to ensure the non-JavaScript looks good as well */
		}
		var arrSlidingThumbnailLinks = document.getElementsByClassName(null,$(slidingControlId),"a");
		for(var j=0; j<arrSlidingThumbnailLinks.length; j++)
		{
			arrSlidingThumbnailLinks[j].style.visibility = "visible";
		}
		var arrSlidingThumbnail = document.getElementsByClassName(slidingThumbnailClassName,$(slidingControlId),"a");
		for(var j=0; j<arrSlidingThumbnail.length; j++)
		{
			arrSlidingThumbnail[j].id = slidingThumbnailIdPrefix + j;
			arrSlidingThumbnail[j] = hsbcJsExtendObject(arrSlidingThumbnail[j], {onclick:function()
			{
				var curID = this.id.split(slidingThumbnailIdPrefix)[1];
				sp2.showPanel(slidingContentIdPrefix+curID);
				showActiveThumbnail(sp2);
				slidingControlImageChange(sp2);
				if (document.getElementsByClassName("jstPollsForm",$(slidingContentId),"form").length>0)
				{
					pollsFormControl(sp2); /* for polls, avoid tabbing to the next slide */
				}
				return false;
			}});
		}
		if (arrSlidingThumbnail.length<10)
		{
			btnPrevious.style.visibility = "hidden";
			btnNext.style.visibility = "hidden";
		}
		showActiveThumbnail(sp2);
		
		/* form validation for polls */
		if (document.getElementsByClassName("jstPollsForm",$(slidingContentId),"form").length>0)
		{
			pollsFormControl(sp2); /* for polls, avoid tabbing to the next slide */
			pollsValidation();
		}
		
	


                /* MYH_IS080927 Chen - Slide back when error message exist */			
		if ($("error_info"))
		{
                        var currentPanel0 = document.getElementById('error_info').parentNode.parentNode.parentNode.parentNode.parentNode.id;  

                	var tempDisableAnimation = sp2.enableAnimation;
			sp2.enableAnimation = false;
			sp2.showPanel(currentPanel0);
			sp2.enableAnimation = tempDisableAnimation;
                        
         		showActiveThumbnail(sp2);
	        	slidingControlImageChange(sp2);
	        	pollsFormControl(sp2);
			return false;
                }


                /* MYH_IS081008 Chen - Slide back when submitted */			
		if ($("answered"))
		{
                var arrAnswered = document.getElementsByClassName('answered1',$(slidingContentId),"div");
                var a = arrAnswered.length;
                for(j=0; j<a;j++)
                {
                arrAnswered[j].id=j;
        	}
		       
                var currentPanelX = document.getElementById(j-1).parentNode.parentNode;
               	
               	var tempDisableAnimation = sp2.enableAnimation;
		sp2.enableAnimation = false;
		sp2.showPanel(currentPanelX);
		sp2.enableAnimation = tempDisableAnimation;
                       
         	showActiveThumbnail(sp2);
	       	slidingControlImageChange(sp2);
		return false;	
			
         
		}
}

}

function showActiveThumbnail(sp2)
{
		var slidingContentIdPrefix = "slidingContent_";
		var slidingThumbnailIdPrefix = "slidingThumbnail_";
		var slidingThumbnailHoverClassName = "thumbNailsHover";
		
		if($("divThumbnailHover"))
			$("divThumbnailHover").parentNode.removeChild($("divThumbnailHover"));
		var divBorder = document.createElement("span");
		divBorder.className = slidingThumbnailHoverClassName;
		divBorder.setAttribute("id","divThumbnailHover");
		$(slidingThumbnailIdPrefix+sp2.currentPanel.id.split(slidingContentIdPrefix)[1]).appendChild(divBorder);
}

function slidingControlImageChange(sp2)
{
	var slidingContentId = "hsbcAmanahSlide01";
	var slidingContentClassName = "SlidingPanelsContent";
	var slidingContentIdPrefix = "slidingContent_";
	var btnPrevious = $("hsbcAmanahSlideToPrevious");
	var btnNext = $("hsbcAmanahSlideToNext");
	
	var curID = sp2.currentPanel.id.split(slidingContentIdPrefix)[1];
	var maxID = document.getElementsByClassName(slidingContentClassName,$(slidingContentId),"div").length-1;


	
	// disable unnecessary
	if (curID==0)
	{
		btnPrevious.childNodes[0].src = btnPrevious.childNodes[0].src.replace("icon-arrow-left.gif", "icon-arrow-left_dim.gif");
		btnNext.childNodes[0].src = btnNext.childNodes[0].src.replace("icon-arrow-right_dim.gif", "icon-arrow-right.gif");
	}else if (curID==maxID)
	{
		btnNext.childNodes[0].src = btnNext.childNodes[0].src.replace("icon-arrow-right.gif", "icon-arrow-right_dim.gif");
		btnPrevious.childNodes[0].src = btnPrevious.childNodes[0].src.replace("icon-arrow-left_dim.gif", "icon-arrow-left.gif");
	}else
	{
		btnNext.childNodes[0].src = btnNext.childNodes[0].src.replace("icon-arrow-right_dim.gif", "icon-arrow-right.gif");
		btnPrevious.childNodes[0].src = btnPrevious.childNodes[0].src.replace("icon-arrow-left_dim.gif", "icon-arrow-left.gif");		
	}


}

/* slide_show.js */
function initHsbcAmanahSlide()
{
titleStr = $("glossary").innerHTML;
rExp = /Poll/gi;
results = titleStr.search(rExp);

	if ($("hsbcAmanahSlide01") && results < 0)
	{
		var slidingContentId = "hsbcAmanahSlide01";
		var slidingControlId = "slidingControl";
		var slidingContentClassName = "SlidingPanelsContent";
		var slidingThumbnailClassName = "SlidingThumbnail";
		var slidingContentIdPrefix = "slidingContent_";
		var slidingThumbnailIdPrefix = "slidingThumbnail_";
		var slidingThumbnailId = "hsbcAmanahSlide02";
		
		var arrSlidingPanelsContentGroup = document.getElementsByClassName("SlidingPanelsContentGroup",$(slidingContentId),"div");
		for(var j=0; j<arrSlidingPanelsContentGroup.length; j++)
		{
			arrSlidingPanelsContentGroup[j].style.width = "10000%"
		} 
		
		var sp2 = new Spry.Widget.SlidingPanels(slidingContentId);
		var sp3 = new Spry.Widget.SlidingPanels(slidingThumbnailId);
		
		var btnPrevious = $("hsbcAmanahSlideToPrevious");
		var btnNext = $("hsbcAmanahSlideToNext");
		btnPrevious = hsbcJsExtendObject(btnPrevious, {onclick:function()
		{
			sp3.showPreviousPanel();
			showActiveThumbnail(sp2);
			slidingControlImageChange(sp3);
			return false;
		}});
		btnNext = hsbcJsExtendObject(btnNext, {onclick:function()
		{
			sp3.showNextPanel();
			showActiveThumbnail(sp2);
			slidingControlImageChange(sp3);
			return false;
		}});
		
		/* set slider control */
		var arrSlidingContent = document.getElementsByClassName(slidingContentClassName,$(slidingContentId),"div");
		for(var j=0; j<arrSlidingContent.length; j++)
		{
			arrSlidingContent[j].id = slidingContentIdPrefix + j;
		}
		var arrSlidingThumbnail = document.getElementsByClassName(slidingContentClassName,$(slidingThumbnailId),"div");
		for(var j=0; j<arrSlidingThumbnail.length; j++)
		{
			arrSlidingThumbnail[j].id = slidingContentIdPrefix + j;
		}
		var arrSlidingThumbnail = document.getElementsByClassName(slidingThumbnailClassName,$(slidingControlId),"a");
		for(var j=0; j<arrSlidingThumbnail.length; j++)
		{
			arrSlidingThumbnail[j].id = slidingThumbnailIdPrefix + j;
			arrSlidingThumbnail[j] = hsbcJsExtendObject(arrSlidingThumbnail[j], {onclick:function()
			{
				var curID = this.id.split(slidingThumbnailIdPrefix)[1];
				sp2.showPanel(slidingContentIdPrefix+curID);
				showActiveThumbnail(sp2);
				slidingControlImageChange(sp3);
				return false;
			}});
		}
		if (arrSlidingThumbnail.length<10)
		{
			btnPrevious.style.visibility = "hidden";
			btnNext.style.visibility = "hidden";
		}
		showActiveThumbnail(sp2);
		
		/* form validation for polls */
		if (document.getElementsByClassName("jstPollsForm",$(slidingContentId),"form").length>0)
			pollsValidation();
	}
}

function showActiveThumbnail(sp2)
{
		var slidingContentIdPrefix = "slidingContent_";
		var slidingThumbnailIdPrefix = "slidingThumbnail_";
		var slidingThumbnailHoverClassName = "thumbNailsHover";
		
		if($("divThumbnailHover"))
			$("divThumbnailHover").parentNode.removeChild($("divThumbnailHover"));
		var divBorder = document.createElement("span");
		divBorder.className = slidingThumbnailHoverClassName;
		divBorder.setAttribute("id","divThumbnailHover");
		$(slidingThumbnailIdPrefix+sp2.currentPanel.id.split(slidingContentIdPrefix)[1]).appendChild(divBorder);
}
function slidingControlImageChange(sp3)
{
	var slidingContentId = "hsbcAmanahSlide02";
	var slidingContentClassName = "SlidingPanelsContent";
	var slidingContentIdPrefix = "slidingContent_";
	var btnPrevious = $("hsbcAmanahSlideToPrevious");
	var btnNext = $("hsbcAmanahSlideToNext");
	
	var curID = sp3.currentPanel.id.split(slidingContentIdPrefix)[1];
	var maxID = document.getElementsByClassName(slidingContentClassName,$(slidingContentId),"div").length-1;
	
	// disable unnecessary
	if (curID==0)
	{
		btnPrevious.childNodes[0].src = btnPrevious.childNodes[0].src.replace("slide-prev.gif", "slide-prev-dim.gif");
		btnNext.childNodes[0].src = btnNext.childNodes[0].src.replace("slide-next-dim.gif", "slide-next.gif");
	}else if (curID==maxID)
	{
		btnNext.childNodes[0].src = btnNext.childNodes[0].src.replace("slide-next.gif", "slide-next-dim.gif");
		btnPrevious.childNodes[0].src = btnPrevious.childNodes[0].src.replace("slide-prev-dim.gif", "slide-prev.gif");
	}else
	{
		btnNext.childNodes[0].src = btnNext.childNodes[0].src.replace("slide-next-dim.gif", "slide-next.gif.gif");
		btnPrevious.childNodes[0].src = btnPrevious.childNodes[0].src.replace("slide-prev-dim.gif", "slide-prev.gif");		
	}
}