(function($){
    $.funds = function(el, options){
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;
        
        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;
        base.debug = false;
        base.iStart = 0;
        base.iCount = 0;
        base.rowHeight = 28 + ( $.browser.msie || $.browser.safari ? 1 : 0 );
        
        // Add a reverse reference to the DOM object
        base.$el.data("funds", base);
        
        // Make sure that base has the "funds-container" class to allow us to 
        // style it / cascade styles properly.
        base.$el.parents('.promoBox').addClass('funds-container');
        
        base.init = function(){
            base.options = $.extend( { render: base.render }, $.funds.defaultOptions, options);
            
            // Put your initialization code here
            base.loaderRender();
            var opt = {
                    async: true,
                    url: this.options.dataUrl,
                    dataType: 'xml',
                    success: function( d, tStatus ) {
                        if( base.debug ) console.log( "success context=%o this=%o data=%o", base, this, d );
                        base.options.render( d );
                    }
                };
                        
            $.ajax( opt );          
        };
        
        // Sample Function, Uncomment to use
     base.render = function( data ) {
            if( base.debug ) console.log('render context=%o this=%o data= %o', base, this, data );

            s = '<div class="fundsWrap">';
            s+= base.headerGet( data );
            
        s+= '<div class="fundsTabHolder">'
            + '<table cellspacing="0" cellpadding="0" border="0" class="fundsTab">'
            + '<tbody id="fundsElem">';
        
            base.iStart = base.iCount = 0;
            
            $(data).find("fund").each( function() {
                base.iCount++;
                var n = $(this).attr("name");
                var url = $(this).attr("url"); 
                if( url != '' ) url = '<a href="' + url + '" class="hidablea">' + n + '</a>'; 
                else url = n;
                
                if( new String(n).length > 40 ) { 
                    url =  '<div class="hidable" title="' + n + '">' + url + '</div>';
                }
                
                var rstyle = '';
                if( !base.options.animationShow && base.iCount > base.options.ctPage ) rstyle = "display: none;";  
                    
                s+= '<tr style="' + rstyle + '">'
                    + '<td class="rowf">' + url + '</td>'
                    + '<td nowrap="nowrap">' + $(this).find("fund-value").attr("value") + ' ' + $(this).find("fund-value").attr("currency") + '</td>'
                    + '<td class="rowl">' + base.dateFormatter( $(this).find("fund-value").attr("date") ) + '</td>'
                    + '</tr>' ;
            });
            
            s+= '</tbody></table>'
                + '</div><div>';
            s+= base.naviGet();
            base.$el.empty().append( s );
            base.$el.find("#fundsPrev").bind('click',function(e){
                e.preventDefault();
                base.naviPrev();    
            }); 
            base.$el.find("#fundsNext").bind('click',function(e){
                e.preventDefault();
                base.naviNext();    
            });
            base.naviShow( 0 );

            // a little correction
            var h = ( base.rowHeight * base.options.ctPage + 2 ) + "px !important;";
            base.$el.find(".fundsTabHolder").attr( "style","height: " + h );
            if( $.browser.msie || $.browser.safari ) {
                h = ( parseInt( base.$el.find(".fundsNavi").css( "padding-top" ) ) - base.options.ctPage ) + "px;";
                base.$el.find(".fundsNavi").attr( "style","padding-top: " + h );
            }
     };
     
     base.dateFormatter = function( dtStr ) {
         return new String(dtStr).replace( /\-/ig, '.' );
     };
     
     base.loaderRender = function() {
         if( !base.options.showLoader ) return;
         var s = '<div class="fundsWrap fundsOverlay">'
        + '<div class="header">' + base.options.title + '</div>'
        + '<div class="fundsLoader"><img src="ajax-loader.gif" width="32" height="32" alt="Loading..."/></div>'
        + '</div>';
         base.$el.empty().append( s );
     };
     
     base.headerGet = function( data ) {
        return '<div class="header">' + base.options.title + '</div>';
     };
     
     base.naviGet = function() {
         if( base.iCount <= base.options.ctPage ) return '';
         
         s = '<div class="fundsNavi">'
            + '<div class="left"><a href="#" id="fundsPrev">&lt; ' + base.options.labelPrev + '</a></div>'
            + '<div class="right"><a href="#" id="fundsNext">' + base.options.labelNext + ' &gt;</a></div>'
            + '</div>';
         return s;
     };
     
     base.naviPrev = function() {
         if( base.debug ) console.log( "naviPrev iStart=%o iCount=%o ctPage=%o", base.iStart, base.iCount, base.options.ctPage );
         base.naviShow( base.iStart - base.options.ctPage );
     };
     
     base.naviNext = function() {
         if( base.debug ) console.log( "naviNext iStart=%o iCount=%o ctPage=%o", base.iStart, base.iCount, base.options.ctPage );
         base.naviShow( base.iStart + base.options.ctPage );
     };
     
     base.naviUpdateNextPrev = function( from ) {
         if( from -  base.options.ctPage < 0 ) base.$el.find("#fundsPrev").parent().hide();
         else base.$el.find("#fundsPrev").parent().show(); 
         
         if( from + base.options.ctPage > base.iCount ) base.$el.find("#fundsNext").parent().hide(); 
         else base.$el.find("#fundsNext").parent().show(); 
     };
     
     base.naviShow = function( from ) {
         if( from > base.iCount ) return;
         if( from < 0 ) return; // from = 0;
         var to = Math.min( from + base.options.ctPage, base.iCount );
         
         var icurr = 0;
         base.iStart = from;
         
         base.naviUpdateNextPrev( from );
         
         if( base.options.animationShow ) {
             var top = ( -from * base.rowHeight + ( from > 0 ? -2 : 0 ));
             if( base.debug && console ) console.log( "top=%o", top );
             
             var duration = 800;
             var effect = "swing";
             if( $.browser.msie && parseInt( $.browser.version ) < 7 ) { duration = 1100; effect= "linear"; }
             base.$el.find( "table.fundsTab" ).animate({ top: top }, duration, effect );
         }
         else {
             $("#fundsElem tr").hide().each( function() {
                 if( icurr >= from && icurr < to ) $(this).show();
                 icurr++;
             });
         }           
     };
        
        // Run initializer
        base.init();
    };
    
    
    $.funds.defaultOptions = {
        title: "Aktuálna hodnota podielov Global Invest a Global Garant", // header title
        labelPrev: '< < <', // label for previous page button
        labelNext: '> > >', // label for next page button
        animationShow: true,    

        dataUrl: "http://www.metlifeamslico.sk/sk/Home/Assets/xml/funds/funds-data.xml",  // data xml, need to bee in the same domain
        showLoader: false,  // 
        
        ctPage: 5   // funds count per page
    };
    
    $.fn.funds = function(options){
        return this.each(function(){
            (new $.funds(this, options));
        });
    };
    
})(jQuery);