
    function Archive(mag, pageDiv) {
        var mags, currentYear, currentNumber, container, numberPanel, images, years;
        var that = this;
		// TODO change to m-archive
        this._module = $("#menu");
		this.loaded = false;
		this.isOpened = false;
		this._pageDiv = pageDiv;
		

               
        var init = function () {
			mags = { 
				 "2010": [undefined, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63],
				 "2011": [undefined, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75],
				 "2012": [undefined, 76, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
			}
			
			if (mag > 64) {
			    if (mag > 75) {
			        currentYear = 2012;
			    } else {
			        currentYear = 2011;
			    }				
			} else {
				currentYear = 2010;
			}
            currentNumber = mags[currentYear].indexOf(mag); //TODO ?? need
			container = $("#menu");
			numberPanel = new NumberPanel(currentNumber);
			images = new Images(currentNumber, currentYear);
			years = new Years(currentYear);
			
			this.obj = $("#scaf");
			
			this.offset = null;
        };
        
        var bind = function () {
            //bind IMAGES event
            images.obj.live({
                'imagehighlight': function (event, params) {
                    numberPanel.hightlightNumbers(params.numberOfImg);
                },
                'imageunhighlight': function (event, params) {
                    numberPanel.unhightlightNumbers(params.numberOfImg);
                },
                'imageselectnumber': function (event, params) {
                    numberPanel.setCurrentNumber(params.numberOfImg);
                    that._module.trigger("archiveselectnumber", { mag: mags[currentYear][params.numberOfImg] });
                }
            });
            
          //bind NUMBERS event
            numberPanel.obj.live({
                'panelhighlight': function (event, params) {
                    images.highlightImg(params.numberOfImg);
                },
                'panelunhighlight': function (event, params) {
                    images.unhighlightImg(params.numberOfImg);
                },
                'panelselectnumber': function (event, params) {
                    images.setCurrentNumber(params.numberOfImg);
                    that.obj.trigger("archiveselectnumber", { mag: mags[currentYear][params.numberOfImg] });
                }
            });
            
            //bind YEARS event 
            years.obj.live({
                'yearschange': function (event, params) {
                    currentYear = params.year;
                    images.setYear(params.year);
                } 
            });
        };
		
		this.bind = function(eventType, handler) {
            $.fn.bind.apply(this._module, arguments);
        },
        
        this.showDown = function () {
            container.animate({"top" : 0 + "px"}, 2000, function () {
                numberPanel.center(500);
                years.center(500);
            });
        };
        
        this.hideUp = function () {
        	var menuBottomOffset = container.offset().top - $(window).scrollTop() + container.height();
            var duration = 1300 * menuBottomOffset / container.height();
            container.animate({"top" : - container.height() + "px"}, duration);
        };
        
        
        this.scroll = function (delta) {
        
            var newTop = container.offset().top - delta;
            var st = $(window).scrollTop(),
                minTop = st - $('#menu').height();
            if ( newTop > st ) {
                newTop = st;
            }
            
            if ( newTop < minTop ) {
                this._module.trigger("archiveclose");
            } else {
                container.offset({ top: newTop });
                that.offset = container.height() + container.position().top;
                
               if (that.offset > $(window).height()) {
                   numberPanel.center(0);
                   years.center(0);
               }
            }
        };   
		
		this.load = function(callback) {
			var that = this;
			$.ajax({
				url: '/ajax/archive',
				type: 'get',
				data: { userid: that._userid },
				dataType: 'html',
				success: function(html) {
					//$('#menu').html(html);	
				    that._pageDiv.html(html);
					that.loaded = true;
					setTimeout(function() {
						init();
						bind();
						(callback || $.noop).call(this);
					}, 250);					
				}
			});
		}	
		
		this.show = function() {
		    this.isOpened = true;
		    this.load();
		}
    }
    
    function Years(cYear) {
        var that = this;
        var currentYear = cYear;
        var selectedYear = $('.year:contains("' + cYear + '")');
        var init = function() {
            selectedYear.cssHightlightYear();
        };
        
        var bind = function () {
            $(".yearActive").live({
                mouseenter: function(){
                    hightlightYear($(this));
                },
                mouseleave: function(){
                    unhightlightYear($(this));
                },
                click: function(){
                    that.obj.trigger("yearschange", { year: +$(this).text() });
                    hightlightYear($(this));
                    selectedYear = $(this);
                }
             });
        };
        
        var hightlightYear = function(element) {
            if (element.not(selectedYear)) {
                selectedYear.cssUnhightlightYear();
                element.cssHightlightYear();
            }
        }
        
        var unhightlightYear = function(element) {
            if (element.not(selectedYear)) {
                element.cssUnhightlightYear();
                selectedYear.cssHightlightYear();
            }
        }
        
        $.fn.cssUnhightlightYear = function () {
            $(this).css({ color:"#717070", background:"none", "font-size": "14px" });
        };
        
        $.fn.cssHightlightYear = function () {
            $(this).css({ color:"#fe7400", background:"url('/media/images/main/yearTr.png') no-repeat left 2px", "font-size": "16px" });
        };
        
        this.obj = $("#yearsCont");
        this.center = function (duration) {
            var map = { top:   ($(window).height() - that.obj.height()) / 2 };
            if (duration === 0) {
                that.obj.offset(map);
            } else {
                that.obj.animate(map, duration);
            }
        };
        
        init();
        bind();
    }
    
    function NumberPanel(cNumber) {
        var that = this;
        var currentNumber = cNumber;
        
        var init = function () {
            that.hightlightNumbers(currentNumber);
            bind();
        };
        
        var bind = function () {
            
            $(".aNLnumber").live({
                mouseenter: function () {
                    var number = +$(this).text();
                    if (number !== currentNumber) {
                        that.hightlightNumbers(number);
                        that.obj.trigger('panelhighlight', { numberOfImg: number });
                    }
                },
                mouseleave: function () {
                    var number = +$(this).text();
                    if (number !== currentNumber) {
                        that.unhightlightNumbers(number);
                        that.obj.trigger('panelunhighlight', { numberOfImg: number });
                    }
                }/*,
                click: function () {
                    var number = +$(this).text();
                    if (number !== currentNumber) {
                        that.setCurrentNumber(number);
                        that.obj.trigger('panelselectnumber', { numberOfImg: number });
                    }
                }*/
            });
        };
        
        var unbind = function () {
            $(".aNLnumber").die();
        }

        this.obj = $("#arhNumberLine");
        
        this.center = function (duration) {
            var map = { top:   ($(window).height() - that.obj.height()) / 2 };
            if (duration === 0) {
                that.obj.offset(map);
            } else {
                that.obj.animate(map, duration);
            }
        };
        
        this.hightlightNumbers = function (number) {
            var objects = $('.aNLnumber:contains("' + number + '"):first', '#arhNumberLine');
            var current = $('.aNLnumber:contains("' + currentNumber + '"):first', '#arhNumberLine');
            current.css({ color:"black", fontSize:"11px" });
            objects.css({ color:"#fe7400", "font-size":"18px" });
        };
        
        this.unhightlightNumbers = function (number) {
            var objects = $('.aNLnumber:contains("' + number + '"):first', '#arhNumberLine');
            var current = $('.aNLnumber:contains("' + currentNumber + '"):first', '#arhNumberLine');
            objects.css({ color:"black", fontSize:"11px" });
            current.css({ color:"#fe7400", "font-size":"18px" });
        };
        
        this.setCurrentNumber = function (number) {
            currentNumber = number;
            $('.aNLnumber', '#arhNumberLine').css({ color:"black", fontSize:"11px" });
            that.hightlightNumbers(number);
        }
        
        init();
    }

    function Images (cNumber, cYear) {
        var that = this;
        var currentNumber = cNumber;
        var styles = [];
        var INITORDER = [".arh1", ".arh2", ".arh3", ".arh4", ".arh5", ".arh6", ".arh7", ".arh8", ".arh9", ".arh10", ".arh11", ".arh12"];

        var init = function () {
            that.content = $('.arhContent[data-year="' + cYear + '"]');
            that.content.show();
            that.highlightImg(currentNumber);
            //styles = getStaticStyles();
			// ����� �������� � ������� getStaticStyles() � �������� � JSON
			styles = [{"css":{"left":"310px","top":"-7px","text-align":"left"},"img":{"height":78,"width":63,"margin-bottom":"8px","float":"none"},"zIndex":9},{"css":{"left":"150px","top":"76px","text-align":"center"},"img":{"height":181,"width":147,"margin-bottom":"0px","float":"none"},"zIndex":9},{"css":{"left":"-14px","top":"326px","text-align":"center"},"img":{"height":114,"width":92,"margin-bottom":"0px","float":"none"},"zIndex":9},{"css":{"left":"364px","top":"386px","text-align":"center"},"img":{"height":206,"width":167,"margin-bottom":"5px","float":"none"},"zIndex":9},{"css":{"left":"524px","top":"607px","text-align":"center"},"img":{"height":155,"width":125,"margin-bottom":"5px","float":"none"},"zIndex":9},{"css":{"left":"18px","top":"604px","text-align":"left"},"img":{"height":202,"width":164,"margin-bottom":"5px","float":"right"},"zIndex":10},{"css":{"left":"85px","top":"260px","text-align":"left"},"img":{"height":341,"width":276,"margin-bottom":"5px","float":"none"},"zIndex":10},{"css":{"left":"300px","top":"84px","text-align":"center"},"img":{"height":250,"width":202,"margin-bottom":"0px","float":"none"},"zIndex":8},{"css":{"left":"367px","top":"283px","text-align":"center"},"img":{"height":99,"width":80,"margin-bottom":"0px","float":"none"},"zIndex":9},{"css":{"left":"155px","top":"614px","text-align":"center"},"img":{"height":250,"width":202,"margin-bottom":"0px","float":"none"},"zIndex":9},{"css":{"left":"361px","top":"668px","text-align":"center"},"img":{"height":195,"width":158,"margin-bottom":"0px","float":"none"},"zIndex":9},{"css":{"left":"350px","top":"872px","text-align":"center"},"img":{"height":95,"width":77,"margin-bottom":"0px","float":"none"},"zIndex":9}];
			
            //that.showMag($(".arh" + currentNumber, that.content), true);
            setTimeout(function () {
                that.showMag($(".arh" + currentNumber, that.content));  
            }, 2100); 
            bind();
        };
        
        var bind = function () {
            $("#scaf .arhContent:visible .magazine:not(.unknown) img").live({
                mouseenter: function(){
                    var number = +$(this).closest('.magazine').attr("class").match(/arh(\d{1,2})/)[1];
                    if (number !== currentNumber) {
                        that.highlightImg(number);
                        that.obj.trigger('imagehighlight', { numberOfImg: number });
                    }
                },
                mouseleave: function(){
                    var number = +$(this).closest('.magazine').attr("class").match(/arh(\d{1,2})/)[1];
                    if (number !== currentNumber) {
                        that.unhighlightImg(number);
                        that.obj.trigger('imageunhighlight', { numberOfImg: number });
                    }
                },  
                click: function(e){
                    /*
                    // выделять журнал если он уже не выбран, а не переходить на его страницу
                    var number = +$(this).closest('.magazine').attr("class").match(/arh(\d{1,2})/)[1];
                    if (number !== currentNumber) {
                        e.preventDefault();
                        that.setCurrentNumber(number);
                        that.obj.trigger('imageselectnumber', { numberOfImg: number });
                    }*/
                    
                }
            });
        };
        
        var animateStylesByOrder = function(styles, order, cb) {
            var done = 0;
            for ( var i = 0, l = order.length; i < l; i++) {
                (function(key) {
                    $(order[key] + ":visible")
                        .animate(styles[key].css, 2000, 'linear', function() {
                            if(++done == 26) {
                                cb();
                            } 
                         })
                        .css('z-index', styles[key].zIndex)
						.find("img")
                            .animate(styles[key].img, 2000, 'swing', function() {
                                if(++done == 26) {
                                    cb();
                                } 
                             });
                })(i);  
            }
        };
        
        var cssStylesByOrder = function(styles, order) {
            for ( var i = 0, l = order.length; i < l; i++) {
                (function(key) {
                    $(order[key] + ":visible")
                        .css(styles[key].css)
                        .zIndex(styles[key].zIndex)
                        .find("img")
                            .css(styles[key].img);
                })(i);  
            }
        };
        
        var getStaticStyles = function() {
            var st = [];
            $.each(INITORDER, function(k,v) {
                var e = $(v + ":visible"),
                    img = e.find("img"),
                    style = { 
                        css: { "left" : e.css("left"), "top" : e.css("top"), "text-align": e.css("text-align") }, 
                        img: { "height" : img.height(), "width" : img.width(), "margin-bottom" : img.css("margin-bottom"), "float" : img.css("float")  }, 
                        zIndex: e.zIndex()
                }
                st.push(style);
            });
            return st;
        }
        
        this.obj = $("#scaf");
        
        this.setYear = function (year) {
            that.content.hide();
            that.content = $('.arhContent[data-year="' + year + '"]');
            that.content.show();
            if (year === 2010) { //TODO its too hard
                that.setCurrentNumber(12);
            } else {
                that.setCurrentNumber(8);
            }
            that.obj.trigger('imageselectnumber', { numberOfImg: currentNumber });
        };
        
        this.highlightImg = function(number) {
            var img = $(".arh" + number + ":visible img");
            var current = $(".arh" + currentNumber + ":visible img");
            current.attr("src", current.attr("black"));
            img.attr("src", img.attr("colored"));
        };
        
        this.unhighlightImg = function (number) {
            var img = $(".arh" + number + ":visible img");
            var current = $(".arh" + currentNumber + ":visible img");
            img.attr("src", img.attr("black"));
            current.attr("src", current.attr("colored"));
        };
        
        this.unhighlightAllImg = function () {
            $("#scaf .arhContent:visible .magazine:not(.unknown) img").each(function () {
                $(this).attr("src", $(this).attr("black")); 
            });
        };
        
        this.setCurrentNumber = function (number) {
            currentNumber = number;
            that.unhighlightAllImg();
            that.highlightImg(number);
            var div = $(".arh" + number + ":visible", that.content);
            that.showMag(div);
        };
        
        this.showMag = function(magazine, noAnimate) {
            //var targetShift = +magazine.attr("class").match(/arh\d{1,2}/)[0].substr(3) - 1 - 6;
            //var order = Array.prototype.concat(INITORDER.slice(targetShift), INITORDER.slice(0, targetShift));
            //if (noAnimate !== undefined) {
            //    cssStylesByOrder(styles, order);
            //} else {
                //animateStylesByOrder(styles, order, function () {
                    var img = magazine.find('img');
                    img.attr("src", img.attr("colored")).attr("src2", img.data("black"));
                //});
            //}
        };
        
        init();
    }
