// global variables used by the slideshow
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 = 2;
// time between each slide 3 sec
var _SLIDE_SPEED = 5000;
var _TRANSITIONING = 0;
// default settings
var _SETTINGS = new Object();

// set the default settings for the slideshow
function setDefaultSettings() {
	_SETTINGS.xml_file = "none";
	_SETTINGS.slideshow_div = "backgroundImageLayer";
	_SETTINGS.transition_type = "fade";	
	_SETTINGS.image_width = "470px";
	_SETTINGS.image_height = "208px";
	_SETTINGS.written_content_top_offset = "5px";
	_SETTINGS.written_content_left = "10px";
	_SETTINGS.numbers_offset = "4px";
	_SETTINGS.headline_color = "lightblue";
	_SETTINGS.strapline_color = "white";
	_SETTINGS.strapline_font_size = "20px";
	_SETTINGS.opaque_bottom_height = "0px";
	_SETTINGS.opaque_top_height = "0px";
	_SETTINGS.delay = 0;
}

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];
		}
	}
	getData();
}

// constructor for the slide object
function Slide(image_src, url, headline, strapline) {
	// 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() {
	advAJAX.get({
        url :  _SETTINGS.xml_file,                      
        onSuccess : function(obj) {
            storeData(obj.responseXML.getElementsByTagName("item"));
        },
        onError : function(obj) {
        		
        		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].getElementsByTagName('enclosure')[0].getAttribute("url"),
    									data[i].getElementsByTagName('link')[0].childNodes[0].nodeValue,
    									data[i].getElementsByTagName('title')[0].childNodes[0].nodeValue,
    									data[i].getElementsByTagName('description')[0].childNodes[0].nodeValue);     
    }   

	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', 'http://familyoven.com'); // 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', '/static/images/blank.gif'); // change this to default image
	img.setAttribute('width', 460); // why do these need to be hardcoded?
	img.setAttribute('height', 208); // 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 = "text-align:left;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 + ";";

	writtenContentDiv.appendChild(span);
	writtenContentDiv.appendChild(document.createElement('br'));
	
	// create the strapline span contained in the content 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-size: " + _SETTINGS.strapline_font_size + ";";
	span.style.cssText = style_string;
	writtenContentDiv.appendChild(span);

	// 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; bottom: " + _SETTINGS.numbers_offset + "; left: 3px; z-index: 14;";
	imageIndexDiv.style.cssText = style_string;
	containerDiv.appendChild(imageIndexDiv);
	
	// 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 = "display:none;position: absolute; top: 0px; z-index: 3; width: " + _SETTINGS.image_width + ";";
	style_string += "height: " + _SETTINGS.opaque_top_height + "; background: black; opacity: .4; filter: alpha(opacity=25);";
	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 = "display:none;position: absolute; bottom: 0px; z-index: 3; width: " + _SETTINGS.image_width;
  	style_string += "; height: " + _SETTINGS.opaque_bottom_height + "; background: black; opacity: .4; filter: alpha(opacity=25);";
  	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 + ";  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');	

      // 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);      
      link.style.cssText = "border:1px solid #dc670a;padding: 0px 4px; margin: 0; background: #fc760b;background:url(/static/images/gold_grd_bg_small.gif) repeat-x; font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-style: normal; line-height: normal; font-weight: bold; color: #555; text-decoration: none;";
		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(1).css.background = "#FFF";
	getElemRefs(1).css.color = "#333";

}

// reset the css to light up the current slide number
function setIndex() {
	for( var i = 1; i < _SLIDES.length; i++){		
      if(_STEP == i) {
	      getElemRefs(i).css.background = "#FFF";
			getElemRefs(i).css.color = "#333";
      } else {
	      getElemRefs(i).css.background = "url(/static/images/gold_grd_bg_small.gif) repeat-x";
			getElemRefs(i).css.color = "#555";
		}    
	}
}
// 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 + ") no-repeat";
	switch(_SETTINGS.transition_type) {
		case 'fade':
			setIndex();
			//note: remove the fade effect. in essence pass in negative number so it doesnt fade and remove == 10
			//setOpacity(10, "imageLayer");
			setOpacity(-1, "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 > 470) {
 		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 = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? document.layers[id]: null;
	if (el) el.css = (el.style)? el.style: el;	
	return el;
}