﻿;
(function ($) {

  $.slideShow = {
    self : this, 
    slides : null,
    markers : null,
    cycleDefaults : {
            fx:     'fade', 
            speed:  'slow', 
            timeout: 9500
    },
    setup: function(settings)
    {
        if(!$.slideShow.slides){
            $.slideShow.getData(settings);
            return;
        }
        
      
      $(settings.container).toggleClass('slideshow', true);
      
      $.slideShow.buildSlides(settings); 
      $.slideShow.blockImageSaving(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';
            },
            before : function(currSlideElement, nextSlideElement, options, forwardFlag)
            {
                $.slideShow.setCaption(nextSlideElement);
            }
        });
      } 
      
      //jquery.cycle.all.min.js
      $('#images').cycle(opts);
      
    },
    getData: function(settings)
    {
        if(settings.slideshowId)
        {
        var data = ({
                            "title": "TIC Irvine Ranch Natural Landmarks Slide Show",
                            "images":[]});
            $.ajaxPost({
                url:settings.url,
                data: {'name':settings.slideshowId },
                success:function(response, statusText){
                    data.images = response;
                    $.slideShow.slides = data;
                },
                error: function(xhr, errorStatus, errorThrown)
                {
                   alert("An error occured trying to load the slide show.");
                },
                complete: function(xhr, statusText) {                   
                    $.slideShow.setup(settings);
                }
            });
        }
        else{
            var data = ({
                            "title": "TIC Irvine Ranch Natural Landmarks Slide Show",
                            "images": [
	                           {
			                        "caption" : "image 1",
			                        "image" : "/assets/images/slideshow/tic-shop-homepage-1.jpg"
	                           },
	                           {
			                        "caption" : "image 2",
			                        "image" : "/assets/images/slideshow/tic-shop-homepage-2.jpg"
	                           },
	                           {
			                        "caption" : "image 3",
			                        "image" : "/assets/images/slideshow/tic-shop-homepage-3.jpg"
	                           },
	                           {
			                        "caption" : "image 4",
			                        "image" : "/assets/images/slideshow/tic-shop-homepage-4.jpg"
	                           },
	                           {
			                        "caption" : "image 5",
			                        "image" : "/assets/images/slideshow/tic-shop-homepage-5.jpg"
	                           }
                            ]
                        });
            $.slideShow.slides = data;
            $.slideShow.setup(settings);
        }
    },
    setCaption: function(slide)
    {
        var caption  = $('.caption', '#markers');
        caption.html($(slide).attr('title'));
    },
    buildMarkers: function(settings)
    {   
        var markers = $("<div></div>").attr("id", "markers");
        var label = $("<span></span>").attr('class','caption')
        label.appendTo(markers);
        if(settings.markers.label != '')
        {
            label.html(settings.markers.label);            
        }
        
        var ul = $('<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);
            $(ul).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) {        
                var s = $("<div />").attr("id", ("images"+i)).attr("title", item.Caption).addClass("slide").css('height', settings.height).appendTo("#images");
                if(item.Url) { s.attr('rel', item.Url); }
                if(i>0) { s.hide(); }
                var cssObj = { 'background-image' : 'url(' + item.Image + ')', 'background-position' : 'top center', 'background-repeat' : 'no-repeat' }
                s.css(cssObj);                
            });
            
            $('div[rel]','#images').css('cursor','pointer').click(function(e){window.open($(e.target).attr('rel'), 'slideshow');});
    },
    blockImageSaving : function(settings)
    {
        if(settings.protect)
        {
            $('.slide','#images').bind('mouseenter',function(e){$(this).click();}).bind("contextmenu",function(e){return false;});

        }
    }
  };
  
  $.fn.slideShow = function(options) {
    
    var defaults = { 
                        url : '/ws/DataService.asmx/GetSlideshow', 
                        protect : false,
                        container : '#slideshow',
                        height : '195px',
                        markers : { show : true, label : 'slideshow' }
                   };
                   
    var settings = $.extend({},defaults,options);
    
    $.slideShow.setup(settings);
    
 };
 
})(jQuery);
