$(document).ready(function(){
	
	var all_works = {};
	var all_images = {};
	
	$("#imageDiv img").attr('src',window.location + 'images/static/loading.gif');
	
	function getAllWorksAndImages(){
		
		$.getJSON(window.location + "json_works", function(data) {
			all_works = data;
		});
		$.getJSON(window.location + "json_images", function(data) {
			all_images = data;
			displayRandomImage();
		});
	}
	
	getAllWorksAndImages();
	
	var displayRandomImage = function(){
		var randomImage = findRandomImage(all_images);
		$("#imageDiv img").attr('src',window.location + 'assets/images/' + randomImage.image.id + '/' + randomImage.image.filename);
		$("#imageDiv img").addClass('randomImage');
	}
	
	$("#navDiv select").change(function(){
		var selectedId = $("select option:selected").val();
		$("#imageNavDiv").html("");
//		$("#imageDiv img").attr('src',window.location + 'images/static/loading.gif');
		if(selectedId.length < 5){
			var workText = findWorkById(all_works, selectedId).work.text.replace(/(\r\n|[\r\n])/g,'<br/>')
			var workImages = findWorkImages(all_images, selectedId);
			var currentImageNum = 0;
			$("#workTextHolder #textDiv").css('display','block');
			$("#workTextHolder #textDiv").html(workText);
			$("#imageDiv img").removeClass('randomImage');
			if(workImages.length > 1){
				var drawImageNav = function(){
					var imageNav = '';
					imageNav += '<span class="prev">< prev</span>';
					imageNav += ' | ';
					for(var i = 0; i < workImages.length; i++){
						if(i == 0){
							imageNav += '<span class="picNum">' + (i + 1) + '</span>';
						} else {
							imageNav += '<span class="picNum active">' + (i + 1) + '</span>';
						}
						imageNav += ' | ';
					}
					imageNav += '<span class="next active">next ></span>';
					$("#imageNavDiv").html(imageNav);
				}
				
				var redrawImageNav = function(){
					$("#imageNavDiv span").addClass('active');
					$("#imageNavDiv .picNum:contains('" + (currentImageNum + 1) + "')").removeClass('active');
					if(currentImageNum == 0){
						$("#imageNavDiv .prev").removeClass('active');
					} else if(currentImageNum == workImages.length - 1){
						$("#imageNavDiv .next").removeClass('active');
					}
				}
				
				drawImageNav();
				
				$("#imageNavDiv .picNum").click(function(){
					currentImageNum = $(this).text() - 1;
					drawImage();
					redrawImageNav();
				});
				
				$("#imageNavDiv").children(".next").click(function(){
					if($(this).hasClass("active")){
						currentImageNum += 1;
						drawImage();
						redrawImageNav();
					}
				});
				
				$("#imageNavDiv").children(".prev").click(function(){
					if($(this).hasClass("active")){
						currentImageNum -= 1;
						drawImage();
						redrawImageNav();
					}
				});
			}
			
			var drawImage = function(){
				$("#imageDiv img").attr('src',window.location + 'images/static/loading.gif');
				currentImage = workImages[currentImageNum].image;
				$("#imageDiv img").attr('src',window.location + 'assets/images/' + currentImage.id + '/' + currentImage.filename);
			}
			
			drawImage();
			
		} else {
			$("#workTextHolder #textDiv").css('display','none');
			displayRandomImage();
		}
	});
});

var findWorkById = function(works, value) {
	for(var i = 0; i < works.length; i++) {
		if(works[i].work.id == value){
			return works[i];
		}
	}
	return false;
}

var findWorkImages = function(images, work) {
	var workImages = [];
	for(var i = 0; i < images.length; i++) {
		if(images[i].image.work_id == work){
			workImages.push(images[i]);
		}
	}
	return workImages;
}

var findRandomImage = function(images) {
	var randomImages = [];
	for(var i = 0; i < images.length; i++){
		if(images[i].image.work_id == null && images[i].image.parent_id == null ){
			randomImages.push(images[i]);
		}
	}
	return randomImages[Math.floor(Math.random()*randomImages.length)];
}

function inspect(obj, maxLevels, level)
{
  var str = '', type, msg;

    // Start Input Validations
    // Don't touch, we start iterating at level zero
    if(level == null)  level = 0;

    // At least you want to show the first level
    if(maxLevels == null) maxLevels = 1;
    if(maxLevels < 1)     
        return '<font color="red">Error: Levels number must be > 0</font>';

    // We start with a non null object
    if(obj == null)
    return '<font color="red">Error: Object <b>NULL</b></font>';
    // End Input Validations

    // Each Iteration must be indented
    str += '<ul>';

    // Start iterations for all objects in obj
    for(property in obj)
    {
      try
      {
          // Show "property" and "type property"
          type =  typeof(obj[property]);
          str += '<li>(' + type + ') ' + property + 
                 ( (obj[property]==null)?(': <b>null</b>'):('')) + '</li>';

          // We keep iterating if this property is an Object, non null
          // and we are inside the required number of levels
          if((type == 'object') && (obj[property] != null) && (level+1 < maxLevels))
          str += inspect(obj[property], maxLevels, level+1);
      }
      catch(err)
      {
        // Is there some properties in obj we can't access? Print it red.
        if(typeof(err) == 'string') msg = err;
        else if(err.message)        msg = err.message;
        else if(err.description)    msg = err.description;
        else                        msg = 'Unknown';

        str += '<li><font color="red">(Error) ' + property + ': ' + msg +'</font></li>';
      }
    }

      // Close indent
      str += '</ul>';

    return str;
}