var infoText = "<div class=\"js-box\">" +
               "   <div class=\"name\">" +
               "      <p>VAT Registration Number</p>\n" +
               "   </div>\n" +
               "   <div class=\"value\">\n" +
               "      <p>644 4076 41</p>\n" +
               "   </div>\n" +
               "   <div class=\"name\">\n" +
               "      <p>Registered in England</p>\n" +
               "   </div>\n" +
               "   <div class=\"value\">\n" +
               "      <p>2964125</p>\n" +
               "   </div>\n" +
               "   <div class=\"name\">\n" +
               "      <p>Registered Office</p>\n" +
               "   </div>\n" +
               "   <div class=\"value\">\n" +
               "      <p>4 Peel House, Barttelot Road, Horsham, West Sussex. RH12 1DE</p>\n" +
               "   </div>\n" ;
               "</div>\n" ;

var contactText = "<div class=\"js-box\">" +
                  "   <div class=\"name\">\n" + 
                  "      <p>Address</p>\n" + 
                  "   </div>\n" + 
                  "   <div class=\"value\">\n" + 
                  "      <p>3 Old Chapel<br />\n" + 
                  "         The Limes<br />\n" + 
                  "         Cowbridge<br />\n" + 
                  "         Vale of Glamorgan<br />\n" + 
                  "         CF71 7BJ<br />\n" + 
                  "         United Kingdom</p>\n" + 
                  "   </div>\n" + 
                  "   <div class=\"name\">\n" + 
                  "      <p>Phone</p>\n" + 
                  "   </div>\n" + 
                  "   <div class=\"value\">\n" + 
                  "      Office :  +44 (0) 1446 776498<br />\n" + 
                  "      Mobile :  +44 (0) 7770 621312<br />\n" + 
                  "   </div>\n" + 
                  "   <div class=\"name\">\n" + 
                  "      <p>E-Mail</p>\n" + 
                  "   </div>\n" + 
                  "   <div class=\"value\">\n" + 
                  "      <a href=\"mailto:andyc@caesura.co.uk\">andyc\@caesura.co.uk</a>\n" + 
                  "   </div>\n";
                  "</div>\n";

// State Model : 1=info 2=contact 3=info/contact 4=contact/info 5=none
//
// This is to get the latest clicked one on top, so contact and info will 
// appear in different order depending on which one is clicked first.
//
// Also : click when there makes it disappear.
//  Five states then : 
//    1 : info on its own,
//    2 : contact on its own,
//    3 : info AND contact, info first.
//    4 : info AND contact, contact first.
//    5 : none.
//
// (prob not very scalable ...)
//
// +--------------+--------+-----------+----------------+----------------+------------+
// |              | 1=info | 2=contact | 3=info/contact | 4=contact/info | 5=none     |
// +--------------+--------+-----------+----------------+----------------+------------+
// | clickInfo    |   5    |     3     |       2        |       2        |    1       |
// +--------------+--------+-----------+----------------+----------------+------------+
// | clickContact |   4    |     5     |       1        |       1        |    2       |
// +--------------+--------+-----------+----------------+----------------+------------+

var state=5; // start with none.

function clickInfo () {
   switch (state) {
      case 1:
         state=5;
         document.getElementById('div-ic-top').innerHTML    = "";
         document.getElementById('div-ic-bottom').innerHTML = "";
	 break;
      case 2:
         state=3;
         document.getElementById('div-ic-top').innerHTML    = infoText;
         document.getElementById('div-ic-bottom').innerHTML = contactText;
	 break;
      case 3:
         state=2;
         document.getElementById('div-ic-top').innerHTML    = "";
         document.getElementById('div-ic-bottom').innerHTML = contactText;
	 break;
      case 4:
         state=2;
         document.getElementById('div-ic-top').innerHTML    = "";
         document.getElementById('div-ic-bottom').innerHTML = contactText;
	 break;
      case 5:
         state=1;
         document.getElementById('div-ic-top').innerHTML    = infoText;
         document.getElementById('div-ic-bottom').innerHTML = "";
	 break;
      default:
         state=5;
         document.getElementById('div-ic-top').innerHTML    = "";
         document.getElementById('div-ic-bottom').innerHTML = "";
   }
} // end function clickInfo

function clickContact () {
   switch (state) {
      case 1:
         state=4;
         document.getElementById('div-ic-top').innerHTML    = contactText;
         document.getElementById('div-ic-bottom').innerHTML = infoText;
	 break;
      case 2:
         state=5;
         document.getElementById('div-ic-top').innerHTML    = "";
         document.getElementById('div-ic-bottom').innerHTML = "";
	 break;
      case 3:
         state=1;
         document.getElementById('div-ic-top').innerHTML    = infoText;
         document.getElementById('div-ic-bottom').innerHTML = "";
	 break;
      case 4:
         state=1;
         document.getElementById('div-ic-top').innerHTML    = infoText;
         document.getElementById('div-ic-bottom').innerHTML = "";
	 break;
      case 5:
         state=2;
         document.getElementById('div-ic-top').innerHTML    = "";
         document.getElementById('div-ic-bottom').innerHTML = contactText;
	 break;
      default:
         state=5;
         document.getElementById('div-ic-top').innerHTML    = "";
         document.getElementById('div-ic-bottom').innerHTML = "";
   }
} // end function clickContact