// JavaScript Document

// предварительная загрузка изображений
topMenuLeft=new Image; topMenuLeft.src = "images/topMenuLeft.gif";
topMenuRight=new Image; topMenuRight.src = "images/topMenuRight.gif";

// изменение смежных картинок onMouseOver
function menuTopOver (menuItem) {
	var i = menuItem.id;
	document.images["menuTop"+(i-1)+"-"+i].src = "images/topMenuLeft.gif";
	document.images['menuTop'+i+'-'+(eval(i)+1)].src = "images/topMenuRight.gif";
	return false;
}

// изменение смежных картинок onMouseOut
function menuTopOut (menuItem) {
	var i = menuItem.id;
	document.images["menuTop"+(i-1)+"-"+i].src = "images/spacer.gif";
	document.images['menuTop'+i+'-'+(eval(i)+1)].src = "images/spacer.gif";
	return false;
}

function open_window(link,w,h) {
    var win = "width="+w+",height="+h+",menubar=no,location=no,resizable=yes,scrollbars=yes";
    newWin = window.open(link,'newWin',win);
}


Ext.namespace('CruiserWidget');

/**
 * @class CruiserWidget.Slide
 * @extends Ext.util.Observable
 * Lightweight slide Class.
 * 
 * @cfg {Boolean/Object} autoCreate
 * @cfg {Ext.Element} renderTo Используется совместно с autoCreate
 * @cfg {String} title
 * @cfg {Boolean} animate
 * @cfg {Number} duration
 */
CruiserWidget.Slide = function (el, config) {
	this.el = Ext.get(el);
	var dh = Ext.DomHelper;
    if(!this.el && config && config.autoCreate){
        if(typeof config.autoCreate == "object"){
            if(!config.autoCreate.id){
                config.autoCreate.id = el;
            }
            this.el = Ext.DomHelper.append(
            			(config.renderTo ? Ext.fly(config.renderTo) : false) || document.body,
                        config.autoCreate, true);
        }else{
            this.el = Ext.DomHelper.append(
            			(config.renderTo ? Ext.fly(config.renderTo) : false) || document.body,
                        {id: el}, true);
        }
    }
    
    el = this.el;
    el.setDisplayed(true);
    this.id = el.id;
    el.addClass("x-slide");
    
	Ext.apply(this, config);
	
	 /** The header element @type Ext.Element */
    this.header = el.child("/.x-slide-hd");
    /** The body element @type Ext.Element */
    this.body = el.child("/.x-slide-bd");	
	
	if (!this.header) {
		this.header = el.createChild({cls:"x-slide-hd"}, this.body ? this.body.dom : null);	
	}
	if (!this.body) {
		this.body = el.createChild({cls:"x-slide-bd"});
	}
	
	this.header.unselectable();
    if(!this.title){
    	this.title = this.header.dom.innerHTML;
    }
    this.header.update('');
    this.header.createChild({cls: "x-slide-hd-text", html: this.title});
    this.button = this.header.createChild({cls:"x-slide-button"});
    
    this.expanded = typeof this.expanded != 'undefined' ? 
						Boolean(this.expanded) : this.el.hasClass('x-slide-expanded') ? true : this.body.isVisible();
    this.el.addClass(this.expanded ? 'x-slide-expanded' : 'x-slide-collapsed');
    this.body.setStyle('display', this.expanded ? '' : 'none');
	
	this.addEvents({
		'beforeexpand' : true,
		'expand' : true,
		'beforecollapse' : true,
		'collapse' : true,
		'resized' : true
		
	});

	this.header.on('click', this.toggle, this);
}
Ext.extend(CruiserWidget.Slide, Ext.util.Observable, {
	animate: true,
	duration: .35,
	
	getEl : function () {
		return this.el;
	},
	
	getBody : function () {
		return this.body;
	},
	
	expand : function (callback) {
		if (!this.expanded) {
			if (this.fireEvent('beforeexpand', this) === false) {
				return;
			}
			if (this.animate) {
				this.animExpand(this.expandEl.createDelegate(this, [callback]));
			} else {
				this.expandEl(callback);
			}
		}
	},
	
	animExpand : function (callback) {
        var c = this.body;
//        c.enableDisplayMode('block');
        c.stopFx();

        this.animating = true;
        c.slideIn('t', {
            callback : function(){
               this.animating = false;
               Ext.callback(callback);
            },
            scope: this,
            duration: this.duration || .35
        });
	},
	
	expandEl : function (callback) {
		this.expanded = true;
        this.body.setStyle('display', '');
		this.el.replaceClass('x-slide-collapsed', 'x-slide-expanded');
        this.fireEvent("expand", this);
		this.fireEvent("resized", this);		
        if (typeof callback == "function") {
			callback(this);
        }
	},
	
	collapse : function (callback) {
		if (this.expanded) {		
			if (this.fireEvent('beforecollapse', this) === false) {
				return;
			}
			if (this.animate) {
				this.animCollapse(this.collapseEl.createDelegate(this, [callback]));
			} else {
				this.collapseEl(callback);
			}
		}
	},
	
	animCollapse : function (callback) {
        var c = this.body;
        c.stopFx();

        this.animating = true;
        c.slideOut('t', {
            callback : function(){
               this.animating = false;
               Ext.callback(callback);
            },
            scope: this,
            duration: this.duration || .35
        });
	},
	
	collapseEl : function (callback) {
        this.expanded = false;
        this.body.setStyle('display', 'none');
        this.el.replaceClass('x-slide-expanded','x-slide-collapsed');
        this.fireEvent("collapse", this);
		this.fireEvent("resized", this);
        if (typeof callback == "function") {
			callback(this);
        }
	},
	
	toggle : function () {
		this.expanded ? this.collapse() : this.expand();
	}
});


CruiserWidget.ScrollMenu = function() {
	var layout;
	
	return {
		init : function() {
			Ext.fly('scrollPanel').hide();
			//Ext.fly('scrollPanel').setVisible(false);
			layout = new Ext.BorderLayout('catalogMenu', {
				hideOnLayout: true,
				north: { 
					autoScroll: false, 
					split: false,
					initialSize: 282,
					minSize: 282,
					maxSize: 282					
				}
			});
			layout.beginUpdate();
			var ScrollPanelEl = new Ext.ScrollPanel('scrollPanel', {fitToFrame: true});
			layout.add('north', ScrollPanelEl);
			layout.getRegion('north').getEl().setHeight(282);
			layout.endUpdate();
			this.initSlides();
//			setTimeout(function () {
				//Ext.fly('scrollPanel').setVisible(true);
				Ext.fly('scrollPanel').show();
//			}, 500);
		},
		
		initSlides: function() {
			var els = Ext.query('/.x-slide', 'PanelContent');
			for (var i=0; i<els.length; i++) {
				if (Ext.isOpera) {
					var sl = new CruiserWidget.Slide(els[i], {
						animate: false
					});
				} else {
					var sl = new CruiserWidget.Slide(els[i]);
				}
			}			
		}	
	}

}();