// JavaScript Documentfunction 
var w=window.getScrollWidth();
var h=window.getScrollHeight();
var InnerW=w-400;
var leftWidth=w*0.745;//$('HomeLeft').getStyle('width');
var HomeLeftContentMargin=-600;
var leftPostition=4;//$('HomeLeftContent').getStyle('margin-left').toInt();
var leftToPostition=50;
var isOpen_Left=false;
var rightW;
var leftContentIdArr;

window.addEvent('domready',function(){
										rightW=$('HomeRight').getStyle('width').toInt()
										leftContentIdArr=new Array($("whoweare"),$("watwedo"),$("contactus"))
										
										//TODO
										$('page_style').remove();
										var css_arr=new Array("css/Index.css","css/Index2.css");
										var num=Math.round(Math.random()*(css_arr.length-1));
										new Asset.css(css_arr[num], {id: 'page_style'});
										///////

									});
//$('InnerRightContent').setStyle('width',InnerW+'px');
//alert($('InnerRightContent').getStyle('width').toInt());

/////////////// Right content panel
//var rightPannel=new Fx.Slide('InnerRightContent',{mode: 'horizontal'});
//rightPannel.hide();
///////////////

//alert($('InnerRightContent').getStyle('width').toInt());


function setLinkColorByClass(className,to)
{
var list = $$('.'+className+' a');
list.each(function(element) {
 	var ori_color=element.getStyle("color");
	var fx = new Fx.Styles(element, {wait:false});
 
	element.addEvent('mouseenter', function(){
		fx.start({
			color: to,
			'margin-right': 18
		});
	});
 
	element.addEvent('mouseleave', function(){
		fx.start({
			'color': ori_color,
			'margin-right': 0
		});
	});
});
}

function showInnerRightContent(type)
{
	$('InnerRightContent').setStyles({'margin-top':'50px','margin-left':'350px'});
	$('InnerRightContent').effect('opacity').start(0,1);
}


function BackToHome()
{
$('InnerRightContent').effect('opacity').start(1,0).chain(function(){
	$('InnerRightContent').effect('margin-left').start(350,0);																   
																   });

$('InnerRightContent').effect('width').start(InnerW,0).chain(function(){										
					   $('Back').effect('opacity').start(1,0);
					   $('HomeLeft').effect('width').start(0,leftWidth).chain(function(){
														$('HomeLeftContent').effect('opacity').start(0,1);
														$('HomeLeftContent').effect('margin-left').start(HomeLeftContentMargin,0);
																				  });     								
									  });
}


function leftContentClick(i)
{
	
	if(!isOpen_Left)
	{
		//$('HomeLeftContent').effect('margin-right').start(leftPostition,leftToPostition);
		isOpen_Left=true;
		leftContentIdArr[i].effect('opacity').start(0,1);
	}
	else
	{
		for(c=0;c<leftContentIdArr.length;c++)
		{
			
			leftContentIdArr[c].setStyle('opacity',0);
			leftContentIdArr[c].setProperty('z-index','0');
			leftContentIdArr[c].setProperty('display','none');
		}

		leftContentIdArr[i].effect('opacity').start(0,1);
		leftContentIdArr[i].setProperty('z-index','999');
		leftContentIdArr[i].setProperty('display','block');
	}
}

function closeLeft()
{
		for(c=0;c<leftContentIdArr.length;c++)
		{
			if(leftContentIdArr[c].getStyle('opacity')==1)
				leftContentIdArr[c].effect('opacity').start(1,0);
		}
		//$('HomeLeftContent').effect('margin-right').start(leftToPostition,leftPostition);																	
		isOpen_Left=false;
}


//////////  The right content control
function initial()
{
var rightSubjects=$$('.RightSubject a');
rightSubjects.each(function(rightSub,i)
						{
							// i is the index of which link I click, start from 0
							rightSub.addEvent('click',function(e){
									new Event(e).stop();
									if(isOpen_Left)
										closeLeft();
									$('HomeLeftContent').effect('opacity').start(1,0);
									$('HomeLeftContent').effect('margin-left',{wait:false}).start(0,HomeLeftContentMargin);
									$('HomeLeft').effect('width').start(leftWidth,0).chain(function(){
																							$('Back').effect('opacity').start(0,1);
																							// To do more.....
																							  }).chain(showInnerRightContent("m"));
										    //$('HomeLeftContent').effect('opacity',{duration:1000}).start(1,0);
																 });
						});
/////////////// End


$$('.LeftSubject a').each(function(leftSub,i)
								  {
									  leftSub.addEvent('click',function(e){
																		new Event(e).stop();
																		leftContentClick(i);
																		  });
								  });

}


window.onDomReady(function(e){

//// Back link event
$('Back').addEvent('click',BackToHome);
///// Home Left links
setLinkColorByClass('LeftSubject','#ff09b1');
///// Home right links
setLinkColorByClass('RightSubject','#ff09b1');

initial();
///////

						   });