var m_nMinWidth = 650;
var m_nMinHeight = 600;

var nRealImageWidth = 960;
var nRealImageHeight = 600;
var nScale = nRealImageWidth / nRealImageHeight;

var nImageWidth = 0;
var nImageHeight = 0;

// ****************************************************************************
// ready
// ****************************************************************************
function ready() {
  // btn1
  var elemBtn = $('al');  
  elemBtn.observe('mouseover', this.overBtn.bind(elemBtn));
  elemBtn.observe('mouseout', this.outBtn.bind(elemBtn));
  // btn2
  var elemBtn = $('pl');  
  elemBtn.observe('mouseover', this.overBtn.bind(elemBtn));
  elemBtn.observe('mouseout', this.outBtn.bind(elemBtn));
  
	updateSize();  
}

// ****************************************************************************
// overBtn
// ****************************************************************************
function overBtn(evt) {
  // btn
  var elemBtnOff = this.down('.off');
  elemBtnOff.style.visibility = "hidden";
  
  var elemBtnOn = this.down('.on');
  elemBtnOn.style.visibility = "visible";
  
  // statement
  var elemStatment = $(this.id+"_statement");
  elemStatment.style.visibility = "visible";
  
  evt.element().setStyle({cursor:"pointer"});  
}

// ****************************************************************************
// outBtn
// ****************************************************************************
function outBtn(evt) {
  var elemBtnOff = this.down('.on');
  elemBtnOff.style.visibility = "hidden";
  
  var elemBtnOn = this.down('.off');
  elemBtnOn.style.visibility = "visible";
  
  // statement
  var elemStatment = $(this.id+"_statement");
  elemStatment.style.visibility = "hidden";
}

// ****************************************************************************
// updateSize
// ****************************************************************************
function updateSize() {
	var viewDim = document.viewport.getDimensions();

	// get viewport size	
	nImageWidth = viewDim.width;
	nImageHeight = viewDim.height;
	if (nImageHeight < m_nMinHeight) {
		nImageHeight = m_nMinHeight;
	} 	
	if (nImageWidth < m_nMinWidth) {
		nImageWidth = m_nMinWidth;
	} 	

	var strWidth = nImageWidth + "px";
	var strHeight = nImageHeight + "px";
	
	// update container heights	
	$("slidesHolder").style.width = strWidth;
	$("slidesHolder").style.height = strHeight;
	
  var elemImg = $("home_back");

  if ((nImageWidth / nScale) < nImageHeight) {
    elemImg.width = nImageHeight * nScale;
    elemImg.height = nImageHeight;
  }
  else {
    elemImg.width = nImageWidth;		
    elemImg.height = nImageWidth / nScale;
  }
  elemImg.style.visibility = "visible";
}

function test() {
	var viewDim = document.viewport.getDimensions();

	// get viewport size	
	nImageWidth = viewDim.width;
	nImageHeight = viewDim.height;
  
  var elemOverlay = $('overlay1');
  elemOverlay.style.width = nImageWidth + "px"; 
  elemOverlay.style.height = nImageHeight + "px"; 
  elemOverlay.style.visibility = "visible";
  elemOverlay.setOpacity(0);
  
  new Effect.Opacity(elemOverlay, { from: 0, to: 1, duration: 1, afterFinish: this.showBackground.bind(this) });

}

function showBackground() {
}