// JavaScript Document
$("document").ready(function () {
	for(i = 0; i < categories.length; i++) { // For each category
		categoryHtml = '<div id="Category' + i + '" class="Category">';
		tabImage = categories[i].CategoryData[0].ProductImage;

		if(categories[i].CategoryName.length > 14)
			CategoryName = categories[i].CategoryName.slice(0, 14) + '.';
		else
			CategoryName = categories[i].CategoryName;

		CategoryId = categories[i].CategoryId;
			
		tabHtml = '<li><a href="#Category' + i + '"' + ((i == 0) ? 'selected="selected"' : '') + ' id="CategoryId' + CategoryId + '"><span>' + CategoryName + '</span><img src="' + tabImage + '" /></a></li>'; // Begin category
		categoryHtml += '<a href="'+categories[i].CategoryLink+'">'+categories[i].CategoryName+'</a>'; // End category
		categoryHtml += '<div class="Products"><ul>'; // Begin products
		$.each(categories[i].CategoryData, function (k, item) { // For each product

/*			// Calculate Proportional Scaling - The quality is not good - it is better not to be used
			var img = new Image();
			$(img).attr('src', item.ProductImage);
			
			var newSize = scaleSize(150, 150, img.width, img.height);
			imgWidth = newSize[0];
			imgHeight = newSize[1];*/

			// Generate Html for Products belonging to each category
			categoryHtml += '<li><div class="Product">' +
							'<div class="ProductTitle"><a href="' + item.ProductLink + '">' + item.ProductTitle + '</a></div>' +
// With proportinal scaling	'<div class="ProductImage"><a href="' + item.ProductLink + '"><img src="' + item.ProductImage + '" width="' + imgWidth + '" height="' + imgHeight + '" /></a></div>' +
							'<div class="ProductImage"><a href="' + item.ProductLink + '"><img src="' + item.ProductImage + '" /></a></div>' +
							'<div class="ProductDescription">' + item.ProductDescription.slice(0, 75) + '</div>' +
							'<div class="ProductPrice">' + item.ProductPrice + '</div>' +
							'</div></li>';
		});
		categoryHtml += '</ul></div>'; // End products
		
		categoryHtml += '</div>'; // End category
		$("#HomeTabs>ul").append(tabHtml);
		$("#HomeTabsContent").append(categoryHtml);
		
		$("#HomeTabsContent div#Category"+i+" div.Products").carousel( { pagination: true, effect: "fade" } );
	}
	initTabs();
});

function initTabs() {
	$("#HomeTabs").idTabs(function(id, listBox, tabsSet) {
		$("a", tabsSet).removeClass("selected").filter("[href='" + id + "']", tabsSet).addClass("selected");


		for(i in listBox) {
			$(listBox[i]).hide();
		}

		$("#Banner200x300").hide();

		$(id).fadeIn();
		return false;
	});

	// Hover Instead of click functionality
	$("#HomeTabs a[href*=#]").hoverIntent(function(){ $(this).click(); }, function() {});
	$("#HomeTabs ul li:first-child a").click();
	
	$("#HomeTabs span").click(function() {
		categoryId = $(this).parent().attr('id').slice(10);
		window.location = 'http://www.tuk.bg/~' + categoryId + '.htm';
	});
}

function scaleSize(maxW, maxH, currW, currH){
	var ratio = currH / currW;
	if(currW >= maxW && ratio <= 1) {
		currW = maxW;
		currH = currW * ratio;
	} else if(currH >= maxH){
		currH = maxH;
		currW = currH / ratio;
	} else if ( currW <= maxW && ratio <= 1) { // Wide small thumb
		currW = maxW;
		currH = currW * ratio;
	} else if ( currH <= maxH) { // Tall small thumb
		currH = maxH;
		currW = currH / ratio;
	}
	return [currW, currH];
}