function homeSlider(list){

	$('.scrollContainer').empty();

	$.ajax({
		type: "GET",
		url: base_url + "xml/media.xml",
		dataType: "xml",
		success: function(xmlData)
		{
			xmlDataSet = xmlData;
			sliderOutput(list);
		}
	});
}



function sliderOutput(list){

	for ( var i in list )
	{
		$(xmlDataSet).find('label[id='+list[i]+']').each(function(){ 
				
			var id = $(this).attr('id'); 
			var type = $(this).find('type').text();
			var title = $(this).find('title').text();
			var date = $(this).find('date').text();
			var description = $(this).find('description').text();
			var linkurl = $(this).find('link').text();
			// clean title value for HBX Link Tracking
			// ? ' " & ! # $ % ^ * : | / \ < > ~ ;
			var re = new RegExp ('[\?\'\"\&!#\$%^\*:\/\\<>~;]', 'g') ;
			var cleantitle = title.replace(re, '') ;
			
			
			if(type == 'photo'){ 
				var readmore_abbrv = 'View Gallery&raquo;' 
				var link = 'media/photos/'+id+'/';
				
			
			$("<div style='float:left; position:relative;' class='panel' id='panel" +id+ "'>")
				.html("<a href='"+link+"' name='&lid="+cleantitle+"&lpos="+type+"'><img height='96' align='left' width='96' alt='"+title+"' src='"+link+"thumb.jpg'/></a>" +
					  "<h1><a href='"+link+"' name='&lid="+cleantitle+"&lpos="+type+"'>"+title+"</a></h1>" +
					  "<p>"+description+"</p>")
				.appendTo('.scrollContainer');	
			
				
			}

			if(type == 'video'){ 
				var readmore_abbrv = 'Play now&raquo;' 
				var link = 'media/videos/'+id+'/';
				
				
			
			$("<div style='float:left; position:relative;' class='panel' id='panel" +id+ "'>")
				.html("<a class='videoplayer' href='"+base_url+"media/videos/"+id+"/index.html' title='"+title+"' target='_blank' name='&lid="+cleantitle+"&lpos="+type+"'><img height='96' align='left' width='96' alt='"+title+"' src='"+link+"thumb.jpg'/></a>" +
					  "<h1><a class='videoplayer' href='"+base_url+"media/videos/"+id+"/index.html' title='"+title+"' target='_blank' name='&lid="+cleantitle+"&lpos="+type+"'>"+title+"</a></h1>" +
					  "<p>"+description+"</p>")
				.appendTo('.scrollContainer');	
			

			}

			if(type == 'extra'){ 
				var readmore_abbrv = 'no idea?&raquo;' 
				var link = 'media/extras/'+id+'/';
				
				
				var link = base_url+'media/extras/'+id+'/';
				if(linkurl.length==0){
				var dload = base_url+'media/extras/'+id+'/1280x1024.jpg';
				}
				else{
				var dload=linkurl;
				}

			$("<div style='float:left; position:relative;' class='panel' id='panel" +id+ "'>")
				.html("<a target='_blank' href='"+dload+"' name='&lid="+cleantitle+"&lpos="+type+"'><img height='96' align='left' width='96' alt='"+title+"' src='"+link+"thumb.jpg'/></a>" +
					  "<h1><a target='_blank' href='"+dload+"' name='&lid="+cleantitle+"&lpos="+type+"'>"+title+"</a></h1>" +
					  "<p>"+description+"</p>")
				.appendTo('.scrollContainer');	
				
				
				
				
				
			}
	
		});
	}

    var $panels = $('#slider .scrollContainer > div');
	var $panels_last = $('#slider .scrollContainer > div:last');
    var $container = $('#slider .scrollContainer');

	$panels.css({
		'float' : 'left',
		'position' : 'relative' // IE fix to ensure overflow is hidden
	});
	
	$panels_last.css({
		'margin' : '0px'
	});

	// calculate a new width for the container (so it holds all panels)
	$container.css('width', ((($panels[0].offsetWidth + 20) * $panels.length) - 20) );
   
    // collect the scroll object, at the same time apply the hidden overflow
    // to remove the default scrollbars that will appear
    var $scroll = $('#slider .scroll').css('overflow', 'hidden');

    // apply our left + right buttons
    $scroll
        .before('<img class="scrollButtons left" src="images/scroll_left.png" width="20"/>' + 
                 '<img class="scrollButtons right" src="images/scroll_right.png" width="20"/>');

    var scrollOptions = {
        target: $scroll, // the element that has the overflow

        // can be a selector which will be relative to the target
        items: $panels,

        navigation: '',

        // selectors are NOT relative to document, i.e. make sure they're unique
        prev: 'img.left', 
        next: 'img.right',

        // allow the scroll effect to run both directions
        axis: 'x',

        onAfter: '', //callback

        offset: '',

        // duration of the sliding effect
        duration: 500,

        // easing - can be used with the easing plugin: 
        // http://gsgd.co.uk/sandbox/jquery/easing/
        easing: 'swing'
    };

    // apply serialScroll to the slider - we chose this plugin because it 
    // supports// the indexed next and previous scroll along with hooking 
    // in to our navigation.
    $('#slider').serialScroll(scrollOptions);

}