;
(function ($) {

  $.slideShow = {
    slides : null,
    markers : null,
    cycleDefaults : {
            fx:     'fade', 
            speed:  6000, 
            timeout: 9500
    },
    setup: function(settings)
    {
      $.slideShow.slides = $.slideShow.getData(settings);
      
      var opts = $.slideShow.cycleDefaults;
      
      if(settings.markers.show==true) {
        
        $.slideShow.buildMarkers(settings);
        
        opts = $.extend({}, opts, { pager:  '#markers', pagerAnchorBuilder : function(idx, slide) {
                // return sel string for existing anchor
                return '#markers li:eq(' + (idx) + ') a';
            }
        });
      }
      
      $.slideShow.buildSlides(settings);      
      
      //jquery.cycle.all.min.js
      $('#images').cycle(opts);
      
    },
    getData: function(settings)
    {
    
        /*
        // TODO: Get JSON Data.
        // settings.url = web service url
        // settings.slideshowId = id to build slide show JSON from.
        */
        var data = ({
                        "images": [
	                       {
			                    "image" : "/assets/images/home-a.jpg"
	                       },
	                       {
			                    "image" : "/assets/images/home-b.jpg"
	                       },
	                       {
			                    "image" : "/assets/images/home-c.jpg"
	                       },
	                       {
			                    "image" : "/assets/images/home-d.jpg"
	                       }
                        ]
                    });
        return data;
    },
    buildMarkers: function(settings)
    {   
        var markers = $("<div></div>").attr("id", "markers");
        
        if(settings.markers.label != '')
        {
            var label = $("<span></span>").html(settings.markers.label);
            label.appendTo(markers);
        }
        
        var ul = $('<ul />');			
        $(ul).appendTo(markers);
		
		$.each($.slideShow.slides.images, function(i,item){
		    
            var anchor = $("<a/>").text((i+1)).attr("href", "#");
            var li = $("<li></li>");
            $(li).append(anchor);

/* Thumbnails           
//            var thumb = $("<span class=\"thumbnail\"></span>");
//            var image =$("<img/>").attr("src", item.thumb);
//            $(thumb).append(image);
//            $(thumb).hide();//            
//            $(li).prepend(thumb);            
//            $(li).bind("mouseenter",function(){
//                $("span.thumbnail", this).show();
//            }).bind("mouseleave",function(){
//                $("span.thumbnail", this).hide();
//            });
*/

            $(markers).append(li);
        });
        
        $(markers).appendTo(settings.container);
        
        $.slideShow.markers = markers;
        
        return markers; 
    
    },
    buildSlides : function(settings)
    {
        $("<div />").attr("id", ("images")).appendTo(settings.container);
            
            $.each($.slideShow.slides.images, 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);
                
            });
    }
    
  };
  
  $.fn.slideShow = function(options) {
    
    var defaults = { 
                        container : '#slideshow',                         
                        markers : { show : false, label : 'slideshow' }
                   };
                   
    var settings = $.extend({},defaults,options);
    
    $.slideShow.setup(settings);
    
 };
 
})(jQuery);