/***********************************************
* Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
*
* Local changes: manual parameter to fadeshow and showimage method to use slideshow
*                in manual mode. StopShow/StartShow used to stop/start slideshow
*
*                Added picchanged event that is called after each picture is displayed.
*                Get called with arguments being the slideshow ID and the picture def array.
*
*                Added newsgallery and imagegallery functions for direct built of 
*                slideshow component based on folder content
***********************************************/

var fadebgcolor = "white"

////NO need to edit beyond here/////////////

var fadearray = new Array() //array to cache fadeshow instances
var fadeclear = new Array() //array to cache corresponding clearinterval pointers

var dom = (document.getElementById) //modern dom browsers
var iebrowser = document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder, manual, changeevent) {
  this.autoshow = !manual
  this.picchanged = changeevent ? changeevent : null
  this.pausecheck = pause
  this.mouseovercheck = 0
  this.delay = delay
  this.degree = 10 //initial opacity degree (10%)
  this.curimageindex = 0
  this.nextimageindex = (theimages.length == 1 ? 0 : 1)
  this.bufferedpic = -1
  fadearray[fadearray.length] = this
  this.slideshowid = fadearray.length - 1
  this.canvasbase = "canvas" + this.slideshowid
  this.curcanvas = this.canvasbase + "_0"
  if (displayorder == "R")
    theimages.sort(function() { return 0.5 - Math.random(); }) //thanks to Mike (aka Mwinter) :)
  this.theimages = theimages
  this.imageborder = parseInt(borderwidth)
  this.postimages = new Array() //preload images
  for (p = 0; p < theimages.length; p++) {
    this.postimages[p] = new Image()
    this.postimages[p].src = theimages[p][0]
  }

  this.imagewidth = fadewidth
  this.imageheight = fadeheight
  var fadewidth = fadewidth + this.imageborder * 2
  var fadeheight = fadeheight + this.imageborder * 2
  this.canvaswidth = fadewidth
  this.canvasheight = fadeheight
  this.shouldpopulate = false;
  this.shouldpopulatewith = 0;

  var divContent = "";
  if (iebrowser && dom || dom) //if IE5+ or modern browsers (ie: Firefox)
  {
    //document.write('<div id="master' + this.slideshowid + '" style="position:relative;background-color: black;width:' + fadewidth + 'px;height:' + fadeheight + 'px;overflow:hidden;"><div id="' + this.canvasbase + '_0" style="position:absolute;width:' + fadewidth + 'px;height:' + fadeheight + 'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:' + fadebgcolor + '"></div><div id="' + this.canvasbase + '_1" style="position:absolute;width:' + fadewidth + 'px;height:' + fadeheight + 'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:' + fadebgcolor + '"></div></div>')
    divContent = '<div id="master' + this.slideshowid + '" style="position:relative;background-color: black;width:' + fadewidth + 'px;height:' + fadeheight + 'px;overflow:hidden;"><div id="' + this.canvasbase + '_0" style="position:absolute;width:' + fadewidth + 'px;height:' + fadeheight + 'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:' + fadebgcolor + '"></div><div id="' + this.canvasbase + '_1" style="position:absolute;width:' + fadewidth + 'px;height:' + fadeheight + 'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:' + fadebgcolor + '"></div></div>';
  }
  else {
    //document.write('<div style="background-color: black;"><img name="defaultslide' + this.slideshowid + '" width="' + this.imagewidth + '" height="' + this.imageheight + '" src="' + this.postimages[0].src + '"></div>')
    divContent = '<div style="background-color: black;"><img name="defaultslide' + this.slideshowid + '" width="' + this.imagewidth + '" height="' + this.imageheight + '" src="' + this.postimages[0].src + '"></div>';
  }
  //$(document).append(divContent);
  document.write(divContent);

  if (iebrowser && dom || dom) //if IE5+ or modern browsers such as Firefox
    this.startit()
  else {
    this.curimageindex++
    setInterval("fadearray[" + this.slideshowid + "].rotateimage()", this.delay)
  }
}

function fadepic(obj) {
  if (obj.degree < 100) {
    obj.degree += 10
    if (obj.tempobj.filters && obj.tempobj.filters[0]) {
      if (typeof obj.tempobj.filters[0].opacity == "number") //if IE6+
        obj.tempobj.filters[0].opacity = obj.degree
      else //else if IE5.5-
        obj.tempobj.style.filter = "alpha(opacity=" + obj.degree + ")"
    }
    else if (obj.tempobj.style.MozOpacity)
      obj.tempobj.style.MozOpacity = obj.degree / 101
    else if (obj.tempobj.style.KhtmlOpacity)
      obj.tempobj.style.KhtmlOpacity = obj.degree / 100
  }
  else {
    if (obj.picchanged) obj.picchanged(obj.slideshowid, obj.eventdata);
    clearInterval(fadeclear[obj.slideshowid])
    obj.nextcanvas = (obj.curcanvas == obj.canvasbase + "_0") ? obj.canvasbase + "_0" : obj.canvasbase + "_1"
    obj.tempobj = iebrowser ? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
    obj.clearslide(obj.tempobj, obj.nextimageindex)
    obj.nextimageindex = (obj.nextimageindex < obj.postimages.length - 1) ? obj.nextimageindex + 1 : 0
    if (obj.autoshow) obj.rotatetimeout = setTimeout("fadearray[" + obj.slideshowid + "].rotateimage()", obj.delay)
    if (obj.bufferedpic != -1) {
      var pic = obj.bufferedpic
      obj.bufferedpic = -1
      obj.showimage(pic)
    }
  }
}

fadeshow.prototype.prvimage = function() {
  if (this.shownindex == 0)
    return this.theimages.length - 1;
  return this.shownindex - 1;
}

fadeshow.prototype.nxtimage = function() {
  if (this.shownindex == this.theimages.length - 1)
    return 0;
  return this.shownindex + 1;
}

fadeshow.prototype.stopshow = function() {
  clearTimeout(this.rotatetimeout)
  this.autoshow = false
}

fadeshow.prototype.canchange = function(newpic) {
  if (this.degree == 100) return true;
  this.bufferedpic = newpic;
  return false;
}
fadeshow.prototype.startshow = function() {
  this.autoshow = true
  if (this.degree == 100)
    this.rotateimage()
}

fadeshow.prototype.showimage = function(picindex) {
  this.populateslide(this.tempobj, picindex)
  this.curimageindex = picindex;
  this.nextimageindex = (this.curimageindex < this.postimages.length - 1) ? this.curimageindex + 1 : 0
  this.rotateimage()
}

fadeshow.prototype.clearslide = function(picobj, picindex) {
  picobj.innerHTML = '<div style="background-color: black; width: ' + this.canvaswidth + 'px; height: ' + this.canvasheight + 'px;"></div>'
  this.shouldpopulatewith = picindex
  this.shouldpopulate = true
}

fadeshow.prototype.populateslide = function(picobj, picindex) {
  this.shouldpopulate = false
  var slideHTML = ""
  if (this.theimages[picindex][1] != "") //if associated link exists for image
    slideHTML = '<a href="' + this.theimages[picindex][1] + '" target="' + this.theimages[picindex][2] + '">'
  slideHTML += '<img width="' + this.imagewidth + '" height="' + this.imageheight + '" src="' + this.postimages[picindex].src + '" border="' + this.imageborder + 'px">'
  if (this.theimages[picindex][1] != "") //if associated link exists for image
    slideHTML += '</a>'
  picobj.innerHTML = slideHTML
}


fadeshow.prototype.rotateimage = function() {
  if (this.shouldpopulate) this.populateslide(this.tempobj, this.shouldpopulatewith);
  this.eventdata = this.theimages[this.curimageindex];
  this.shownindex = this.curimageindex;
  if (this.pausecheck == 1) //if pause onMouseover enabled, cache object
    var cacheobj = this
  if (this.mouseovercheck == 1)
    setTimeout(function() { cacheobj.rotateimage() }, 100)
  else if (iebrowser && dom || dom) {
    this.resetit()
    var crossobj = this.tempobj = iebrowser ? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    crossobj.style.zIndex++
    fadeclear[this.slideshowid] = setInterval("fadepic(fadearray[" + this.slideshowid + "])", 50)
    this.curcanvas = (this.curcanvas == this.canvasbase + "_0") ? this.canvasbase + "_1" : this.canvasbase + "_0"
  }
  else {
    var ns4imgobj = document.images['defaultslide' + this.slideshowid]
    ns4imgobj.src = this.postimages[this.curimageindex].src
  }
  this.curimageindex = (this.curimageindex < this.postimages.length - 1) ? this.curimageindex + 1 : 0
}

fadeshow.prototype.resetit = function() {
  this.degree = 10
  var crossobj = iebrowser ? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
  if (crossobj.filters && crossobj.filters[0]) {
    if (typeof crossobj.filters[0].opacity == "number") //if IE6+
      crossobj.filters(0).opacity = this.degree
    else //else if IE5.5-
      crossobj.style.filter = "alpha(opacity=" + this.degree + ")"
  }
  else if (crossobj.style.MozOpacity)
    crossobj.style.MozOpacity = this.degree / 101
  else if (crossobj.style.KhtmlOpacity)
    crossobj.style.KhtmlOpacity = this.degree / 100
}


fadeshow.prototype.startit = function() {
  var crossobj = iebrowser ? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
  this.populateslide(crossobj, 0)
  if (this.pausecheck == 1) { //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
    var cacheobj = this;
    var crossobjcontainer = iebrowser ? iebrowser["master" + this.slideshowid] : document.getElementById("master" + this.slideshowid)
    crossobjcontainer.onmouseover = function() { cacheobj.mouseovercheck = 1 }
    crossobjcontainer.onmouseout = function() { cacheobj.mouseovercheck = 0 }
  }
  this.rotateimage()
}

/***********************************************
* THIS IS ADDED SECTION FOR OPEL AUTO GALLERY
***********************************************/
function buildGallery(xml) {
  var gallery = xml.getElementsByTagName("gallery");
  var speed = xml.documentElement.getAttribute("speed");
  if (!speed) speed = "2";
  speed = parseInt(speed) * 1000;
  var auto = xml.documentElement.getAttribute("autostart");
  if (!auto) auto = "true";
  var path = "http://www.opel.nl" + xml.documentElement.getAttribute("path");
  var imgs = xml.getElementsByTagName("image");
  if (imgs && imgs.length > 0) {
    var galArray = new Array();
    for (var i = 0; i < imgs.length; i++) {
      galArray[i] = [path + "300/" + imgs[i].getAttribute("src"), "", "", imgs[i]];
    }
    var id = fadearray.length;
    var w = gallery[0].getAttribute("width");
    var h = gallery[0].getAttribute("height");
    w = !w ? 300 : parseInt(w);
    h = !h ? 225 : parseInt(h);
    document.write('<div class="imgagegallery" style="width: ' + w + 'px;" id="galGallery' + id + '"><div>');
    var fs = new fadeshow(galArray, w, h, 0, speed, 0, "", (auto == "false"), changeCaption);
    document.write('</div><div class="toolbar" id="galToolbar' + id + '"><div class="prevbut" onclick="prevGalleryShow(' + id + ');" id="galPrevBut' + id + '"></div><div class="nextbut" onclick="nextGalleryShow(' + id + ');" id="galNextBut' + id + '"></div><div class="stopbut" id="galStopBut' + id + '" onclick="stopGalleryShow(' + id + ');" style="display: block;"></div><div class="playbut" id="galPlayBut' + id + '" onclick="playGalleryShow(' + id + ');" style="display: none;"></div><div class="text" id="galToolbarText' + id + '"></div></div><div style="display: none;" class="caption" id="galCaption' + id + '"></div><div class="downloads" style="display: none;" id="galDownloads' + id + '"><div class="dl1024" id="gal1024' + id + '" style="display: none;"><a id="gal1024' + id + 'Lnk" target="_blank" href="#" class="button">1024x768</a></div><div class="dl800" id="gal800' + id + '" style="display: none;"><a target="_blank" href="#" id="gal800' + id + 'Lnk" class="button">800x600</a></div><div class="text">Download:</div></div></div>');
    if (auto == "false") stopGalleryShow(id);
    return fs;
  }
  else {
    var err = xml.getElementsByTagName("error");
    if (err && err.length == 1) {
      document.write('<' + '!-- ' + err[0].getAttribute("msg") + ' --' + '>');
    }
  }
  return null;
}

function nextGalleryShow(id) {
  var picindex = fadearray[id].nxtimage();
  gotoGalleryShow(id, picindex);
}

function gotoGalleryShow(id, picindex) {
  if (fadearray[id].autoshow)
    stopGalleryShow(id);
  if (!fadearray[id].canchange(picindex)) return;
  fadearray[id].showimage(picindex);
}

function prevGalleryShow(id) {
  var picindex = fadearray[id].prvimage();
  gotoGalleryShow(id, picindex);
}

function chgVis(id, val) {
  var elem = $get(id);
  if (elem) {
    if (!elem.style) elem.style = elem;
    elem.style.display = val;
  }
}

function stopGalleryShow(id) {
  fadearray[id].stopshow();
  chgVis("galStopBut" + id, "none");
  chgVis("galPlayBut" + id, "block");
}

function playGalleryShow(id) {
  fadearray[id].startshow();
  chgVis("galPlayBut" + id, "none");
  chgVis("galStopBut" + id, "block");
}

function changeCaption(id, elem) {
  var nextCaption = "", caption = $get("galCaption" + id);
  for (var i = 0; i < elem[3].childNodes.length; i++)
    if (elem[3].childNodes[i].nodeType == 1 && elem[3].childNodes[i].nodeName == "caption")
    nextCaption = elem[3].childNodes[i].text ? elem[3].childNodes[i].text : elem[3].childNodes[i].textContent;
  if (!caption.style) caption.style = caption;
  if (nextCaption == "")
    caption.style.display = "none";
  else {
    caption.innerHTML = nextCaption;
    caption.style.display = "block";
  }
  var dls = $get("galDownloads" + id);
  var but800 = $get("gal800" + id);
  var but1024 = $get("gal1024" + id);
  var but800Lnk = $get("gal800" + id + "Lnk");
  var but1024Lnk = $get("gal1024" + id + "Lnk");
  var tbTxt = $get("galToolbarText" + id);
  var pos = 0, cnt = 0;
  for (var i = 0; i < elem[3].parentNode.childNodes.length; i++) {
    if (elem[3].parentNode.childNodes[i].nodeType == 1) {
      cnt++;
      if (elem[3].parentNode.childNodes[i] == elem[3]) {
        pos = cnt;
      }
    }
  }
  tbTxt.innerHTML = pos + "/" + cnt;
  var has800 = (elem[3].getAttribute("has800") == null || !elem[3].getAttribute("has800") == "no");
  var has1024 = (elem[3].getAttribute("has1024") == null || !elem[3].getAttribute("has1024") == "no");
  if (!but800.style) but800.style = but800;
  if (!but1024.style) but1024.style = but1024;
  if (!dls.style) dls.style = dls;
  but800Lnk.href = has800 ? elem[0].replace("300", "800") : "#";
  but1024Lnk.href = has1024 ? elem[0].replace("300", "1024") : "#";
  but800.style.display = has800 ? "block" : "none";
  but1024.style.display = has1024 ? "block" : "none";
  dls.style.display = has800 || has1024 ? "block" : "none";
}

function imagegallery(path) {
  var xmlhttp = new XMLHttpRequest();
  var curAddon = "http://www.opel.nl";
  var myUrl = curAddon + '/tools/gallery.aspx?path=' + escape(path);

  xmlhttp.open("GET", webSiteRootURL + "CustomPages/CarFlow/OpelSlideshowHandler.ashx?url=" + myUrl, false); // This parameter sepcifies to request synchronously
  xmlhttp.send(null);

  return buildGallery(xmlhttp.responseXML);
}

function newsgallery(code) {
  var path = "/Media/news/Galleries/" + code;
  return imagegallery("/Media/news/Galleries/" + code);
}

function getOpelNewsImmageGalleryCallback(r) {
  masa = load_xml_content_string(r);
  return buildGallery(load_xml_content_string(r));
}

function load_xml_content_string(xmlData) {
  if (window.ActiveXObject) {
    //for IE
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async = "false";
    xmlDoc.loadXML(xmlData);
    return xmlDoc;
  } else if (document.implementation && document.implementation.createDocument) {
    //for Mozila
    parser = new DOMParser();
    xmlDoc = parser.parseFromString(xmlData, "text/xml");
    return xmlDoc;
  }
}