var xaraSwidgets_featureListTemplates = {
	
	
	entry:		'<li><a href="javascript:;"><img src="{imagetiny}" /><img class="xr_ap" src="{title}"></a></li>',
	entry2:		'<li><img src="{imagebig}" /><a href="{featurelink}"><img class="xr_ap" style="border:none; position:relative; margin:10px 10px 0px 10px;" src="{featurelinkdesc}"></a></li>',
	currentimage:'{image}',
	currentimageoff:'{image1}',
	contentimage:'{contentimage}',
	contentimageover:'{contentimageover}',
	
	
	main:		'<div class="feature_list" id="{component_id}OuterDiv">'
			+	'<ul class="tabs" id="{component_id}tabs">'
			+	'{entryhtml}'
			+	'</ul><ul class="output" id="{component_id}output" >'
			+	'{entryhtml2}'
			+	'</ul>'
			+	'</div>'
	
			
};

function xsw_ea_htmlbr(str)
{
    if (str == undefined)
        return '';
    var lines = str.split("\n");
    for (var t = 0; t < lines.length; t++) {
        lines[t] = $("<p>").text(lines[t]).html();
    }
    return lines.join("<br/>");
}

// 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_featureListConstructor(divID, data)
{
	var entryHTML = '';
	var entryHTML2 = '';

	// loop through each entry in the array and compile the entry template for it
	for(var i=0; i<data.length; i++)
	{
	    data[i].heading = xsw_ea_htmlbr(data[i].featurelinkdesc);
	    image = (data[0].image);
		image1 = (data[0].image1);
		contentimage = (data[0].contentimage);
		contentimageover = (data[0].contentimageover);
		entryHTML += xaraSwidgets_compileTemplate(xaraSwidgets_featureListTemplates.entry, data[i]);
		entryHTML2 += xaraSwidgets_compileTemplate(xaraSwidgets_featureListTemplates.entry2, data[i]);
	}

	// now lets compile the 'main' template which acts as a wrapper for each entry
	var mainData = {
		component_id:divID,
		entryhtml:entryHTML,
		entryhtml2:entryHTML2
	};
	
	var mainTemplate = xaraSwidgets_compileTemplate(xaraSwidgets_featureListTemplates.main, mainData);
	
	// now lets apply the resulting HTML for the whole component to the main DIV that was exported by XARA
	$('#' + divID).html(mainTemplate);
	
	
	// now we have the components DOM on the page - we can use the 'OuterDiv' as the jquery initiation point
	
	var imgHeight = $('#' + divID).parent('div').height()
	var buttonHeight = imgHeight/4;
	var textPanelHeight = buttonHeight+1;
	//console.log(imgHeight,buttonHeight, textPanelHeight);
	
	// write the css for contentimage graphics and the currentimage tab
	$('head').append("<style> ul#"+ divID +"tabs li a.current {background:  url('"+ image + 
	"'); background-repeat:no-repeat; color: #FFF;} ul#"+ divID +"tabs li a {height:" + buttonHeight +"px; background:  url('"+ image1 + 
	"'); background-repeat:no-repeat;} ul#"+ divID +"output li a {height:" + textPanelHeight +"px;  background: url('"+ 
	contentimageover +"'); background-repeat:no-repeat;} ul#"+ divID +"output  li a:hover { background:  url('"+ contentimage 
	+"'); background-repeat:no-repeat;}ul#"+ divID +"tabs {left: 0;} ul#"+ divID +"output {right:0;} </style>" );	
	

    // apply png fix if the browser is ie 5-6
	
	$(document).ready(function() {
	var oldBrowser = (/MSIE ((5\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");
	if (oldBrowser) {
     xr_png();
//	 xr_pngc();
		}
	});
	
	
$('#' + divID + 'OuterDiv').find ('.tabs li a').featureList({
	output		: $('#' + divID + 'OuterDiv').find ('.output li'),
//	output		: '.output li',
	start_item	: 0
});

}