var categoryData = null;


function ChangeSubcategories() {
	// alert ("A");
	var category = $("#Category")[0];

	var index = category.selectedIndex;
	
	if (index > -1) {
		
		var subdata = categoryData[index-1].SubCategories;
		var optionsHtml = "<option value='-1'>Select Sub Category</option>";
		for (var i = 0; i < subdata.length; i++) {
			optionsHtml += "<option value='" + subdata[i].Id + "'>" + subdata[i].Name + "</option>";		
		}
		
		if (subdata.length > 0) {
			$("#SubCategory").html(optionsHtml);
		} else {
			optionsHtml = "<option value='-1'>No sub categories...</option>";
		}
		
		$("#SubCategory").html(optionsHtml);
		
	}
	
	
	//alert (category.selectedIndex);
	
}

function PadWithZeros(index) {
    return index > 9 ? ("" + index) : ("0" + index);
}

$(document).ready(function() {

	$.getJSON("/directory/listing/Ajax-Browse-Categories.php", function(json) {
		//alert("JSON Data: " + json.length);
		
		var filters = ["Agents","Concert Venues","Dance Schools","Dance Suppliers","Dance Teachers","Dancewear Manufacturers","Drama Schools","Dress Makers","Eisteddfods","Hairdressers","Health Clubs","Instructional DVDs","Insurance","Make Up Artists","Nutritionists","Performing Courses","Photographers","Physiotherapists","Retailers","Singing Schools","Studios for Hire","Trophies","Videographers","Workshops"];
		filters=filters.join(",");
		
		var processed = "";
		
		categoryData = json;

		var optionsHtml = "";
		var ulAHtml = "";
		var ulBHtml = "";

		optionsHtml += "<option value='-1'>Select Category</option>";

		var count = json.length;// > 21 ? 21 : json.length;
		var even = false;
		var processedCount = 0;
		var maxCount = 31;
		for (var i = 0; i < count; i++) {
			var r = new RegExp(json[i].Name);
			if (filters.match(r)) {
			
				processedCount++;
				
				var name = json[i].Name;
				processed += name + ",";
				
				if (name.length>20) {
					name = name.substr(0, 15) + "...";
				}
				
				optionsHtml += "<option value='" + json[i].Id + "'>" + json[i].Name + "</option>";
				var liHtml = "<li><a href='" + json[i].Href + "'>" + name + "</a></li>";
				
				even = !even;
				if (even) {
					ulAHtml += liHtml;
				} else {
					ulBHtml += liHtml;
				}
			
			}
		}
		
		for (var i = 0; i < count; i++) {
			var r = new RegExp(json[i].Name);
			if (!processed.match(r) && processedCount < maxCount) {
			
				processedCount++;
				
				var name = json[i].Name;
				processed += name + ",";
				
				if (name.length>20) {
					name = name.substr(0, 15) + "...";
				}
				
				optionsHtml += "<option value='" + json[i].Id + "'>" + json[i].Name + "</option>";
				var liHtml = "<li><a href='" + json[i].Href + "'>" + name + "</a></li>";
				
				even = !even;
				if (even) {
					ulAHtml += liHtml;
				} else {
					ulBHtml += liHtml;
				}
			
			}
		}		
		
		//alert (tmp);

		if (json.length > (maxCount-1)) {
			var liHtml = "<li><a href='/directory/listing/'>More...</a></li>";
			if (even) {
				ulBHtml += liHtml;
			} else {
				ulAHtml += liHtml;
			}
		}

		$('#Category').html(optionsHtml);
		$('#CategoryListA').html(ulAHtml);
		$('#CategoryListB').html(ulBHtml);
		//alert (options);
	});


	// PostInitialize();

	var img = new Image();
	var txtimg = new Image();

	var imgLoaded = false;
	var txtLoaded = false;


	var AnimateData = [{
}, {    // 1
	horiz: true,
	startX: "0px",
	endX: "-291px"
}, {    // 2
	vert: true,
	startY: "-436px",
	endY: "0px"
}, {    // 3
	vert: true,
	startY: "-436px",
	endY: "-175px"
}, {    // 4
	horiz: true,
	startX: "0px",
	endX: "-53px"
}, {    // 5
	vert: true,
	startY: "0px",
	endY: "-200px"
}, {    // 6
	vert: true,
	startY: "0px",
	endY: "-250px"
}, {    // 7
	horiz: true,
	startX: "0px",
	endX: "0px",
	disabled: true
}, {    // 8
	vert: true,
	startY: "-436px",
	endY: "-50px"
}, {    // 9
	horiz: true,
	startX: "400px",
	endX: "-20px",
	disabled: true
}, {    // 10
	horiz: true,
	startX: "0px",
	endX: "-63px"
}, {    // 11
	horiz: true,
	startX: "600px",
	endX: "-33px"
}, {    // 12
	vert: true,
	startY: "-750px",
	endY: "-100px"
}, {    // 13
	horiz: true,
	startX: "0px",
	endX: "-88px"
}, {    // 14
	horiz: true,
	startX: "0px",
	endX: "-200px"
}, {    // 15
	horiz: true,
	startX: "-400px",
	endX: "33px",
	disabled: true
}, {   // 16
	horiz: true,
	startX: "0px",
	endX: "-80px"
}, {    // 17
	horiz: true,
	startX: "400px",
	endX: "0px",
	disabled: true
}, {    // 18
	horiz: true,
	startX: "-88px",
	endX: "0px"
}, {    // 19
	horiz: true,
	startX: "0px",
	endX: "-88px"
}, {    // 20
	horiz: true,
	startX: "-100px",
	endX: "0px"
}, {    // 21
	horiz: true,
	startX: "-200px",
	endX: "0px"
}, {    // 22
	vert: true,
	startY: "-350px",
	endY: "-50px"
}, {    // 23
	horiz: true,
	startX: "0px",
	endX: "-200px"
}, {    // 24
	vert: true,
	startY: "0px",
	endY: "-200px"
}, {    // 25
	vert: true,
	startY: "0px",
	endY: "-150px"
}, {    // 26
	vert: true,
	startY: "0px",
	endY: "-300px"
}, {    // 27
	vert: true,
	startY: "-200px",
	endY: "0px"
}, {    // 28
	vert: true,
	startY: "0px",
	endY: "-200px"
}

	];

var aIndex = -1;



while (aIndex < 0) {
	aIndex = Math.floor(Math.random() * 27) + 1;
	aIndex = AnimateData[aIndex].disabled ? -1 : aIndex;
}



var iIndex = Math.floor(Math.random() * 13) + 1;

//aIndex = 1;

var path = "View/Images/Splash/S" + PadWithZeros(aIndex) + ".jpg";
var textpath = "View/Images/Splash/S" + PadWithZeros(iIndex) + ".gif";

$(img).load(function() {
	txtLoaded = true;
	Animate();
}).attr('src', path);

$(txtimg).load(function() {
	imgLoaded = true;
	Animate();
})
	.attr('src', textpath);


function Animate() {
	if (txtLoaded && imgLoaded) {
		var data = AnimateData[aIndex];
		$("#Splash").css("background-image", "url(" + path + ")");

		$("#SplashText").css("background-image", "url(" + textpath + ")");
		$("#SplashText").css("opacity", 0.0);
		$("#SplashText").css("top", "456px");

		$("#SplashLoading").animate({ opacity: 0.0 }, 2000);

		$("#SplashText").animate({ opacity: 0.8, top: '406px' }, 5000)

		if (data.vert) {
			$("#Splash").css("height", img.height + "px");
			$("#Splash").css("width", "600px");
			$("#Splash").css("top", data.startY);
			$("#Splash").animate({ top: data.endY }, 5000);
		}
		if (data.horiz) {
			$("#Splash").css("height", "456px");
			$("#Splash").css("width", img.width + "px");
			$("#Splash").css("left", data.startX);
			$("#Splash").animate({ left: data.endX }, 5000);
		}
	}
}



});

	
	var selectedHeading = null;
	
	var headingImageWidth = 59;
	var headingImageHeight = 200;
	
	var defaultBackground = '#000';
	var overBackground = '#f14bae';
	var selectedBackground = '#a70064';
	
	var sliding = false;
	
	function PostInitialize2() {
/*

                    <div class="UpdateHeading">
                        <h3>News</h3>
                        <span>&nbsp;</span>
                        <em>&nbsp;</em>
                    </div>
                    <div class="UpdateContentContainer">
                        <div class="UpdateContent">
                            A Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra bibendum diam. Vestibulum non tellus. Vivamus purus lacus, pulvinar eget, dictum vitae, dignissim ac, dui. Etiam velit magna, hendrerit et, posuere nec, pulvinar eu, turpis. Nam ullamcorper. Nulla facilisi. Duis dui. Praesent sed sem. Nam orci nibh, commodo at, lobortis eu, elementum nec, nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla mattis, quam quis sagittis fringilla, lectus turpis scelerisque eros, sed iaculis purus massa a neque. Donec at neque eu pede hendrerit pellentesque. Aenean aliquam. Duis vitae nunc nec pede facilisis egestas. Cras vel orci. Nulla facilisi. Pellentesque gravida lobortis elit. Morbi dictum nibh sit amet dolor. Sed in est. 
                        </div>
                    </div>
                    
*/                    	    
	    
	    var sliderMatrix = {
	        'Images': 0,
	        'Blog Posts': 1,
	        'Members': 2,
	        'Forum Posts': 3,
	        'Events': 4,
	        'Classifieds': 5
	    };

	    
	    //alert (sliderMatrix["Images"]);
	    
	    var latestContainer = $("#Updates");
	    var headings = $("#Updates .UpdateHeading");
	    var spans = $("#Updates .UpdateHeading span");
	    var ems = $("#Updates .UpdateHeading em");
	    var containers = $("#Updates .UpdateContentContainer");
	    var content = $("#Updates .UpdateContent");
	    
	    var count = headings.length;
	    
	    // var width = latestContainer.getStyle('width').toInt();
	    // var height = latestContainer.getStyle('height').toInt();	    
	    // var contentWidth = width - count*headingImageWidth;

	    var width = 940;  // (Browser.Engine.webkit) ? 940 : latestContainer.width();
	    var height = 500;  // (Browser.Engine.webkit) ? 500 : latestContainer.height();
	    var contentWidth = width - count * headingImageWidth;

	    //window.status = width + " " + height + " " + contentWidth;
	    
	    // alert (headings.length);
	    
	    content.width(contentWidth - 20);
	    content.height(height);
	    
	    containers.width(0);
	    containers.height(height);
	    
	    headings.width(headingImageWidth);
	    headings.height(height);
	    //headings.empty();


        
        var innerContentWidth = contentWidth - 20;
        
        var animating = false;
        var animationComplete =  function() {
            
            animating = false;
            
        };

        headings.bind("click", function(e){
            
            if (!animating) {
                
                animating = true;
                
                if (selectedHeading) {
                    selectedHeading.span.css('opacity', 0.0);
                    selectedHeading.em.css('opacity', 0.0);                
                    selectedHeading.h3.css('opacity', 1.0);
                    selectedHeading.container.animate({width:"0px"}, 500, null, animationComplete );
                }
                
                this.span.css('opacity', 0.0);
                this.h3.css('opacity', 0.0);
                this.em.css('opacity', 1.0);
                this.container.animate({width:contentWidth+"px"}, 500, null, animationComplete );
                
                selectedHeading = this;
            
            }
            
        }); 	   
        
        headings.bind('mouseover', function(e) {
            if (!animating) {
                this.span.css('opacity', 1.0);
                this.h3.css('opacity', 0.0); 
            }
        });
        
        headings.bind('mouseout', function(e) {
            if (!animating) {
                this.span.css('opacity', 0.0);
                this.h3.css('opacity', 1.0); 
            }
        });		         
	    
	    for (var i=0; i<count; i++) {
	        
	        var heading = headings[i];
	        
	        var key = jQuery.trim(headings.eq(i).text());
	        var sliderIndex = sliderMatrix[key];
	        headings.eq(i).text('');
	        
	        heading.h3 = $("<h3>&nbsp;</h3>");
	        heading.span = $("<span>&nbsp;</span>");
	        heading.em = $("<em>&nbsp;</em>");
	        
	        heading.h3.appendTo(heading);
	        heading.span.appendTo(heading);
	        heading.em.appendTo(heading);   
	        
	        heading.h3.css('background-position', -sliderIndex*headingImageWidth+'px -'+(500-height)+'px');
	        heading.span.css('background-position', -sliderIndex*headingImageWidth+'px -'+(1000-height)+'px');//-500px');
	        heading.em.css('background-position', -sliderIndex*headingImageWidth+'px -'+(1000-height)+'px');

	        heading.span.css('opacity', 0);
	        heading.em.css('opacity', 0);       
	        	        
	        heading.container = containers.eq(i);
	        heading.content = content.eq(i);	
	                
	    }


	    headings.eq(0).trigger('click');

	    //headings[0].fireEvent('click');	    
	    //$log.debug($time()+" "+width);
	    	    
	};