/****************************************************************************
Accessible News Slider

Author:
Brian Reindel, modified and adapted by Andrea Ferracani

Author URL:
http://blog.reindel.com, http://www.micc.unifi.it/ferracani

License:
Unrestricted. This script is free for both personal and commercial use.
*****************************************************************************/
(function( $ ){
    $.fn.accessNews = function(settings){
	
        var defaults = {
            // title for the display
            title: "TODAY NEWS:",
            // subtitle for the display
            subtitle: "November 27 2010",
            // number of slides to advance when pagnating
            slideBy: 4,
            // the speed for the pagination
            speed: "normal",
            // slideshow interval
            slideShowInterval: 5000,
            // delay before slide show begins
            slideShowDelay: 5000,
            // theme
            theme: "default",
            // allow the pagination to wrap continuously instead of stopping when the beginning or end is reached
            continuousPaging : true
        };
		
        return this.each(function(){
			
            settings = jQuery.extend(defaults, settings);
            var _this = jQuery(this);
            var stories = _this.children();
            var intervalId;
            var _storyIndictor;
            var _storyIndictors;
	    var alamathost = document.location.hostname.toString();

            if (alamathost=='localhost'){
                alamathost='localhost/wikramaversibaru';
            }
            
            var container = {
                _wrapper: "<div class=\"jqans-wrapper " + settings.theme + "\"></div>",
                _container: "<div class=\"jqans-container\"></div>",
                _headline: jQuery("<div class='jqans-headline'></div>").html(["<p><strong>", settings.title, "</strong> ", settings.subtitle, "</p>"].join("")),
                _content: jQuery("<div class='jqans-content'></div>"),
                _stories: "<div class=\"jqans-stories\"><div class=\"menuhead\" style=\"height:22px; border-bottom:#CCC solid 1px;\">BERITA UTAMA <span style=\"float:right;font-size:12px;padding-top:4px;margin-right:6px;\"><a style=\"color:#07519a\" href=\"http://"+alamathost+"/menu/detil/31/Berita Wikrama\">Lihat semua berita</a></span><div style=\"clear:both;\"></div></div></div>",
                _first: jQuery(stories[0]),
				
                init: function(){
                    // wrap the ul with our div class and assigned theme
                    _this.wrap(this._wrapper);
                    // our container where we show the image and news item
                    _this.before(this._container);
                    // set the width of the container
                    var width = (stories.length * this._first.width());
                    _this.css("width", width);

                    if (settings.title.length)
                    {
                        this.append(this._headline);
                    }
                    this.append(this._content);
					
                    // create the selector indictor
                    this.selector(width);
					
                    this.set(0);
					
                    // pagination setup
                    pagination.init();
					
                    // slideshow setup
                    slideshow.init();
					
                    _this.wrap(this._stories);

                },
				
                selector: function(width){
                    var s = "";
                    for(var i = 1; i <= stories.length; i++){
                        s += "<li><div/></li>";
                    }
                    var o = jQuery("<div class=\"jqans-stories-selector\"></div>");
                    o.append("<ul>"+ s +"</ul>");
                    _storyIndictor = jQuery(o.find("ul"));
                    _storyIndictors = _storyIndictor.children();
                    o.css("width", width);
                    _this.before(o);
                },
				
                append: function(content){
                    this.get().append(content);
                },
				
                // returns the main container
                get: function(){
                    return _this.parents("div.jqans-wrapper").find('div.jqans-container');
                },
				
                set: function(position){
                    var container = this.get();
                    var story = jQuery(stories[position]);
                    var storyIndictor = jQuery(_storyIndictors[position]);
                    var _content = jQuery("div.jqans-content", container);
                    var gambar = jQuery('img', story).attr('src');
                    var img = '';
                    if(gambar==undefined){
                        img='';
                    }else{
                        img = '<img vspace="5" hspace="5" src="'+gambar+'"/>'//jQuery('<img></img>');
                    }
                   
                    var para = jQuery('<div></div>');
                    var title = jQuery('p.title a.judul', story);
                    //img.attr('src', jQuery('img', story).attr('src'));
                    title = title.attr('title') || title.text();
                    para.html("<h1>" + title + "</h1>" + "<p>" + img + jQuery('div.description', story).html() + "</p>");
                    _content.empty();
                    //					_content.append(img);
                    _content.append(para);
                    stories.removeClass('selected');
                    story.addClass('selected');
                    _storyIndictors.removeClass('selected');
                    storyIndictor.addClass('selected');
                }
				
            };
			
            var pagination = {
			
                loaded: false,
                _animating: false,
                _totalPages: 0,
                _currentPage: 1,
                _storyWidth: 0,
                _slideByWidth: 0,

                init: function(){
                    if (stories.length > settings.slideBy) {
                        this._totalPages = Math.ceil(stories.length / settings.slideBy);
                        this._storyWidth = jQuery(stories[0]).width();
                        this._slideByWidth = this._storyWidth * settings.slideBy;
                        this.draw();
                        this.loaded = true;
                    }
                },
				
                draw: function(){
				
                    var _viewAll = jQuery("<div class=\"jqans-pagination\"></div>").html(["<div class=\"jqans-pagination-controls\"><span class=\"jqans-pagination-controls-back\"><a href=\"#\" title=\"Back\">&lt;&lt; Back</a></span><span class=\"jqans-pagination-controls-next\"><a href=\"#\" title=\"Next\">Next &gt;&gt;</a></span></div>"].join(""));
                    _this.after(_viewAll);
					
                    var _next = jQuery(".jqans-pagination-controls-next > a", _viewAll);
                    var _back = jQuery(".jqans-pagination-controls-back > a", _viewAll);
					
                    _next.click(function(){
						
                        var page = pagination._currentPage + 1;
                        pagination.to(page);
                        return false;
						
                    });
					
                    _back.click(function(){
						
                        var page = pagination._currentPage - 1;
                        pagination.to(page);
                        return false;
						
                    });

                },
				
                to: function(page){

                    if(this._animating){
                        return;
                    }
					
                    // we're animating!
                    this._animating = true;
					
                    var viewAll = _this.parent("div").next(".jqans-pagination");
                    var startAt = jQuery(".jqans-pagination-count-start", viewAll);
                    var endAt = jQuery(".jqans-pagination-count-end", viewAll);
					
                    if(page > this._totalPages)
                    {
                        page =  settings.continuousPaging ? 1 : this._totalPages;
                    }
					
                    if (page < 1)
                    {
                        page =  settings.continuousPaging ? this._totalPages : 1;
                    }

                    var _startAt = (page * settings.slideBy) - settings.slideBy;
                    var _endAt = (page * settings.slideBy);
                    if (_endAt > stories.length)
                    {
                        _endAt = stories.length;
                    }
                    var _left = parseInt(_this.css("left"));
                    var _offset = (page * this._slideByWidth) - this._slideByWidth;
                    startAt.html(_startAt + 1);
                    endAt.html(_endAt);
					
                    _left = (_offset * -1);
						
                    _this.animate({
                        left: _left
                    }, settings.speed);
					
                    _storyIndictor.animate({
                        left: _left
                    }, settings.speed);
					
                    // when paginating set the active story to the first
                    // story on the page
                    container.set(_startAt);

                    this._currentPage = page;
					
                    // no more animating :(
                    this._animating = false;
						
                }

            };
			
            var slideshow = {
				
                init: function(){
                    this.attach();
                    this.off();
                    intervalId = setTimeout(function(){
                        slideshow.on();
                    }, settings.slideShowDelay);
                },
				
                on: function(){
                    this.off();
                    intervalId = setInterval(function(){
                        slideshow.slide();
                    }, settings.slideShowInterval);
                },
				
                off: function(){
                    clearInterval(intervalId);
                },
				
                slide: function(){
				
                    //currently selected story
                    var current = jQuery("li.selected", _this);
                    // the next story
                    var next = current.next("li");
                    // page number
                    var page = 0;
					
                    if (!next.length)
                    {
                        next = jQuery(stories[0]);
                        page = 1;
                    }
					
                    var storyIndex = stories.index(next);
					
                    if (pagination.loaded) {

                        var storyMod = (storyIndex) % settings.slideBy;
						
                        if (storyMod === 0) {
                            page = (Math.ceil(storyIndex / settings.slideBy)) + 1;
                        }
						
                        if (page > 0) {
                            pagination.to(page);
                        }
                    }
					
                    container.set(storyIndex);
                    $("img").lazyload();
					
                },
				
                attach: function(){
					
                    var that = jQuery(_this).parent("div.jqans-wrapper");
                    that.hover(function(){
                        // pause the slideshow on hover
                        slideshow.off();
                    }, function (){
                        // resume slideshow on mouseout
                        slideshow.on();
                    });
					
                }
				
            };
			
            //setup the container
            container.init();
            // append hover every to each element to update container content
            stories.hover(function(){
                // set container contect to hovered li
                container.set(stories.index(this));
            }, function(){
                // do nothing
                });

        });
    };
})( jQuery );