var $activeElement = null;

function imageClicked(e){
	
	if(e.target.tagName == "IMG"){
		setActive(jQuery(e.target.parentNode.parentNode));		
	}else{
		setActive(jQuery(e.target.parentNode));		
	}
	
	
	var $imgTag = jQuery("<img>").attr("src", this);
	
	$("#frame").fadeTo("fast", 0.1, function(){
		$("#frame").empty();
		$("#frame").append($imgTag);
		
		$("#frame").fadeTo("fast", 1.0);
	});
	//$("#frame").empty();	
	//$("#frame").css("background-image", "url('"+this+"')");
	
	return false;
}


function prevClicked(e){
	var $newElement = $activeElement.prev();
	if($newElement.html() == null) return false;
	var $imagelink = $newElement.find("a");
	//alert($activeElement.html());
	$imagelink.click();
	//setActive($newElement);	
	
	return false;
}
function nextClicked(e){
	var $newElement = $activeElement.next();
	
	if($newElement.html() == null) {
		
		$tmp = $("#thumbs_nav").children();
		$newElement = jQuery($tmp[0]);
		
	}
	var $imagelink = $newElement.find("a");
	//alert($imagelink.html());
	$imagelink.click();
	//setActive($newElement);
	
	return false;
}


function setActive($liElement){
	
	
	$activeElement.attr("class", "");
	//$activeElement.hover();
	$activeElement = $liElement;
	$activeElement.attr("class", "on");
	
	
	//alert(activeElement.html());
}

function hoverIn(e){
	var $img = jQuery(this);
	$img.fadeTo("fast", 0.8);	
}
function hoverOut(e){
	var $img = jQuery(this);
	$img.fadeTo("fast", 1);	
}


$(document).ready(function() {
	
	var $kids;
	var $imageNumber = 0;
	//var $base =	$("base").attr("href");
	
	function nextImage(){    	
    	if($kids.length > $imageNumber){
    		var $kid = jQuery($kids[$imageNumber]);
    		if($imageNumber == 0) $kid.attr("class", "on");
    	}else{
//    		$(".projectImage").click(imageClicked);
//    		$(".projectImage img").mouseover(hoverIn);
//    		$(".projectImage img").mouseout(hoverOut)
//    		
//    		$(".projectImage img").fadeTo(0, 0.8);
    		return;
    		
    	}		
		
    	
       	//var $imagelink = $base + $kid.find("a").attr("href");
      	
       	var $imagelink = $kid.find("a");
		$imagelink.attr("class", "projectImage")
       	//jQuery("<img>").attr("src", arguments[i]);
		
		$imagelink.click(imageClicked);
			var $imgTag = $kid.find("img");
			$imgTag.mouseover(hoverIn);
			$imgTag.mouseout(hoverOut);
			//$imgTag.fadeTo(0, 0.8);
			
		$("#imageDummy").image($imagelink.attr("href"),function(){			
			
			$("#thumbs_nav").append($kid);	
			
			$imageNumber++;
			nextImage();
		});
		
		
	
		
    }
	$.fn.image = function(src, f){ 
		return this.each(function(){ 				
			var i = new Image(); 
		    i.src = src;      
		    i.onload = f;
		   
		    //this.appendChild(i);	  	
		    if($imageNumber == 0) $("#frame").append(i);
		  	else{
		  		this.appendChild(i);
		  	}
		}); 
 	}
	

	$("#prev").click(prevClicked);
	$("#next").click(nextClicked);
	
	$kids = $("#thumbs_nav").children();
	$activeElement = jQuery($kids[0]);
	
	$("#thumbs_nav").empty();
	$("#thumbs_nav").css("display", "block");
	
	nextImage();
	$("#frame").click(nextClicked);
	
	
});