var xaraSwidgets_easySlider_v8Templates = {

	entry:		'<li><a href="{link}">'
			+	'<img src="{image}" alt="{alt}" border="0" />'
			+	'</a></li>',
			
	main:		'<div id="{component_id}OuterDiv" class="slider">'
			+ 	'<ul id ="{component_id}InnerDiv" class="easySliderUL">'
			+ 	'{entryhtml}'
            + 	'</ul>'
            + 	'</div>'
            
};

// this is the constructor for a component
// it loops through each 'entry' in the array of data and compiles the entry template for it
// it then applies the resulting HTML to the main template before writing the whole lot to the div on the page
// it then initialises the actual jquery plugin for the div (that now contains the required HTML as a result of writing the template to it)
function xaraSwidgets_easySlider_v8Constructor(divID, data)
{
	var entryHTML = '';
	
	// loop through each entry in the array and compile the entry template for it
	for(var i=0; i<data.length; i++)
	{
		entryHTML += xaraSwidgets_compileTemplate(xaraSwidgets_easySlider_v8Templates.entry, data[i]);
		
	}

	// now lets compile the 'main' template which acts as a wrapper for each entry
	
	var mainData = {
		component_id:divID,
		entryhtml:entryHTML
	};
	
	var mainTemplate = xaraSwidgets_compileTemplate(xaraSwidgets_easySlider_v8Templates.main, mainData);
	
	
	
	// now lets apply the resulting HTML for the whole component to the main DIV that was exported by XARA
	
	$('#' + divID).html(mainTemplate);
	
	//	1. find the width and height of the parent div 
	
	// work out the required dimensions for width and height.
	var height = Math.floor ($('#' + divID).parent('div').height()*0.83);
	var mainHeight = $('#' + divID).parent('div').height();
	
	var width = $('#' + divID).parent('div').width()-1;
	var navpos = height-7;
	var navposSmall = height-12;
	
		
	$('#' + divID + 'OuterDiv').find('li').width(width).height(height);
		
	// now we have the components DOM on the page - we can use the 'OuterDiv' as the jquery initiation point
	

	
	$('#' + divID + 'OuterDiv').easySlider({ 
				auto: true,
				continuous: true,
				numeric: true,
				targetClass:divID
				
	});
	
	if (mainHeight < 175){
		$('#' + divID ).find('#controls').css('top',navposSmall).addClass(divID+"controls");
		$('#' + divID ).find('#controls li a').css('font-size','8px').css('padding','0 5px');
		
	}
	else
	{
	$('#' + divID ).find('#controls').css('top',navpos).addClass(divID+"controls");
	$('#' + divID ).find('#controls li a').css('font-size','12px')
	}
	
	
	
}