/*

The thing to remember when editing this is that the content has to be valid
HTML. I've enclosed all the variables in single quotes which means that you can
use double quotes in your HTML. The variables with a letter+"dropimages" are the
sliders and there are 3 of 'em. The bits they are made up of are quite complex
so lets have a look at one:

   <img src="./images/003s.jpg" border="0" onclick="arotateimage(img003,txt001);">
        1---------------------- 2---------          3----------- 4----- 5-----
        
Part 1 is the image unresized and I've kept to the formula of saving them as a 3
       number then "s", "b" or nothing. As you can guess the "s" stands for
       small and the "b" stands for... you guessed it, big. The small images
       need to be exactly 142 x 105 pixels in order for the sliders to work
       properly. Generally landscape images scale to this size with no problem
       but portrait images will need to be shrunk so taht the height is 105px in
       Photoshop. Next create an image 142 x 105 pixels and fill with #666699,
       cut and paste the shrunk image and paste into the middle of the 142 x 105
       pixels image. Save as XXXs.jpg where XXX is the number of the original...
       which should be saved as XXXb.jpg.
Part 2 is the border of the image, we don't want it to have a border!
Part 3 This is the function that rotates the images. adropimages must call
       arotateimage, bdropimages must call brotateimage... and so on.
Part 4 is the bigger version of the image which is displayed in the center of
       the screen when the little one is pressed because these are of reasonable
       quality I've saved them as XXX.jpg. They mustn't be bigger than 394 x 292
       pixels. Again it's easy enough to shrink images down to this size using
       Photoshop on a landscape image but not wuite so easy on portrait. To
       repeat myself: Get the original and proportionally shrink it so that it's
       no higher than 292px. Create an image 394 x 292 pixels wide and high and
       fill with #666699. Select all and copy the original, resized image. With
       the new image active paste the resized image into it. Photoshop should
       center the pasted image automatically but your version may be diferent to
       mine. Save the result to XXX.jpg where the original is XXXb.jpg. In terms
       of image processing it may be best if you start with an original image
       and save it as (for example) 123b.jpg, then follow the above instructions
       for creating a mid-sized version and save as 123.jpg then resize to 142 x
       105 pixels and save as 123s.jpg (This should be easier as you'll already
       have the image in landscape format). Part 5 This is the text that will be
       swapped into the left-hand panel when the slider is pressed,

The images that get swapped in are of the format "img"+number. It makes sense if
they maintain the format above so that img123 relates to 123.jpg. The are
written thus:

   <a href="./images/001b.jpg"><img src="./images/001.jpg" alt="" border="0"></a>

The thing to mainly remember is the border attribute and to make it 0 or they'll
be a black border around the image and that'd be ugly!

The text that is swapped follows a similar format except that to save repitition
I've often called the same text for different slider images. This makes sense at
the minute but might change.

The 3 sliders and their attributes follow.

*/ 
// Top Slider
var adropimages=new Array();
 adropimages[0]='<img src="./images/003s.jpg" border="0" onclick="arotateimage(img003,txt001);">';
 adropimages[1]='<img src="./images/001s.jpg" border="0" onclick="arotateimage(img001,txt001);">';
 adropimages[2]='<img src="./images/004s.jpg" border="0" onclick="arotateimage(img004,txt001);">';
 adropimages[3]='<img src="./images/002s.jpg" border="0" onclick="arotateimage(img002,txt001);">';
// Top slider images
var img001='<a href="./images/001b.jpg"><img src="./images/001.jpg" alt="" border="0"></a>';
var img003='<a href="./images/003b.jpg"><img src="./images/003.jpg" alt="" border="0"></a>';
var img004='<a href="./images/004b.jpg"><img src="./images/004.jpg" alt="" border="0"></a>';
var img002='<a href="./images/002b.jpg"><img src="./images/002.jpg" alt="" border="0"></a>';
// Top slider text
var txt001='<p class="header">Project</p>House extension, Crouch End, North London.';
 
 
 
// Middle Slider
var bdropimages=new Array();
 bdropimages[0]='<img src="./images/014s.jpg" border="0" onclick="brotateimage(img014,txt014);">';
 bdropimages[1]='<img src="./images/015s.jpg" border="0" onclick="brotateimage(img015,txt015);">';
 bdropimages[2]='<img src="./images/016s.jpg" border="0" onclick="brotateimage(img016,txt016);">';
 bdropimages[3]='<img src="./images/017s.jpg" border="0" onclick="brotateimage(img017,txt017);">';
// Middle slider images
var img014='<a href="./images/014b.jpg"><img src="./images/014.jpg" alt="" border="0"></a>';
var img015='<a href="./images/015b.jpg"><img src="./images/015.jpg" alt="" border="0"></a>';
var img016='<a href="./images/016b.jpg"><img src="./images/016.jpg" alt="" border="0"></a>';
var img017='<a href="./images/017b.jpg"><img src="./images/017.jpg" alt="" border="0"></a>';
// Middle slider text
var txt014='<p class="header">Project</p>Extension to 17C Grade II listed thatched cottage at Hempstead, Essex.';
var txt015='<p class="header">Project</p>Hempstead, Essex. Oak framed garden room extension with underfloor heating.';
var txt016='<p class="header">Project</p>Hempstead, Essex. New kitchen wing to Grade II listed house.';
var txt017='<p class="header">Project</p>Hempstead, Essex. 2-storey rear extension with mansard roof.';



// Bottom Slider
var cdropimages=new Array();
 cdropimages[0]='<img src="./images/006s.jpg" border="0" onclick="crotateimage(img006,txt002);">';
 cdropimages[1]='<img src="./images/007s.jpg" border="0" onclick="crotateimage(img007,txt002);">';
 cdropimages[2]='<img src="./images/008s.jpg" border="0" onclick="crotateimage(img008,txt002);">';
 cdropimages[3]='<img src="./images/009s.jpg" border="0" onclick="crotateimage(img009,txt003);">';
 cdropimages[4]='<img src="./images/011s.jpg" border="0" onclick="crotateimage(img011,txt002);">';
 cdropimages[5]='<img src="./images/012s.jpg" border="0" onclick="crotateimage(img012,txt002);">';
// Bottom slider images
var img006='<a href="./images/006b.jpg"><img src="./images/006.jpg" alt="" border="0"></a>';
var img007='<a href="./images/007b.jpg"><img src="./images/007.jpg" alt="" border="0"></a>';
var img008='<a href="./images/008b.jpg"><img src="./images/008.jpg" alt="" border="0"></a>';
var img009='<a href="./images/009b.jpg"><img src="./images/009.jpg" alt="" border="0"></a>';
var img011='<a href="./images/011b.jpg"><img src="./images/011.jpg" alt="" border="0"></a>';
var img012='<a href="./images/012b.jpg"><img src="./images/012.jpg" alt="" border="0"></a>';
// Bottom slider text
var txt002='<p class="header">Project</p>New Primary School, Great Wilbraham, Cambridge.';
var txt003='<p class="header">Project</p>New Primary School, Papworth Everard, Cambridge.';

/*

The scroll is interesting and is where you'll probably edit the most. It follows
the format of:

   The Building Exploratory <a href="http://www.buildingexploratory.org.uk">http://www.buildingexploratory.org.uk</a><br/>
   1-----------------------          2------------------------------------  3------------------------------------    4----
   
Part 1 is the text you want to use. Can be the name of the organisation for
       instance?
Part 2 is the address of the site, easy enough to copy and paste the address
       from a browser window for this
Part 3 is the text you want to use for the link
Part 4 is a newline command, this is very important. As important is the
       surrounding "<div class="scroll"><p>" and "</p></div>"!

*/

// About, Services and Links
var txt013='<p class="header">About</p>Anil has been an architectural advisor at Cambridge Citizens Advice Bureau since 1987. He is a member of the Society for the Protection of Ancient Buildings, and a regular participant in Architect in the House, an annual event organised by the RIBA in aid of the charity Shelter.';
var txt008='<p class="header">Services</p>Indigo is able to offer services and advice relating to:<br/>&#187;Listed buildings<br/>&#187;Modern buildings<br/>&#187;Energy efficiency<br/>&#187;Landscaping<br/>&#187;Graphic design and signage<br/>&#187;Furniture and interior design.';
var txt007='<p class="header">Links</p>A selection of links which may be of some use.';
// Picture of Anil
var img013='<img src="./images/013.jpg" alt="">';
// Links text. May need editing regularly!
var txt006='<div class="scroll"><p>Architects Registration Board <a href="http://www.arb.org.uk">http://www.arb.org.uk</a><br/>Architecture Centre Network <a href="http://www.architecturecentre.net">http://www.architecturecentre.net</a><br/>Architecture Centre, Bristol <a href="http://www.architecturecentre.co.uk">http://www.architecturecentre.co.uk</a><br/>Architecture Centre, Kent <a href="http://www.architecturecentre.org">http://www.architecturecentre.org</a><br/>Architecture Foundation <a href="http://www.architecturefoundation.org.uk">http://www.architecturefoundation.org.uk</a><br/>Architecture Link <a href="http://www.architecturelink.org.uk">http://www.architecturelink.org.uk</a><br/>Architect Student Community <a href="http://www.architectstudent.net">http://www.architectstudent.net</a><br/>Architecture Week <a href="http://www.architectureweek.org.uk">http://www.architectureweek.org.uk</a><br/>Building Centre Trust <a href="http://www.buildingcentretrust.org">http://www.buildingcentretrust.org</a><br/>The Building Exploratory <a href="http://www.buildingexploratory.org.uk">http://www.buildingexploratory.org.uk</a><br/>CABE Commission for Architecture and the Built Environment <a href="http://www.cabe.org.uk">http://www.cabe.org.uk</a><br/>CUBE Centre for Understanding of the Built Environment (Manchester) <a href="http://www.cube.org.uk">http://www.cube.org.uk</a><br/>Docomomo UK <a href="http://www.docomomo.com">http://www.docomomo.com</a><br/>Humber Centre for Excellence in the Built Environment <a href="http://www.hullbuiltenvironment.co.uk">http://www.hullbuiltenvironment.co.uk</a><br/>The Lighthouse, Glasgow <a href="http://www.thelighthouse.co.uk">http://www.thelighthouse.co.uk</a><br/>London Open House <a href="http://www.londonopenhouse.org">http://www.londonopenhouse.org</a><br/>Northern Architecture <a href="http://www.northernarchitecture.com">http://www.northernarchitecture.com</a><br/>P.L.A.C.E. Belfast <a href="http://www.place.uk.net">http://www.place.uk.net</a><br/>RIAS - Royal Incorporation of Architects Scotland <a href="http://www.rias.org.uk">http://www.rias.org.uk</a><br/>RIBA <a href="http://www.architecture.com">http://www.architecture.com</a><br/>RIBA Royal Institute of British Architects <a href="http://www.riba.org">http://www.riba.org</a><br/>SHAPE Cambridge <a href="http://www.shape-cambridge.org.uk">http://www.shape-cambridge.org.uk</a><br/>Solent Centre for Architecture + Design <a href="http://www.solentcentre.org.uk">http://www.solentcentre.org.uk</a><br/>Twentieth Century Society <a href="http://www.c20society.org.uk">http://www.c20society.org.uk</a><br/>Urbis - The Centre for Urban Culture <a href="http://www.urbis.org.uk">http://www.urbis.org.uk</a></p></div>';