//
//Contents
//========
//
//test stuff:
//fade an id to check you are looking at right one
//
//ie fixes:
//show background images correctly - needed for SLIDESHOWS
//
//
//QUICKCHANGE - use a link to change an image and some text - run on an object - listeners determine whether change on click/hover and whether to change back or not - uses title for replacement text and rel for new image src
//
//FADER - fade element in & out (leaving background visible) + blend to new image (using background)
//use standalone (class = fader) to fade single element, or call from other functions
//
//DROPDOWN - dropdown menu
//
//SLIDER - an animation in a panel - moves a single image up, down and/or sideways  -  needs to run on an object
//
//SLIDESHOW - works through an array of images - automatically or via next/previous (uses Fader blending to change image) - can hover related thumbnail too 
//runs on an object
//use css to set background depending on class & change class for new image - watch out for ie bug (x multi classes on single id)
//
//EXTERNALLINKS - links with class = external open in new window
//
//
//EXPANDTEXT - text appears then grows
////
//STRIPELISTS - any ul with class = stripeme - every other li gets new class = alt - use css to stripe


// ** 	Useful for testing you have correct id		
//Fader.opacity(myelement.id,100,0,800);
//



//Fix for ie to show background images correctly
try {
  document.execCommand("BackgroundImageCache", false, true);
} catch(err) {};


// QUICKCHANGE -  use a link to change an image and some text - run on an object - listeners determine whether change on click/hover and whether to change back or not - uses title for replacement text and rel for new image src
// changerclass: class of the links that make the change,
// imageid: the image that changes,
// textdivid: div holding the text that changes,
// defaulttext: text when nothing selected,
// defaultimg:image src when nothing selected,  
// thischanger: link currently selected,

var Quickchange = 
{
  
  init: function()
  {
  },

  showImg: function()
  {
	var thisChanger = document.getElementById(this.thischanger);
	var changeImg = document.getElementById(this.imageid);
	changeImg.src = thisChanger.rel;	
  },
  
  showText: function()
  {
	var prevChanger = document.getElementById(this.prevchanger);
	var thisChanger = document.getElementById(this.thischanger);
	var changeText = document.getElementById(this.textdivid);
	changeText.innerHTML = thisChanger.title;	
	if (this.thischangerclass) {
		Core.removeClass(prevChanger, this.thischangerclass);
		Core.addClass(thisChanger, this.thischangerclass);
	}
  },
  expandText: function()
  {
    Expander.expand(this.textdivid,this.startfont,this.maxfont,this.increment,this.expspeed);
  },

  hideImg: function()
  {
    	var changeImg = document.getElementById(this.imageid);
	changeImg.src = this.defaultimg;	
  },

  hideText: function()
  {
	var changeText = document.getElementById(this.textdivid);
    	var changeImg = document.getElementById(this.imageid);
	changeText.innerHTML = this.defaulttext;	
 	if (this.thischangerclass) {
		Core.removeClass(thisChanger, this.thischangerclass);
	} 
  },
  
  removeClass: function()
  {
	var thisChanger = document.getElementById(this.thischanger);
	if (this.thischangerclass) {
		Core.removeClass(thisChanger, this.thischangerclass);
	} 
  }};

//Core.start(Quickchange);



//http://brainerror.net/scripts/javascript/blendtrans/
//
//FADER - listens for hovers on class = fader - any fader object must have an id
//firefox - works on div containing other things, ie6 it doesn't
//
var Fader =  //elements of class = fader, fade when hovered & re-appear on mouse out //
{
  init: function()
  {
   faders = Core.getElementsByClass("fader");
    
    for (var i = 0; i < faders.length; i++)
    { 	
	Core.addEventListener(faders[i], "mouseover", Fader.fadeOutListener);
	Core.addEventListener(faders[i], "mouseout", Fader.fadeInListener);
    }

  },

  fadeOutListener : function(event) {
	Fader.opacity(this.id,100,0,1000);
        Core.preventDefault(event);
	Core.stopPropagation(event);
  },

  fadeInListener : function(event) {
	Fader.opacity(this.id,0,100,1000);
        Core.preventDefault(event);
	Core.stopPropagation(event);
  },

  opacity: function(id, opacStart, opacEnd, millisec) { //use with changeopac to fade & unfade objects**/
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("Fader.changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("Fader.changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
  },
	//change the opacity for different browsers
  changeOpac:function(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
  },


  blendimage:function(divid, imageid, imagefile, millisec) {
    var speed = Math.round(millisec / 100);
    var timer = 0;
    //set the current image as background
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
    //make image transparent
    Fader.changeOpac(0, imageid);
    //make new image
    document.getElementById(imageid).src = imagefile;
    //fade in image
    for(i = 0; i <= 100; i++) {
        setTimeout("Fader.changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
        timer++;
    }
  }
}; //fader//

//Core.start(Fader);


/** DROPDOWN **/

var Dropdown = {
  DDSPEED:10,
  DDTIMER : 15,
 
  init:function() {
    var headarray = Core.getElementsById("ddheader");
    for (var i = 0; i < headarray.length; i++)
    {	
	Core.addEventListener(headarray[i], "mouseover", Dropdown.ddShowMenuListener);
        Core.addEventListener(headarray[i], "focus", Dropdown.ddShowMenuListener);
        Core.addEventListener(headarray[i], "mouseout", Dropdown.ddHideMenuListener);
        Core.addEventListener(headarray[i], "blur", Dropdown.ddHideMenuListener);
      }
 
    var contentarray = Core.getElementsById("ddcontent");
    for (var i = 0; i < contentarray.length; i++)
    {  
	Core.addEventListener(contentarray[i], "mouseover", Dropdown.ddCancelHideMenuListener);
        Core.addEventListener(contentarray[i], "focus", Dropdown.ddCancelHideMenuListener);
        Core.addEventListener(contentarray[i], "mouseout", Dropdown.ddHideMenuListener);
        Core.addEventListener(contentarray[i], "blur", Dropdown.ddHideMenuListener);
    }
  },

  ddShowMenuListener: function(event) {
 	var fullid = this.id;
	var splitid = fullid.split("-");
	var idnumber = splitid[0];
	Dropdown.ddMenu(idnumber,1);
  },

 ddHideMenuListener: function(event) {
 	var fullid = this.id;
	var splitid = fullid.split("-");
	var idnumber = splitid[0];
	Dropdown.ddMenu(idnumber,0);
  },

 ddCancelHideMenuListener: function(event) {
 	var fullid = this.id;
	var splitid = fullid.split("-");
	var idnumber = splitid[0];
	Dropdown.cancelHide(idnumber);
  },

// main function to handle the mouse events //
 ddMenu:function(id,d){
	var h = document.getElementById(id + '-ddheader');
 	var c = document.getElementById(id + '-ddcontent');
   	clearInterval(c.timer);
  	if (d == 1){
    		clearTimeout(h.timer);
    		if (c.maxh && c.maxh <= c.offsetHeight){
			return
		}
    		else if (!c.maxh){
      			c.style.display = 'block';
      			c.style.height = 'auto';
      			c.maxh = c.offsetHeight;
      			c.style.height = '0px';
    		}
    		c.timer = setInterval(function(){Dropdown.ddSlide(c,1)},Dropdown.DDTIMER);
  	} else {
    		h.timer = setTimeout(function(){Dropdown.ddCollapse(c)},50);
  	}
  },

// collapse the menu //
  ddCollapse:function(c) {
  	c.timer = setInterval(function(){Dropdown.ddSlide(c,-1)},Dropdown.DDTIMER);
},

// cancel the collapse if a user rolls over the dropdown //
  cancelHide:function(id){
  	var h = document.getElementById(id + '-ddheader');
  	var c = document.getElementById(id + '-ddcontent');
  	clearTimeout(h.timer);
  	clearInterval(c.timer);
  	if(c.offsetHeight < c.maxh){
    		c.timer = setInterval(function(){Dropdown.ddSlide(c,1)},Dropdown.DDTIMER);
  	}
  },

// incrementally expand/contract the dropdown and change the opacity //
  ddSlide:function(c,d) {
  	var currh = c.offsetHeight;
  	var dist;
  	if (d == 1) {
    		dist = (Math.round((c.maxh - currh) / Dropdown.DDSPEED));
  	} else {
    		dist = (Math.round(currh / Dropdown.DDSPEED));
  	}
  	if(dist <= 1 && d == 1) {
    		dist = 1;
  	}
  	c.style.height = currh + (dist * d) + 'px';
  	c.style.opacity = currh / c.maxh;
  	c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
  	if ((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
    		clearInterval(c.timer);
  	}
  }

};//Dropdown
 
//Core.start(Dropdown);

/** FLYOUT = vertical dropdown **/

var Flyout = {
  DDSPEED:10,
  DDTIMER:15,
  OFFSET:-20,
  ZINT:100,
 
  init:function() {
    var headarray = Core.getElementsById("flyheader");
    for (var i = 0; i < headarray.length; i++)
    {	
	Core.addEventListener(headarray[i], "mouseover", Flyout.flyShowMenuListener);
        Core.addEventListener(headarray[i], "focus", Flyout.flyShowMenuListener);
        Core.addEventListener(headarray[i], "mouseout", Flyout.flyHideMenuListener);
        Core.addEventListener(headarray[i], "blur", Flyout.flyHideMenuListener);
      }
 
    var contentarray = Core.getElementsById("flycontent");
    for (var i = 0; i < contentarray.length; i++)
    {  
	Core.addEventListener(contentarray[i], "mouseover", Flyout.flyCancelHideMenuListener);
        Core.addEventListener(contentarray[i], "focus", Flyout.flyCancelHideMenuListener);
        Core.addEventListener(contentarray[i], "mouseout", Flyout.flyHideMenuListener);
        Core.addEventListener(contentarray[i], "blur", Flyout.flyHideMenuListener);
    }
  },

  flyShowMenuListener: function(event) {
 	var fullid = this.id;
	var splitid = fullid.split("-");
	var idnumber = splitid[0];
	Flyout.flyMenu(idnumber,1);
  },

 flyHideMenuListener: function(event) {
 	var fullid = this.id;
	var splitid = fullid.split("-");
	var idnumber = splitid[0];
	Flyout.flyMenu(idnumber,0);
  },

 flyCancelHideMenuListener: function(event) {
 	var fullid = this.id;
	var splitid = fullid.split("-");
	var idnumber = splitid[0];
	Flyout.cancelHide(idnumber);
  },

// main function to handle the mouse events //
 flyMenu:function(id,d){
	var h = document.getElementById(id + '-flyheader');
 	var c = document.getElementById(id + '-flycontent');
	//alert("flymenu called");
	//var thetext = "flymenu says id = " + id + " d = "  + d ;
	clearInterval(c.timer);
	if (d == 1){
    		clearTimeout(h.timer);
    		c.style.display = 'block';
		if (c.maxh && c.maxh <= c.offsetHeight) {
			return
		}
    		else if (!c.maxh){
      		    	c.style.left = (h.offsetWidth + Flyout.OFFSET) + 'px';
      			c.style.height = 'auto';
      			c.maxh = c.offsetHeight;
      			c.style.height = '0px';
    		}
    		Flyout.ZINT = Flyout.ZINT + 1;
    		c.style.zIndex = Flyout.ZINT;
    		c.timer = setInterval(function(){Flyout.flySlide(c,1)},Flyout.DDTIMER);
	}else{
    		h.timer = setTimeout(function(){Flyout.flyCollapse(c)},50);
  	}
},

// collapse the menu //
  flyCollapse:function(c) {
  	c.timer = setInterval(function(){Flyout.flySlide(c,-1)},Flyout.DDTIMER);
},

// cancel the collapse if a user rolls over the dropdown //
  cancelHide:function(id){
  	var h = document.getElementById(id + '-flyheader');
  	var c = document.getElementById(id + '-flycontent');
  	clearTimeout(h.timer);
  	clearInterval(c.timer);
  	if(c.offsetHeight < c.maxh){
    		c.timer = setInterval(function(){Flyout.flySlide(c,1)},Flyout.DDTIMER);
  	}
  },

// incrementally expand/contract the dropdown and change the opacity //
  flySlide:function(c,d) {
  	var currh = c.offsetHeight;
  	var dist;
  	if (d == 1) {
    		dist = (Math.round((c.maxh - currh) / Flyout.DDSPEED));
	} else {
		dist = (Math.round(currh / Flyout.DDSPEED));
  	}
  	if(dist <= 1 && d == 1) {

    		dist = 1;
  	}
  	c.style.height = currh + (dist * d) + 'px';
  	c.style.opacity = currh / c.maxh;
  	c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';

	if(currh > (c.maxh - 2) && d == 1){
    		clearInterval(c.timer);
  	}else if(dist < 1 && d != 1){
    		clearInterval(c.timer);
    		c.style.display = 'none';
  	}
var debugText = document.getElementById("DebugText");
var thetext = "c.id = " + c.id + "<br/>c.maxh " + c.maxh + "<br/>c.offsetheight = "  + c.offsetheight + " <br/>currh = " + currh + " <br/>style.height = " + c.style.height +" <br/>dist = " + dist  + "<br/>c.style.left = " + c.style.left + "<br/>c.style.width = " + c.style.width + "</br>c.style.maxw = " + c.style.maxw + "<br/>z-index = " + c.style.zIndex;
debugText.innerHTML = thetext ;

}

};//Flyout
 
//Core.start(Flyout);

//divid : id of div it appears in,
//frameWidth : num pixels to move to right,
//frameHeight : num pixels to move up,
//frames : num of frames (= num of movements) to calculate when to start again. 
//offsetX : 0 - counters for current offsets,
//offsetY : 0,
//display : to calculate when to start again 
// to move left or down use -ve width/height AND -ve number of frames

var Slider =
{
init: function() 
  {
  },

  animate: function()
  {
    var div = document.getElementById(this.divid);
    this.offsetX -= this.frameWidth;
    this.offsetY -= this.frameHeight;
    
    if (this.offsetX <= -this.frameWidth * (this.frames-this.display))
    {
      this.offsetX = 0;
    }

    if (this.offsetY <= -this.frameHeight * (this.frames-this.display))
    {
      this.offsetY = 0;
    }
    
    div.style.backgroundPosition = this.offsetX  + "px " +  this.offsetY + "px";
  //  	Fader.opacity(div.id,100,0,800);
 
    //setTimeout(this.animate, 90);
  }
};

//Core.start(Slider);



// Slideshow -  called from other objects
//  imgarray: list of images  
//  divid: id of image that gets replaced, 
//  thumbid: div where thumbnails are shown (thumbnails have link to image), 
//  imgct : number of images, 
//  thispic: currently displayed pic, 
//  nextid: 'Next' link, 
//  previd: 'Previous' link
//
//	next/prev functions work through array of images
//	uses Fader object to blend images 
//
//	hoverthumbs - when using next/previous or automated, sets thumbnail link to hovered for current pic

Slideshow = 
{
  init: function()
  {
  },

  processPrev : function() {
	if (document.images && this.thispic > 0) {
		this.thispic--;
	} else {
		this.thispic = this.imgct-1;
	}
	element =document.getElementById(this.divid);
	parentelement = element.parentNode;
 	Fader.blendimage(parentelement.id, element.id, this.imgarray[this.thispic], 600);

	return this.thispic;
  },

  processNext : function() {
 	if (document.images && this.thispic < (this.imgct-1)){
		this.thispic++;
	} else {
		this.thispic = 0;
	}
	element =document.getElementById(this.divid);
	parentelement = element.parentNode;
	Fader.blendimage(parentelement.id, element.id, this.imgarray[this.thispic], 600);
	
	return this.thispic;
  },

  processThumb : function() {
	switch(this.thisthumb) {
	  case "thumbone":
		this.thispic = 0;
		break;
	  case "thumbtwo":
		this.thispic = 1;
		break;
	  case "thumbthree":
		this.thispic = 2;
		break;
	  case "thumbfour":
		this.thispic = 3;
		break;
	  case "thumbfive":
		this.thispic = 4;
		break;
	  case "thumbsix":
		this.thispic = 5;
		break;
	  case "thumbseven":
		this.thispic = 6;
		break;
	  case "thumbeight":
		this.thispic = 7;
		break;
	  case "thumbnine":
		this.thispic = 8;
		break;
	  default:
		this.thispic = 0;
	  }
	element =document.getElementById(this.divid);
	parentelement = element.parentNode;
	Fader.blendimage(parentelement.id, element.id, this.imgarray[this.thispic], 600);
	
	return this.thispic;
  },

  hoverThumbs : function() { //gets all a's within thumbdiv & sets the one matching the current image to class = hovered
   	var thumbdiv = document.getElementById(this.thumbid);
	var thumblinks = thumbdiv.getElementsByTagName("a");
	for (i = 0; i < this.imgct; ++i) {
		if (i==this.thispic) {
			Core.addClass(thumblinks[i],"hovered");
		} else {
			Core.removeClass(thumblinks[i],"hovered");
		}
	};
 }
};

//Core.start(Slideshow);


//** links with class = external, will open in new window

var ExternalLinks =
{
init: function()
      {
	      var extlinks = Core.getElementsByClass("external");
	      for (var i = 0; i< extlinks.length; i++)
	      {
		      extlinks[i].onclick = ExternalLinks.clickHandler;
	      }
      },
clickHandler: function()
	      {
		      open(this.href);
		      return false;
        		Core.preventDefault(event);
			Core.stopPropagation(event);
	      }
};
Core.start(ExternalLinks);






//this page specific

//QUICKCHANGE
var Menuquickchange = 
{
  changerclass: "menuchanger",
  imageid: "menuimg",
  textdivid: "menutext",
  defaulttext:"The default text",
  defaultimg:"images/engrave3200.jpg",  
  thischanger: "menu0",

  init: function()
  {
    var changers = Core.getElementsByClass(Menuquickchange.changerclass);
    
    for (var i = 0; i < changers.length; i++)
    {
        Core.addEventListener(changers[i], "mouseover", Menuquickchange.showImgListener);
        Core.addEventListener(changers[i], "focus", Menuquickchange.showImgListener);
        Core.addEventListener(changers[i], "mouseout", Menuquickchange.hideImgListener);
        Core.addEventListener(changers[i], "blur", Menuquickchange.hideImgListener);
    }
  },

  showImgListener: function(event)
  {
    Menuquickchange.thischanger = this.id;
    Quickchange.showImg.call(Menuquickchange);
    Quickchange.showText.call(Menuquickchange);
    Quickchange.expandText.call(Menuquickchange);
    Core.preventDefault(event);
    Core.stopPropagation(event);
  },
  
  hideImgListener: function(event)
  {
    Quickchange.hideImg.call(Menuquickchange);
    Quickchange.hideText.call(Menuquickchange);
  },

  showImg: function(link)
  {
	var changeImg = document.getElementById(Menuquickchange.imageid);
	changeImg.src = link.rel;	
  },
  
  showText: function(link)
  {
	var changeText = document.getElementById(Menuquickchange.textdivid);
	changeText.innerHTML = link.title;	
  },
  
  hideImg: function(link)
  {
    	var changeImg = document.getElementById(Menuquickchange.imageid);
	changeImg.src = Menuquickchange.defaultimg;	
  },

  hideText: function(link)
  {
	var changeText = document.getElementById(Menuquickchange.textdivid);
    	var changeImg = document.getElementById(Menuquickchange.imageid);
	changeText.innerHTML = Menuquickchange.defaulttext;	
  }
};

//Core.start(Menuquickchange);

//QUICKCHANGE
var Servicequickchange = 
{
  changerclass: "changerlink",
  imageid: "",
  textdivid: "textchange",
  defaulttext:"The default text",
  defaultimg:"",  
  thischanger: "link1",
  thischangerclass: "lastchange",
  prevchanger:"link1",
  startfont:10,
  maxfont:25,
  increment:2,
  expspeed:60,

  init: function()
  {
    var changers = Core.getElementsByClass(Servicequickchange.changerclass);
    
    for (var i = 0; i < changers.length; i++)
    {
        Core.addEventListener(changers[i], "mouseover", Servicequickchange.showImgListener);
        Core.addEventListener(changers[i], "focus", Servicequickchange.showImgListener);
        //Core.addEventListener(changers[i], "mouseout", Servicequickchange.hideImgListener);
        //Core.addEventListener(changers[i], "blur", Servicequickchange.hideImgListener);
    }
  },

  showImgListener: function(event)
  {
    Servicequickchange.prevchanger =Servicequickchange.thischanger;    
    Servicequickchange.thischanger = this.id;
    Quickchange.showText.call(Servicequickchange);
    Quickchange.expandText.call(Servicequickchange);
    Core.preventDefault(event);
    Core.stopPropagation(event);
  },
  
  hideImgListener: function(event)
  {
    Quickchange.hideText.call(Servicequickchange);
  },

  showImg: function(link)
  {
  },
  
  showText: function(link)
  {
	var changeText = document.getElementById(Servicequickchange.textdivid);
	changeText.innerHTML = link.title;	
  },
  
  hideImg: function(link)
  {
  },

  hideText: function(link)
  {
	var changeText = document.getElementById(Servicequickchange.textdivid);
	changeText.innerHTML = Servicequickchange.defaulttext;	
  }
};

//Core.start(Servicequickchange);

// SLIDESHOW
var Textshow =
{
  imgarray:["pics/faders/garden1.jpg","pics/faders/garden4.jpg","pics/faders/kitchen2.jpg","pics/faders/garden2.jpg","pics/faders/dining.jpg","pics/faders/garden3.gif","pics/faders/garden6.gif","pics/faders/china.jpg","pics/faders/garden5.gif","pics/faders/frenchdoors.jpg"],
  divid: "textshow", //this is actually the image id and must be inside a div with an id
  thumbid: "textthumbs",
  imgct: 10,
  thispic: 0,
  nextid: "textnext",
  previd: "textprev",

  init: function()
  {

	var slidenext = Core.getElementsByClass(Textshow.nextid);
    
    	for (var i = 0; i < slidenext.length; i++)
    	{ 	
		Core.addEventListener(slidenext[i], "click", Textshow.nextImgListener);
    	}
	
    	var slideprev = Core.getElementsByClass(Textshow.previd);
    	
    	for (var i = 0; i < slideprev.length; i++)
    	{ 	
		Core.addEventListener(slideprev[i], "click", Textshow.prevImgListener);
    	}
  
  	if (document.getElementById("textshow"))
	{
		  	Textshow.automate();
  	}
  },

  nextImgListener : function(event) {
	Textshow.thispic = Slideshow.processNext.call(Textshow);
        //Slideshow.hoverThumbs.call(Textshow);
	Core.preventDefault(event);
        Core.stopPropagation(event);
  },
  prevImgListener : function(event) {
	Textshow.thispic = Slideshow.processPrev.call(Textshow);
        //Slideshow.hoverThumbs.call(Textshow);
	Core.preventDefault(event);
        Core.stopPropagation(event);
   },

  automate : function() {
	Slideshow.processNext.call(this);
     	setTimeout(function(){Textshow.automate()}, 3400); // TIMEOUT HERE!!!!!
  }
};
Core.start(Textshow);