function Class() { };

Class.prototype.construct = function() { };

Class.extend = function(def) {
    var classDef = function() {
        if (arguments[0] !== Class) {
            this.construct.apply(this, arguments);
        }
    };
    var proto = new this(Class);
    var superClass = this.prototype;
    for (var n in def) {
        var item = def[n];
        if (item instanceof Function) item.$ = superClass;
                else classDef[n] = item;
        proto[n] = item;
    }
    classDef.prototype = proto;
    classDef.extend = this.extend;
    return classDef;
};

// ----------------------------------------------------------------------------
var LoadingClass = Class.extend({
    element: null,
    
    construct: function (options) {
        this.element = $(
            '<div style="background: #ffffff;padding:10px;display:none;position:absolute;left:0px;top:0px;width:50px;height:50px">' +
                // background: #ffffff;margin:0 auto;padding:10px;width:210px;
                '<img src="/img/main/loading.gif" alt="" style="width:50px;height:50px;float:left" />' +
                //'<p style="margin-left:60px">Загрузка ...</p>' +
            '</div>'
        );
    },
    
    show: function() {
        $(this.element)
            .appendTo(document.body)
            .css({
                left: ($(document).width() - $(this.element).width()) / 2,
                top: ($(window).height() - $(this.element).height()) / 2 + $(document).scrollTop()
            })
            .show();
    },
    
    hide: function() {
        $(this.element)
            .hide()
            .remove();
    }
});

// ----------------------------------------------------------------------------
var ErrorClass = Class.extend({
    element: null,
    
    construct: function (message) {
        this.element = $(
            '<div style="background: #ffffff;margin:0 auto;padding:10px;display:none;position:absolute;left:0px;top:0px;width:210px;border:1px solid darkred">' +
                '<img src="/i/icons/error.gif" alt="" style="width:50px;height:50px;float:left" />' +
                '<p style="margin-left:60px" class="text"></p>' +
                '<div style="text-align:center;margin:10px"><button>Закрыть</button></div>' + 
            '</div>'
        );
        
        $('.text', this.element).html(nl2br(htmlspecialchars(message ? message : '')));
        $('button', this.element).click(function() {
            this.hide();
        }.bind(this));
    },
    
    show: function() {
        $(this.element)
            .appendTo(document.body)
            .css({
                left: ($(document).width() - $(this.element).width()) / 2,
                top: ($(document).height() - $(this.element).height()) / 2
            })
            .show();
    },
    
    hide: function() {
        $(this.element)
            .hide()
            .remove();
    }
});

function picturesgroupBinder() {
    $('.picturesgroup_prev').unbind();
    $('.picturesgroup_prev').click(function () {
        if ($(this).hasClass('page1'))
            return false;
        
        var n = parseInt(this.id.replace('picturesgroup_prev_', ''));
        
        var page = 1;
        var a = this.className.split(' ');
        for (var i=0; i<a.length; i++)
            if (a[i].match(/page([0-9])+/)) {
                page = parseInt(a[i].replace('page', ''));
            }
        $.getJSON('/index/picturegroupscroll', {n: n, page: page-1}, function (json) {
            var btn = $('#picturesgroup_prev_' + n);
            btn.removeClass('page'+(json.page+1)).addClass('page'+json.page);
            var div = $('#picturesgroup'+json.n);
            var height = div.height();
            div.css({height: height+'px', overflow: 'hidden'});
            div.prepend(json.html);
            div.find('> table:first').css({marginTop: (-height)+'px'}).animate({marginTop: 0}, 2000, function() {
                var div = $(this).parent();
                $(this).parent().find('> table:last').remove();
                var tableHeight = div.find('> table:first').height();
                $(div).animate({height: tableHeight+'px'}, 'fast', function() {
                    $(this).parent().css({height: 'auto', overflow: 'auto'});
                });
            });

            picturesgroupBinder();
        });
    });
    
    $('.picturesgroup_next').unbind();
    $('.picturesgroup_next').click(function () {
        var n = parseInt(this.id.replace('picturesgroup_next_', ''));
        
        var page = 1;
        var a = this.className.split(' ');
        for (var i=0; i<a.length; i++)
            if (a[i].match(/page([0-9])+/)) {
                page = parseInt(a[i].replace('page', ''));
            }
        $.getJSON('/index/picturegroupscroll', {n: n, page: page+1}, function (json) {
            var btn = $('#picturesgroup_next_' + n + ', #picturesgroup_prev_' + n);
            btn.removeClass('page'+(json.page-1)).addClass('page'+json.page);
            var div = $('#picturesgroup'+json.n);
            var height = div.height();
            div.css({height: height+'px', overflow: 'hidden'});
            div.append(json.html);
            div.find('> table:first').animate({marginTop: (-height)+'px'}, 2000, function() {
                var div = $(this).parent();
                $(this).remove();
                var tableHeight = div.find('> table:first').height();
                $(div).animate({height: tableHeight+'px'}, 'fast', function() {
                    $(this).parent().css({height: 'auto', overflow: 'auto'});
                });
            });

            picturesgroupBinder();
        });
    });
    
    $('.picturesgroup_next , .picturesgroup_prev').css({
        cursor: 'pointer',
        textDecoration: 'underline',
        color: '#0D74C4'
    });
    
    $('.picturesgroup_next , .picturesgroup_prev').hover(function () {
        $(this).css({color: '#FF6600'});
    }, function() {
        $(this).css({color: '#0D74C4'});
    });
    
    $('.picturesgroup_prev').each(function () {
        if ($(this).hasClass('page1'))
            $(this).hide();
        else
            $(this).show();
    });
}

$(document).ready(function () {
    // листалка групп картинок на главной
    picturesgroupBinder();
    
    // листалка картинки дня
    $('#podNextButton, #podPrevButton')
	    .css({
	        cursor: 'pointer',
	        textDecoration: 'underline',
	        color: '#0D74C4'
	    })
	    .hover(function () {
	        $(this).css({color: '#FF6600'});
	    }, function() {
	        $(this).css({color: '#0D74C4'});
	    })
	    .click(function () {
	        $('#pictureOfDayContainer').fadeOut(300, function() {
		        $("#pictureOfDayContainer").css ({display:'block', visibility:'hidden'});
		        var dir = this.id == 'podNextButton' ? 'next' : 'prev'; 
		        $.getJSON('/index/scrollpod', {date: window.pictureOfDayDate, dir: dir}, function (json) {
		            window.pictureOfDayDate = json.date;
		            $("#pictureOfDayContainer").css ({display:'none', visibility:'visible'})
		                                       .html(json.html)
		                                       .fadeIn();
                    if (json.next)
                        $('#podNextButton').show();
                    else
                        $('#podNextButton').hide();
                        
                    if (json.prev)
                        $('#podPrevButton').show();
                    else
                        $('#podPrevButton').hide();
		        });
		    }.bind(this));
        });
        
    // Новые автомобили в брендах
    /*$('.brand_new_cars').hover(function () {
        var id = parseInt(this.id.replace('brand_new_cars_', ''));
        
        var div = $('#brand_new_cars_div_'+id);
        
        if (div.length)
        {
            div = div[0];
            
            var offset = $(this).offset();
            $(div).css({
                left: offset.left+'px',
                top: (offset.top+$(this).height())+'px',
                display: 'block'
            });
        }
        else
        {
            var div = document.createElement('div');
            document.body.appendChild(div);
            
            var offset = $(this).offset();
            
            $(div).css({
                position: 'absolute',
                left: offset.left+'px',
                top: (offset.top+$(this).height())+'px',
                backgroundColor: 'white',
                margin: '5px',
                padding: '5px',
                display: 'block',
                border: '1px #EDE9DE dotted'
            });
            
            $(div).attr('id', 'brand_new_cars_div_'+id);
        }
        
        $(div).html('Loading ...');
         
        $.getJSON('/brands/newcars/'+id, {}, function(json) {
             var div = $('#brand_new_cars_div_'+json.brand_id);
             div.html('');
             for (var i=0; i<json.cars.length; i++) {
                div.append($('<span>').text(json.cars[i].full_name).html());
                div.append('<br />');                
             }
             
        });
    }, function () {
        var id = parseInt(this.id.replace('brand_new_cars_', ''));
        
        var div = $('#brand_new_cars_div_'+id);
        
        if (div.length)
        {
            div.html('');
            div.css({display: 'none'});
        }
    });*/
    
});