$(document).ready(function(){

    //GET DATA
    //BUILD UL MENU ITEMS FROM JSON.
    var images = null;
    
    //GET DATA
    $.getJSON("/assets/js/slideshow-json.js",
        function(data){
          setImages(data);
        });
        
    function setImages(data){
        images = data;
        init();        
    }
    
    
    function init()
    {
        if(images){
            
           buildMenu("#back1", "markers", "slideshow");
           
           $("<div />").attr("id", ("images")).insertBefore("#back1");
            
            $.each(images.items, function(i,item){
        
                $("<div />").attr("id", ("images"+i)).addClass("slide").appendTo("#images");
                
                if(i>0)
                {
                   $(("#images"+i)).hide();
                }
                var cssObj = { 'background-image' : 'url(' + item.image + ')', 'background-position' : 'top center', 'background-repeat' : 'no-repeat' }

                $(("#images"+i)).css(cssObj);
                
            });
            
            $("<div></div>").addClass("space").appendTo("#back1");
            
            $('#images').cycle({ 
                fx:     'fade', 
                speed:  'slow', 
                timeout: 9500, 
                pager:  '#markers',
                pagerAnchorBuilder: function(idx, slide) {
                    // return sel string for existing anchor
                    return '#markers li:eq(' + (idx) + ') a';
                }
            });
        }
    }
    
    function buildMenu(elmtName, markersId, slideshowId)
    {
        $('body').addClass('slideshow');
        var container = '<div id="' + slideshowId + '"></div>';
        $(container).insertBefore(elmtName);
         
        var inside = '<div id="' + markersId + '"><span>slideshow</span></div>';
        $(inside).appendTo('#' + slideshowId);
        
        var ul = '<ul />';			
        $(ul).appendTo('#' + markersId);
		
		$.each(images.items, function(i,item){
		    var thumb = $("<span class=\"thumbnail\"></span>");
            var image =$("<img/>").attr("src", item.thumb);
            $(thumb).append(image);
            $(thumb).hide();
            
            var anchor = $("<a/>").text((i+1)).attr("href", "#");
            var li = $("<li></li>");
            $(li).append(thumb);
            $(li).append(anchor);
            
            $(li).bind("mouseenter",function(){
                $("span.thumbnail", this).show();
            }).bind("mouseleave",function(){
                $("span.thumbnail", this).hide();
            });

            $('#' + markersId + ' ul').append(li);
        });
        
    }
    
    
    
});