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

/*FUNGSI TRANSPARAN--*/
function lightup(imageobject, opacity){
 if (navigator.appName.indexOf("Netscape")!=-1
  &&parseInt(navigator.appVersion)>=5)
    imageobject.style.MozOpacity=opacity/100
 else if (navigator.appName.indexOf("Microsoft")!= -1 
  &&parseInt(navigator.appVersion)>=4)
    imageobject.filters.alpha.opacity=opacity
}

/* 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;
			t[i].id = i;
			if (i==2){t[2].className ='phRotatingElement phPhoto transparent';}
			if (i==3){t[3].className ='phRotatingElement phPhoto transparent';}
			if (i==1){t[1].className ='phRotatingElement phPhoto';}
			if (i==4){t[4].className ='phRotatingElement phPhoto';}
		}
	},
	/*
	* 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:'.',
	rightLink:'.',
	
	// 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*/



/* 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 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:767,image_height:421,image_scale:0.8,width:922,height:420});
	}
	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();
		}
	}
	
	
	
	/* 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 */
	
	
	
	/* 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('../images/bg_redline.jpg')";
			slidingPanel = new HW.Animator($(slidingPanelId),menuEndPoint, menuStartPoint, null);HW.preventDefault(e);
			}
			else {
			this.style.backgroundImage = "url('../images/bg_redline.jpg')";
			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 */
	
	
	
	
	}catch(e){}
});