;
(
        function ($) {
            $.fn.SSPlay = function (options) {
                var me = this;
                var defaults = { url: null, container: null, width: null, height: null,setting:{play:{speed:3000,fadeSpeed:1500},css:{},barCSS:{}} };
                $.extend(defaults, options);
                this.playTimeOut = null;
                this.component = { cImg: null,tbar:null};
                this.playIndex = 0;
                this.galleryData = [];
                this.addLoader = function (container) {
                    var div = $("<div class=\"Loading\">");
                    div.appendTo(container);
                    return div;
                };
                this.loadData = function (json) {
                    if (json) {
                        if(json.Error)
                        {
                            var h2=$("<h2>Error of loading gallery data</h2>");
                            h2.appendTo(defaults.container);
                        }
                        else
                        {
                            me.galleryData = json;
                            me.install();
                            me.play();
                        }
                    }
                    else {
                        var loader = this.addLoader(defaults.container);
                        $.ajax(
                        {
                            cache: false, url: defaults.url, error: function (x) { alert(x.reponseText); loader.remove(); },
                            success: function (data) {

                                loader.remove();
                                var xmlData = { Error: 0 };
                                eval("xmlData=" + data);
                                me.loadData(xmlData);
                            }
                        });
                    }
                };
                this.previous = function () {
                    me.playIndex--;
                    if (me.playIndex < 0) { me.playIndex = me.galleryData.length - 1; };
                    me.play();
                };
                this.next = function () {
                    me.playIndex++;
                    if (me.playIndex > (me.galleryData.length - 1)) { me.playIndex = 0; };
                    me.play();
                };
                this.play = function () {
                    var img = null;
                    var removeOldOne = function () {
                        if (me.component.cImg != null) {
                            //me.component.cImg.fadeTo(1000, 0, function () { me.component.cImg.remove(); me.component.cImg = img; });
                            me.component.cImg.remove(); me.component.cImg = img;

                        }
                        else {
                            me.component.cImg = img;
                        }
                    };
                    var showImage = function () {
                        var item = me.galleryData[me.playIndex];
                        if (item.error == undefined) {
                            img = $("<img src=\"" + defaults.imageUrl(item) + "\"/>");
                            img.css({ "max-Width": defaults.width, "max-Height": defaults.height, position: 'absolute', top: 0, right: 0, opacity: 0 });
                            var loader = me.addLoader(defaults.container);
                            img.load(function () {
                                loader.remove();
                                img.appendTo(defaults.container);
                                img.fadeTo(defaults.setting.play.fadeSpeed, 1, function () {
                                    removeOldOne();
                                    me.playTimeOut = setTimeout(function () { me.next() }, defaults.setting.play.speed);
                                });
                            });
                            img.error(function () { loader.remove(); img.remove(); item.error = true; me.next(); });
                        }
                    }

                    showImage();

                };
                this.createThumbnailBar=function()
                {   
                     var div=$("<div>");
                     div.css(defaults.setting.barCSS).css({position:"absolute",'z-Index':9999,width:'100%'}).appendTo(defaults.container);
                     me.component.tbar=div;                     
                };
                this.install = function () {
                    $(defaults.container).css({ position: "relative",height:defaults.height,width:defaults.width });
                    if(defaults.setting && defaults.setting.css){$(defaults.container).css(defaults.setting.css);};
                    if(defaults.setting && defaults.setting.barCSS)
                    {
                        me.createThumbnailBar();
                    }
                };
                this.loadData(null);
                return me;
            }
        }

)(jQuery);