// global variables used by the slideshow
var _SLIDE = new Array();
var _SLIDES = new Array();
var _STEP = 1
var _CURRENT_ID = 0           
var _IMAGE_STATUS = 0
// pixels which image is slided out
var _SLIDE_OFF_SIZE = 20;
// time between each slide 8 sec
var _SLIDE_SPEED = 6000;
var _TRANSITIONING = 0;
// default settings
var _SETTINGS = new Object();

// set the default settings for the slideshow
function setDefaultSettings() {
	_SETTINGS.xml_file = "none";
	_SETTINGS.default_link = "none";
	_SETTINGS.slideshow_div = "backgroundImageLayer";
	_SETTINGS.transition_type = "fade";	
	_SETTINGS.image_width = "660px";
	_SETTINGS.image_height = "239px";
	_SETTINGS.written_content_top_offset = "0px";
	_SETTINGS.written_content_left = "10px";
	_SETTINGS.numbers_offset = "5px";
//	_SETTINGS.headline_color = "#FFFFFF";
//	_SETTINGS.strapline_color = "white";	
//	_SETTINGS.strapline_font_size = "20px";
//	_SETTINGS.opaque_bottom_height = "30px";
//	_SETTINGS.opaque_top_height = "31px";
	_SETTINGS.delay = 0;
	_SETTINGS.path_to_slide_number_images = "./"; 
	_SETTINGS.font_weight = "bold"; 
	_SETTINGS.innerHTML = "";
}

function initializeSlideshow(styles) {	
	setDefaultSettings();
	// properties that you can set	
	
	for(var setting in _SETTINGS) {
		// if user set the overwrite the default setting
		if(styles[setting]) {
			_SETTINGS[setting] = styles[setting];
		}
	}
//	displaySlideshow();
	getData();
}

// constructor for the slide object
//function Slide(image_src, url, headline, strapline) {
function Slide(image_src, url) {
	// preload the image
	this.image = new Image();
	this.image.src = image_src;
	this.url = url;
//	this.headline = headline;
//	this.strapline = strapline;
}
         
// main function
function getData() {
// onSuccess : function(obj) {storeData(obj.responseXML.getElementsByTagName("item")); },
	advAJAX.get({
//		url : _SETTINGS.xml_file,
//		url : "",
		onSuccess : function(obj) {storeData(); },
		onError : function(obj) {
		// die in an unobtrusive manner
		// template will just show a default image with a default link
		// user wont know that there was a failure
//		alert("Error : " + obj.status + " " + obj.statusText);
        }
    });
}

// store the data from the xml file
function storeData(data){
	
    // reset data container   
//    for(var i = 0; i < data.length; i++){
  	// start the _LINKS and _IMAGES array at 1 rather than 0
//    	_SLIDES[i+1] = new Slide(data[i][0],data[i][1]);
//    	_SLIDES[i+1] = new Slide(data[i].getElementsByTagName('enclosure')[0].getAttribute("url"),
//                     data[i].getElementsByTagName('remotelink')[0].childNodes[0].nodeValue);
//    									data[i].getElementsByTagName('title')[0].childNodes[0].nodeValue,
//   			 						data[i].getElementsByTagName('description')[0].childNodes[0].nodeValue);     
//    }
//	_SLIDES[2] = new Slide("images/borrow_with_confidence.jpg", "site/prodserv_loan.html");
//	_SLIDES[1] = new Slide("images/dreaming_auto.jpg", "site/rates_loan.html#top");
//	_SLIDES[2] = new Slide("images/dreaming_home_equity.jpg", "site/rates_loan.html#top");
//	_SLIDES[3] = new Slide("images/quicken_money_support.jpg", "site/whatsnew.html#quicken");
	
	displaySlideshow();
    //setTimeout("displaySlideshow()", _SETTINGS.delay); delay while displaying ad
}

function displaySlideshow() {
	setUpTemplate();
  	displayIndex();
    
   _CURRENT_ID++;
   setContentLayer("imageLayer");       
   setTimeout("slideit("+_CURRENT_ID+")", _SLIDE_SPEED)
}

// set up the divs in the template
function setUpTemplate(settings) {	
	var containerDiv = getElemRefs(_SETTINGS.slideshow_div);
	// reset div content
	containerDiv.innerHTML = '';
	
	// create the imageLayer div
	var imageLayerDiv = document.createElement('div');
	
	// create link to add to the div
	var a = document.createElement('a');
	a.setAttribute('id', 'slide_link');
	a.setAttribute('name', 'slide_link');	
	a.setAttribute('href', _SETTINGS.default_link); // change this to default link 
	a.setAttribute('onMouseOver', 'setSlideStatus();return true;');
	a.setAttribute('onMouseOut', 'clearSlideStatus();return true;');
	
	// create image that is attached to the link
	var img = document.createElement('img');
	img.setAttribute('id', 'slide');
	img.setAttribute('name', 'slide');
	img.setAttribute('src', ''); // change this to default image
//	img.setAttribute('width', '660'); // why do these need to be hardcoded?
//	img.setAttribute('width', _SETTINGS.image_width); // why do these need to be hardcoded?
	img.height = 239
	img.width = 660;
//	img.setAttribute('height', '239'); // why do these need to be hardcoded?
//	img.setAttribute('height', _SETTINGS.image_height); // why do these need to be hardcoded?
	img.setAttribute('border', 0);
	
	a.appendChild(img);
	imageLayerDiv.appendChild(a);
	imageLayerDiv.setAttribute('id', 'imageLayer');
	
	// set the style for the image layer div
	imageLayerDiv.style.cssText = "position: relative; z-index: 2; zoom: 1; width: " + _SETTINGS.image_width + "; height: " + _SETTINGS.image_height + ";";
	containerDiv.appendChild(imageLayerDiv);
	
	//create written Content DIV
	var writtenContentDiv = document.createElement('div');
	writtenContentDiv.setAttribute('id', 'writtenContent');
	
	// create the headline span contained in the content div
//	var span = document.createElement('span');
//	span.setAttribute('id', 'headline');
	// set the style for the headline span
//	span.style.cssText = "color: " + _SETTINGS.headline_color + 
//   "; text-transform: uppercase; font-weight: "+ _SETTINGS.font_weight +"; font-family: Arial;";

//	writtenContentDiv.appendChild(span);
//	writtenContentDiv.appendChild(document.createElement('br'));
	
	// set up style for the written content div
//	style_string = "position: absolute; top: " + _SETTINGS.written_content_top_offset + "; left: " + _SETTINGS.written_content_left + "; z-index: 4;";
//	writtenContentDiv.style.cssText = style_string;
//	containerDiv.appendChild(writtenContentDiv);
	
	// create the image numbers div
	var imageIndexDiv = document.createElement('div');
	imageIndexDiv.setAttribute('id', 'imageIndex');
	// set up style for the image numbers div
	// use position absolute so can position off of the outer div
	style_string = "position: absolute; top: " + _SETTINGS.numbers_offset + "; right: " + _SETTINGS.written_content_left + "; z-index: 14; height: 31px; ;";
	imageIndexDiv.style.cssText = style_string;
	containerDiv.appendChild(imageIndexDiv);

	// create the strapline span contained in a separate div
//	var straplineDiv = document.createElement('div');
//	var span = document.createElement('span');
//	span.setAttribute('id', 'strapline');
	// set up style for the strapline span
//	var style_string = "color: " + _SETTINGS.strapline_color + "; font-weight: "+ _SETTINGS.font_weight +
//    "; font-size: " + _SETTINGS.strapline_font_size + ";";
//	span.style.cssText = style_string;
//	straplineDiv.appendChild(span);
//	style_string = "position: absolute; bottom: 0px; left: " + _SETTINGS.written_content_left + "; z-index: 14;";
//	straplineDiv.style.cssText = style_string;
//	containerDiv.appendChild(straplineDiv);

	// create the opaque top bar div
//	var opaqueTopDiv = document.createElement('div');
//	opaqueTopDiv.setAttribute('id', 'opaqueTop');
	// position absolute will allow us to position the strip along the top of the div
//	style_string = "position: absolute; top: 0px; z-index: 3; width: " + _SETTINGS.image_width + ";";
//	style_string += "height: " + _SETTINGS.opaque_top_height + 
//    "; background: black; opacity: .6; filter: alpha(opacity=50);";
//	opaqueTopDiv.style.cssText = style_string;
//	containerDiv.appendChild(opaqueTopDiv);
	
	
	// create the bottom opaque bar
//	var opaqueBottomDiv = document.createElement('div');
//	opaqueBottomDiv.setAttribute('id', 'opaqueBottom');
	// set the style definition
	// position absolute will allow us to position the strip to the bottom of the div	
// 	style_string = "position: absolute; bottom: 0px; z-index: 3; width: " + _SETTINGS.image_width;
//  	style_string += "; height: " + _SETTINGS.opaque_bottom_height + "; background: #92181B; opacity: .6; filter: alpha(opacity=50);";
//  	opaqueBottomDiv.style.cssText = style_string;
//	containerDiv.appendChild(opaqueBottomDiv);
	
	// set the slideshow container styles
	// added position relative to style so taht we can have the opaque strips aligned to top and bottom of div
	//var containerDivStyle = getElemRefs(_SETTINGS.slideshow_div);
	//style_string = "position: relative; float: left; width: " + _SETTINGS.image_width + "; height: " + _SETTINGS.image_height + "; overflow: hidden; z-index: 1; margin: 0px 0px 0px 0px;";
	//containerDivStyle.style.cssText = style_string;
}

// create the index
function displayIndex() {

	getElemRefs('imageIndex').innerHTML='';
	
	// create ul to hold the links
	var ul = document.createElement('ul');
	
	for( var i = 1; i < _SLIDES.length; i++) {
		// create links
		var listItem = document.createElement('li');
		var link = document.createElement('a');	
		var img = document.createElement('img');	
    //img.src = '/sites/default/themes/oxm/i/0'+i+'_off.png';
    img.src = _SETTINGS.path_to_slide_number_images + '/0'+i+'_off.gif';
    img.setAttribute('id', 'slide'+i);
    // slide number height and width
//    img.setAttribute('width', '23');
//    img.setAttribute('height', '23');
    img.setAttribute('width', '18');
    img.setAttribute('height', '18');

      // assign 'href' attribute to setslide function call so can change the _STEP
      link.setAttribute('href', "javascript:setslide(" + i + ")");
     
      // add link text
      //link.appendChild(document.createTextNode(i));
      link.setAttribute('id', i);      
      //listItem.className = 'slide'+i;
      //link.style.cssText = "display: block; width: 3px; height: 5px; padding: 0px 4px; margin: 0px 4px; text-decoration: none;";

    link.appendChild(img);
		listItem.appendChild(link);
		listItem.style.cssText = "float: left;";
		ul.appendChild(listItem);
	}
	
	ul.style.cssText = "list-style: none; padding: 0px; margin: 0px;";
	getElemRefs('imageIndex').appendChild(ul);
	// highlight the first box to kick off the slideshow

	getElemRefs('slide1').src = _SETTINGS.path_to_slide_number_images + '/01_on.gif';
	//getElemRefs(1).css.color = "#42C2DA";
}

// reset the css to light up the current slide number
function setIndex() {

	for( var i = 1; i < _SLIDES.length; i++){		
      if(_STEP == i) {
	      //getElemRefs('slide'+i).setAttribute('style', "outline:3px dotted black;");
	      getElemRefs('slide'+i).src = _SETTINGS.path_to_slide_number_images + '/0'+i+'_on.gif';
			  //getElemRefs(i).css.color = "#42C2DA";
      } else {
	      //getElemRefs('slide'+i).css.background = "#42C2DA";
	      getElemRefs('slide'+i).src = _SETTINGS.path_to_slide_number_images + '/0'+i+'_off.gif';
	      //getElemRefs('slide'+i).setAttribute('style', "outline:3px solid white;");
			  //getElemRefs('slide'+i).css.color = "#fff711";
		}    
	}
  
}
// reset the slide to the given slide number
function setslide(s) {
	if( _TRANSITIONING == 1) {
		// when transitioning between slides dont want them to be able to click on another slide		
		return
	}
	_TRANSITIONING = 1;

 	_STEP = s - 1
   _CURRENT_ID++;
	slideit(_CURRENT_ID)
}

function slideit(id) {

	if(id < _CURRENT_ID || !document.images) {
		return
	}
	
	if (_IMAGE_STATUS == 1) window.status = _SLIDES[_STEP].url
	    
	if (_STEP < _SLIDES.length - 1)
		_STEP++
	else
		_STEP = 1
	
	// set the background image to the next image so that when fade/slide will see it
	getElemRefs(_SETTINGS.slideshow_div).style.background = "url(" + _SLIDES[_STEP].image.src + ")";
//	getElemRefs(_SETTINGS.slideshow_div).style.background = _SLIDES[_STEP].image.src;
	switch(_SETTINGS.transition_type) {
		case 'fade':
			setIndex();
			setOpacity(10, "imageLayer");
			break;
		case 'slide':			
			setIndex();
			slideContent(id, "imageLayer");
			break;
	}

	setTimeout("slideit("+id+")", _SLIDE_SPEED)	
}

// set the written content and image layer
function setContentLayer(layer) {
	el = getElemRefs(layer);
	// reset the left pos of the image, used for the slide transition
   el.style.left = '0px';
//   getElemRefs('headline').innerHTML = _SLIDES[_STEP].headline
//	getElemRefs('strapline').innerHTML = _SLIDES[_STEP].strapline
	document.images.slide.src = _SLIDES[_STEP].image.src

	getElemRefs('slide_link').href = _SLIDES[_STEP].url
}

// set the window status bar
function setSlideStatus() {
  	_IMAGE_STATUS = 1;
	window.status = _SLIDES[_STEP].url
}
function clearSlideStatus() {
	_IMAGE_STATUS = 0
	window.status = '';
}

// slide out transition
function slideContent(id, lay) {
	el = getElemRefs(lay);

	// dependent on image width
 	if (el.offsetLeft > 460) {
 		setContentLayer(lay);
 		// finished with the transition, turn off flag		
 		_TRANSITIONING = 0;		
 		return
  	}	
 	el.style.left = (el.offsetLeft + _SLIDE_OFF_SIZE) + "px";

	setTimeout("slideContent("+id+", '"+lay+"')", 5);
}
// fade in transition
function setOpacity(value, layer) {
	if(value < 0) {				
		setContentLayer(layer);
 		// finished with the transition, turn off flag
		_TRANSITIONING = 0;
		return
	}
		
	value--
	getElemRefs(layer).style.opacity = value/10;
	getElemRefs(layer).style.filter = 'alpha(opacity=' + value*10 + ')';
	setTimeout("setOpacity("+value+", '"+layer+"')", 80);
}

function getElemRefs(id) {	
	var el = (this.document.getElementById)? this.document.getElementById(id): 
                        (this.document.all)? this.document.all[id]: 
                            (this.document.layers)? this.document.layers[id]: null;
	if (el) el.css = (el.style)? el.style: el;	
	return el;
}

/**
* Function : dump()
* Arguments: The data - array,hash(associative array),object
*    The level - OPTIONAL
* Returns  : The textual representation of the array.
* This function was inspired by the print_r function of PHP.
* This will accept some data as the argument and return a
* text that will be a more readable version of the
* array/hash/object that is given.
*/
function dump(arr,level) {
  var dumped_text = "";
  if(!level) level = 0;
  
  //The padding given at the beginning of the line.
  var level_padding = "";
  for(var j=0;j<level+1;j++) level_padding += "    ";
  
  if(typeof(arr) == 'object') { //Array/Hashes/Objects 
    for(var item in arr) {
      var value = arr[item];
      
      if(typeof(value) == 'object') { //If it is an array,
        dumped_text += level_padding + "'" + item + "' ...\n";
        dumped_text += dump(value,level+1);
      } else {
        dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
      }
    }
  } else { //Stings/Chars/Numbers etc.
    dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
  }
  return dumped_text;
}