var xaraSwidgets_cloudZoom_lsTemplates = {
	
	entry:		'<a href="{imagebig}" style="margin-left:0px; padding:0px;" class="cloud-zoom-gallery" title="{title}" rel="useZoom: \'{com_id}zoom3\', smallImage: \'{imagesmall}\' ">'
			+	'<img class="zoom-tiny-image" src="{imagetiny}" alt = "{alt}"/></a>',
	
	main:		'<div class="zoom-section" id="{component_id}OuterDiv">'
			+	'<div class="zoom_lscape_sg-small-image">'
			+   '<a href="{firstimage}" class = "cloud-zoom" id="{component_id}zoom3" rel="tint: \'#000000\',tintOpacity:0.5, adjustY:-4, adjustX:10, smoothMove:5 ">'
			+   '<img style="border:none;" src="{firstsimage}" alt="{firstalt}" title="{firsttitle}" /></a>'
			+ 	'</div>'
			+	'<div class="zoom_lscape_sg-desc" style="margin-left:10px;">'
			+ 	'{entryhtml}'
			+	'</div><div style="clear:both;"></div></div>'
};

function xsw_czls_htmlbr(str) {
    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_cloudZoom_lsConstructor(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_cloudZoom_lsTemplates.entry, data[i]);
	}
	
    var title = xsw_czls_htmlbr(data[0].viewertext);
	var com1_id=divID;
		// now lets compile the 'main' template which acts as a wrapper for each entry

	var mainData = {
		component_id:divID,
		entryhtml:entryHTML,
		firstimage:data[0].imagebig,
		firstsimage:data[0].imagesmall,
		firstalt:data[0].alt,
		firsttitle:title,
		com_id:com1_id
	};
	
	var mainTemplate = xaraSwidgets_compileTemplate(xaraSwidgets_cloudZoom_lsTemplates.main, mainData);

	var cz_ls_imgHeight = $('#' + divID).parent('div').height()
	var cz_ls_Height = cz_ls_imgHeight+4;
	var cz_ls_HeightIE = cz_ls_imgHeight+3;
		//console.log(imgHeight,buttonHeight, textPanelHeight);
	
	// write the css for contentimage graphics and the currentimage tab
		
	
	// now lets apply the resulting HTML for the whole component to the main DIV that was exported by XARA
	$('#' + divID).html(mainTemplate)
	$('#' + divID).find('.zoom_lscape_sg-desc').css('height',''+ cz_ls_Height +'');
	//$('#' + divID).find('.zoom_lscape_sg-desc').css('background','red');
	$('head').append('<style>.zoom_lscape_sg-desc {<!--[if IE 7]>height: '+ cz_ls_HeightIE +'px;<![endif]-->}</style>'); 
	//	$('.zoom_lscape_sg-desc').jScrollPane();
	$('#' + divID).parent('div').css('overflow', 'visible');
	$(window).bind("load", function() {
  $('.zoom_lscape_sg-desc').jScrollPane();
});
	
	
}