// JavaScript Document


// SCRIPT FOR TABS
$(document).ready(function(){
	
	$("#div_tab_content div.tab_content").hide();
	$("#div_tab_overview").show();
	
	$("#div_tabbed ul li a[href*='#div_tab']").click(function(){
		
		var tab = this;
		$("#div_tabbed ul li a[href*='#div_tab']").toggleClass("active_tab", false);
		this.className = "active_tab";
		
		$("#div_tab_content div.tab_content").hide();
		var id = tab.href.substring(tab.href.indexOf('#'), tab.href.length);
		$(id).show();
		
		
		return false;
		
	});
	
});

//SCRIPT FOR ROTATING IMAGE

//border : 580 x 310

var CENTER_RECT = new Array(152,56,336,242);
var ROTATE_SPEED = 4000;
var FADE_SPEED = 1000;

var img = new Array();
var currentIndex = 1;
var frontImg = 0;

var source = new Array(root+"/banner_images/mane_carrion.jpg",
		root+"/banner_images/mane_carrion2.jpg",
		root+"/banner_images/pixy_louise_smith.jpg",
		root+"/banner_images/pixy_louise_smith2.jpg",
		root+"/banner_images/sampleboard.jpg",
		root+"/banner_images/sampleboard2.jpg",
		root+"/banner_images/sampleboard3.jpg",
		root+"/banner_images/sampleboard4.jpg",
		root+"/banner_images/sampleboard5.jpg");
						
var timer;

$(document).ready(function(){
	
	img[0] = createImg(0);
	img[1] = createImg(1);
	img[0].style.zIndex = 9;
	img[1].style.zIndex = 9;
	timer = setTimeout(rotate, ROTATE_SPEED);
	
});

function createImg(num){
	var e = document.createElement("img");
	e.src = source[num];
	document.getElementById("div_rotating_image").appendChild(e);
	e.style.position = "absolute";
	
	e.style.left = CENTER_RECT[0] + "px";
	e.style.top = CENTER_RECT[1] + "px";
	e.style.width = CENTER_RECT[2] + "px";
	e.style.height = CENTER_RECT[3] + "px";
	return e;
}

function rotate(){
	
	currentIndex++;
	
	if(!(currentIndex < source.length))
	{
		currentIndex = 0;
	}
	
	if(frontImg == 0){

        
                $(img[0]).fadeOut(FADE_SPEED,function(){
			img[0].src = source[currentIndex];   
		});

               $(img[1]).fadeIn(FADE_SPEED);
               frontImg = 1;
	}else{

              $(img[1]).fadeOut(FADE_SPEED,function(){
			img[1].src = source[currentIndex];
                        
		});
 
               $(img[0]).fadeIn(FADE_SPEED);
              
		frontImg = 0;
		
	}

	
	
	timer = setTimeout(rotate, ROTATE_SPEED);
}



//SCRIPT FOR EXAMPLES

$(document).ready(function(){
	var elements = new Array(); //Div elements containing example data
	var index = 0;
	var NUM_EXAMPLES = 4;
	
	init();
	
	function init(){
		
		$("#a_prev_examples").click(prev);
		$("#a_next_examples").click(next);
		getExamples();
	}
	
	function getExamples(){
		
		
		if (window.XMLHttpRequest){
			xmlhttp = new XMLHttpRequest();
		}else{
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		
		xmlhttp.onreadystatechange = function(){
			if (xmlhttp.readyState==4 && xmlhttp.status==200){
				
				 if(xmlhttp.response == "error")
                 {
					 for(var i = 0; i < elements.length; i++){
	                     var e = document.createElement("div");
	                     var img = document.createElement("img");
	                     img.src = "images/example_error.png";
	                     img.alt = "No More Examples";
	                     img.className = "error_img";
	                     e.className = "example_container";
	                     e.appendChild(img);
	                     elements[i] = e;
	                     updateDisplay();
					 }
                     
                 }else{
                     var xmlDoc = $.parseXML(xmlhttp.response);
                     
                     var examples = xmlDoc.documentElement.childNodes;
                     
                     for(var i = 0; i < examples.length; i++){
                     
	                     var example = $(examples[i]);
	                     var image = example.find("image").text();
	                     var name = example.find("designer").text();
	                     var page = example.find("designer-page").text();
	                     var tags = example.find("tags").text();
	                     var board = example.find("board-page").text();
	
	                     var e = document.createElement("div");
	                     e.className = "example_container";
	                     var a = document.createElement("a");
	                     a.href = board;
	                     var img = document.createElement("img");
	                     img.src = image;
	                     img.alt = name + "' Board";
	                     img.title = name;
	                     img.className = "example_img";
	                     var link = document.createElement("a");
	                     link.href = page;
	                     link.innerHTML = name;
	                     link.className = "example_link";
	                     var span = document.createElement("span");
	                     span.className = "example_tags";
	                     span.innerHTML = tags;
	                     
	                     a.appendChild(img);
	                     e.appendChild(a);
	                     e.appendChild(link);
	                     e.appendChild(span);
	
	                     elements[i] = e;
                     }

                     updateDisplay();
                 }
				
			}else if(xmlhttp.readyState==4){
				for(var i = 0; i < 4; i++){
					var e = document.createElement("div");
					var img = document.createElement("img");
					img.src = "images/example_error.png";
					img.alt = "Error loading example";
					img.title = "Error loading example ";
					img.className = "error_img";
					e.className = "example_container";
					e.appendChild(img);
					elements[i] = e;
				}
				updateDisplay();
			}
		};
		
		xmlhttp.open("GET", "mood-board/home-examples",true);
		xmlhttp.send();
		
		
		for(var i = 0; i < 4; i++){
			var e = document.createElement("div");
			var img = document.createElement("img");
			img.src = "images/example_loading.gif";
			img.alt = "Loading";
			img.title = "Loading ";
			img.className = "loading_img";
			e.className = "example_container";
			e.appendChild(img);
			elements[i] = e;
		}
		
	}
	
	function next(){
		if((index + NUM_EXAMPLES) < elements.length){
			index++;
			updateDisplay();
		}
		
		return false;  
	}
	
	function prev(){
		if(index > 0){
			index--;
			updateDisplay();
		}
		return false;
	}
	
	function updateDisplay(){
		$("#div_examples_display").children().remove();
		for(var i = index; i < index + NUM_EXAMPLES; i++){
			
			$("#div_examples_display").append(elements[i]);
			
		}
	}
	
	
});
/*
$(document).ready(function(){
	var elements = new Array(); //Div elements containing example data
	var xmlhttp = new Array();
	var first = 0;
	var NUM_EXAMPLES = 4;
        var stop = false;
	init();
	
	$("#a_prev_examples").click(prev);
	$("#a_next_examples").click(next);
	
	function init(){
		
		var wrapper = document.getElementById("div_examples_display");
		
		for(var i = first; i < NUM_EXAMPLES; i++){
			elements[i] = getExample(i);
		}
		updateDisplay();
	}
	
	* USE AJAX TO GET EXAMPLE DATA.
	* USE DATA TO CREATE ELEMENT.
	*
	* XML Format:
	* <example>
	* 	<image>URL</image>
	*	<designer>NAME</designer>
	*	<designer-page>URL</designer-page>
	*	<tags>TAGS</tags>
	* </example>
	*
	*
	
	
	function getExample(index){
		
		xmlhttp[index] = 1;
		
		if (window.XMLHttpRequest){
			xmlhttp[index] = new XMLHttpRequest();
		}else{
			xmlhttp[index] = new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		xmlhttp[index].index = index;
		
		xmlhttp[index].onreadystatechange = function(){
			
			if (xmlhttp[index].readyState==4 && xmlhttp[index].status==200){
                                if(xmlhttp[index].response == "error")
                                {
                                    var e = document.createElement("div");
                                    var img = document.createElement("img");
                                    img.src = "images/example_error.png";
                                    img.alt = "No More Examples";
                                    img.className = "error_img";
                                    e.className = "example_container";
                                    e.appendChild(img);
                                    elements[xmlhttp[index].index] = e;
                                    updateDisplay();
                                    
                                }else{
                                    var xmlDoc = $.parseXML(xmlhttp[index].response);
                                    var xml = $(xmlDoc);
                                    var image = xml.find("image").text();
                                    var name = xml.find("designer").text();
                                    var page = xml.find("designer-page").text();
                                    var tags = xml.find("tags").text();
                                    var board = xml.find("board-page").text();

                                    var e = document.createElement("div");
                                    e.className = "example_container";
                                    var a = document.createElement("a");
                                    a.href = board;
                                    var img = document.createElement("img");
                                    img.src = image;
                                    img.alt = name + "' Board";
                                    img.title = name;
                                    img.className = "example_img";
                                    var link = document.createElement("a");
                                    link.href = page;
                                    link.innerHTML = name;
                                    link.className = "example_link";
                                    var span = document.createElement("span");
                                    span.className = "example_tags";
                                    span.innerHTML = tags;
                                    
                                    a.appendChild(img)
                                    e.appendChild(a);
                                    e.appendChild(link);
                                    e.appendChild(span);

                                    elements[xmlhttp[index].index] = e;

                                    updateDisplay();
                                }
                                
			}else if(xmlhttp[index].readyState==4){
				var e = document.createElement("div");
				var img = document.createElement("img");
				img.src = "images/example_error.png";
				img.alt = "Error loading example";
				img.title = "Error loading example " + xmlhttp[index].index;
				img.className = "error_img";
				e.className = "example_container";
				e.appendChild(img);
				elements[xmlhttp[index].index] = e;
				updateDisplay();
			}
			
		};
		
		xmlhttp[index].open("GET", "/mood-board/home-examples?index="+index,true);
		xmlhttp[index].send();
		
		var e = document.createElement("div");
		var img = document.createElement("img");
		img.src = "images/example_loading.gif";
		img.alt = "Loading";
		img.title = "Loading " + index;
		img.className = "loading_img";
		e.className = "example_container";
		e.appendChild(img);
		return e;

	}
	
	function next(){
		first++;
		if(first + NUM_EXAMPLES > elements.length){
			elements.push(getExample(first + NUM_EXAMPLES - 1));
		}
		updateDisplay();
		return false;
            
	}
	
	function prev(){
		if(first != 0){
			first--;
			updateDisplay();
		}
		return false;
	}
	
	function updateDisplay(){
		var k = 0;
		$("#div_examples_display").children().remove();
		for(var i = first; i < first + NUM_EXAMPLES; i++){
			if(elements.length > i){
					$("#div_examples_display").append(elements[i]);
					k++;
			}
		}
	}

});
*/