// Static varaiables
var totalReasons;

// Elements
var infoBox, infoTitle, infoDesc, infoContent;

// Timeouts
var timeoutReasons, inTime, outTime;

// Arrays
var reasonText    = new Array();


function getElm(eID) {
	return document.getElementById(eID);
}

function initialiseElements() {
  // Get elements
  infoBox       = getElm("info-box");
  infoTitle     = getElm("reason-title");
  infoDesc      = getElm("reason-desc");
  infoContent   = getElm("reason-content");
  btn1          = getElm("button1");
  btn2          = getElm("button2");
  btn3          = getElm("button3");
  con1          = getElm("content1");
  con2          = getElm("content2");
  con3          = getElm("content3");
}

function initialiseReasonText() {
  // Set reasons
  reasonText[0] = "You can publicise your business, product or service to millions of potential customers and boost your sales.";
  reasonText[1] = "You can update your website with the latest products, news or prices much faster and cheaper than print based media.";
  reasonText[2] = "You can carry a company theme through your advertising campaigns linking them to your website thus creating brand awareness.";
  reasonText[3] = "Your business can be active and publicising itself 24 hours a day, 365 days a year.";
  reasonText[4] = "Your business has an extra outlet for taking orders.";
  reasonText[5] = "Content Management Systems can be put in place so that you can update any area of your website when you want, as often as you want.";
  reasonText[6] = "A website makes it easier for customers to do business with you when and where they want.";
  reasonText[7] = "You can compete with other contemporary companies who are already on the web taking advantage of the customers you could be benefiting from.";
  reasonText[8] = "You can put your web address on your business card and promotional material to enhance your image.";
  reasonText[9] = "Customers have more confidence in and prefer doing business with companies that they know something about.";
  
  totalReasons = 10;
}

function changeElements(direction) {
  // Next or previous?
  window.reasonNo += direction;
  // Loop around
  if (window.reasonNo <= -1) {
    window.reasonNo = totalReasons - 1;
  } else if (window.reasonNo >= (totalReasons)){
    window.reasonNo = 0;
  }
  // Change HTML
  infoTitle.innerHTML     = "Reason <span class=\"grey\">" + (window.reasonNo + 1) + " of " + totalReasons + "</span>";
  infoDesc.innerHTML      = "why it's a great idea to have a website...";
  infoContent.innerHTML   = reasonText[window.reasonNo];
  // Change again in 10 seconds
  timeoutReasons = setTimeout("nextReason(1);", 10000);  
}

function nextReason(direction) {
  // Just in case the user is interrupting a change
  clearTimeout(window.timeoutReasons);

  fadeOut("info-box");
  setTimeout("changeElements(" + direction + ")", 310);
  setTimeout("fadeIn(\"info-box\")", 320);
}

function show(eID) {
	getElm(eID).style.visibility='visible';
}

function hide(eID) {
	getElm(eID).style.visibility='hidden';
}

function setOpacity(eID, opacityLevel) {
	var eStyle = getElm(eID).style;
	eStyle.opacity = opacityLevel / 100;
	eStyle.filter = 'alpha(opacity='+opacityLevel+')';
}

function fade(eID, startOpacity, stopOpacity, duration) {
	var speed = Math.round(duration / 100);
	var timer = 0;
  
	if (startOpacity < stopOpacity){
		for (var i=startOpacity; i<=stopOpacity; i++) {
			setTimeout("setOpacity('"+eID+"',"+i+")", timer * speed);
			timer++;
		} return;
	}
  
	for (var i=startOpacity; i>=stopOpacity; i--) {
		setTimeout("setOpacity('"+eID+"',"+i+")", timer * speed);
		timer++;
	}
}

function fadeIn(eID) {
  clearTimeout(outTime);
  clearTimeout(inTime);
  
	setOpacity(eID, 0);
  var timer = 0;
	for (var i=1; i<=100; i++) {
		inTime = setTimeout("setOpacity('"+eID+"',"+i+")", timer * 5);
		timer++;
	}
}

function fadeOut(eID) {
  clearTimeout(outTime);
  clearTimeout(inTime);
  
	var timer = 0;
  
	for (var i=100; i>=1; i--) {
		outTime = setTimeout("setOpacity('"+eID+"',"+i+")", timer * 3);
		timer++;
	}
}

function pauseReasons() {
  pauseButton = document.getElementById("info-pause");
  
  if (pauseButton.title == "Pause") {
    clearTimeout(window.timeoutReasons);
    pauseButton.title = "Play";
    pauseButton.style.backgroundImage = "url(images/next.gif)";
  } else {
    nextReason(1);
    pauseButton.title = "Pause";
    pauseButton.style.backgroundImage = "url(images/pause.gif)";
  }
}

function quickHover(buttonID) {
  switch (buttonID) {
    case 1:
      btn1.style.backgroundPosition = "0px 0%";
      break;
    case 2:
      btn2.style.backgroundPosition = "0px 0%";
      break;
    case 3:
      btn3.style.backgroundPosition = "0px 0%";
      break;
    default:
      break;  
  }
}

function quickOut(buttonID) {
  if (window.buttonState != buttonID) {
    switch (buttonID) {
      case 1:
        btn1.style.backgroundPosition = "-221px 0%";
        break;
      case 2:
        btn2.style.backgroundPosition = "-221px 0%";
        break;
      case 3:
        btn3.style.backgroundPosition = "-221px 0%";
        break;
      default:
        break;  
    }
  }
}

function quickClick(buttonID) {
  window.buttonState = buttonID;
  changeButtonState(buttonID);
  
  clearTimeout(window.timeoutReasons);
  
  fadeOut("info-box");
  setTimeout("changeState()", 310);
  setTimeout("fadeIn(\"info-box\")", 320);
}

function changeButtonState(buttonID) {
  switch (buttonID) {
    case 1:
      btn1.style.backgroundPosition = "0px 0%";
      btn2.style.backgroundPosition = "-221px 0%";
      btn3.style.backgroundPosition = "-221px 0%";
      break;
    case 2:
      btn1.style.backgroundPosition = "-221px 0%";
      btn2.style.backgroundPosition = "0px 0%";
      btn3.style.backgroundPosition = "-221px 0%";
      break;
    case 3:
      btn1.style.backgroundPosition = "-221px 0%";
      btn2.style.backgroundPosition = "-221px 0%";
      btn3.style.backgroundPosition = "0px 0%";
      break;
    default:
      break;  
  }
}

function changeState() {
  switch (window.buttonState) {
    case 1:
      con1.style.visibility = "visible";
      con2.style.visibility = "hidden";
      con3.style.visibility = "hidden";
      break;
    case 2:
      con2.style.visibility = "visible";
      con1.style.visibility = "hidden";
      con3.style.visibility = "hidden";
      break;
    case 3:
      con3.style.visibility = "visible";
      con1.style.visibility = "hidden";
      con2.style.visibility = "hidden";
      break;
    default:
      break;  
  }
  if (window.buttonState == 1) {
    changeElements(1);
  }
}