//sets the parameters abaut Images
var ImageNames = new Array('1.png', '4.jpg', '5.jpg', '6.jpg', '7.jpg');
var ImageDirect = '/karusel/image/';
var ImageLoaded = 0;

//formulate images in html 
UI = {
	OrgTpl: function(ImageNames, ImageDirect) {
		var html = '<table width="100%" border="0" cellspacing="0" cellpadding="0">'+
		'<tbody><tr><td height="1" bgcolor="#7f7f7f"></td></tr>'+
		'<tr><td height="10"></td></tr><tr><td align="center">'+
		'<ul class="jcarousel-skin-tango" id="third-carousel">';
			var tmp = [];
			for(var i=0; i<ImageNames.length; i++) {
				html = html+'<li class="jcarousel-item-vertical"><img class="jcarousel-image"  src="'+ImageDirect+ImageNames[i]+'"></li>';
				var img = new Image();
				img.src = ImageDirect+ImageNames[i];
				img.onload = check;
				tmp.push(img);
			}
		html = html+'</ul></td></tr></tbody></table>';
		return html;
	}
};

// add images
function addImage() {
	var html = UI.OrgTpl(ImageNames, ImageDirect);
	$('#flashblock').html(html);
};

//check load images
function check() {
	ImageLoaded++;
	if(ImageLoaded == ImageNames.length) {
		karusel();
	}
}

function karusel() {
	jQuery('#third-carousel').jcarousel({
		vertical: true,
		scroll: 1,
		animation: 1500,
		auto: 2,
		wrap: "circular",
		buttonNextHTML: null,
		buttonPrevHTML: null,
	});
};

jQuery(document).ready(function() {
	addImage();
});