var picdir   = 'http://www.pokolemo.com/wp-content/themes/pokolemo/images/full/';
    var thumbdir = 'http://www.pokolemo.com/wp-content/themes/pokolemo/images/thumb/';

    var piclist = [];
    var currpic  = 0;
    
    // load available pics from thumbnail <ul>
    function GetPiclist() {
        $('#thumbs li').each(function(){
            var src = $(this).find('img').attr('src').substr(thumbdir.length);
            piclist.push(src);
        });
    }
    
    function PreloadImages() {
        var cache = [];
        var args_len = arguments.length;
        for (var i = args_len; i--;) {
          var cacheImage = document.createElement('img');
          cacheImage.src = arguments[i];
          cache.push(cacheImage);
        }
    }
    
    function DisplayImage(index) {
        DisplayThumbnails(false);
        if (document.getElementById('mypic')) {
            $('#mypic').attr('id', 'oldpic');
            $('#oldpic').fadeOut(500, function(){ $('#oldpic').remove(); });
        }
        var imghtml = '<img id="mypic" src="'+picdir+piclist[index]+'" />';
        currpic = index;
        $('#mainpic').append(imghtml);
        $('#mypic').fadeIn();
        $('#mainpic').css('display', 'block');
        $('.controls .clicker').css('display', 'none');
    }
        
    function DisplayThumbnails() {
        var args_len = arguments.length;
        if (args_len)
            var display = arguments[0] == true ? true : false;
        else
            var display = true;
        // show
        if (display)    $('#thumbs:hidden').fadeIn();
        // hide
        else            $('#thumbs:visible').fadeOut();
    }
	    $(document).ready(function(){
        $('#mainpic').css('display', 'none');
        GetPiclist();
        for (var i=0; i<piclist.length; i++)
            PreloadImages(picdir+piclist[i], thumbdir+piclist[i]);
        DisplayImage(0);
        
        // control buttons hover
        $('.controls').mouseover(function(){
            if ((currpic > 0 || this.id != 'mainpic_prev') &&
                (currpic < (piclist.length-1) || this.id != 'mainpic_next'))
                $(this).find('.clicker').css('display', 'block');
        });
        $('.controls').mouseout(function(){
            $(this).find('.clicker').css('display', 'none');
        });
        
        // control buttons click
        $('#mainpic_prev').click(function(){
            if (currpic <= 0) 
                return false;
            DisplayImage(currpic-1);
        });
        $('#mainpic_next').click(function(){
            if (currpic >= piclist.length-1)
                return false;
            DisplayImage(currpic+1);
        });
       /* $('#mainpic_thumb').click(function(){
            DisplayThumbnails();
        }); */
	   $('#mainpic_thumb').click(function() { 
		
        $.blockUI({ message: $('#thumbs') });
		
		 $('.blockOverlay').attr('title','Click to unblock').click($.unblockUI);
    	}); 
        
		
        // escape key
        $(document).keyup(function(e) {        
            if (e.keyCode == 27) { $.unblockUI(); }   // esc
        });
        
        // click a thumbnail
        $('#thumbs li').click(function(){
            var src = $(this).find('img').attr('src').substr(thumbdir.length);
           // var idx = piclist.indexOf(src);
			var idx = $.inArray(src, piclist) 
            DisplayImage(idx);
        });
        
		
        // close thumbnails
        $('#thumbs .close_button, #thumbs').click(function(){           
            DisplayThumbnails(false); setTimeout($.unblockUI, 10); 
        });

    });