function Gallery(id){
    this.id = id;
    this.el = Ext.get(id);
    this.el.addClass('gallery');
    
    
    
    this.menu = this.el.createChild({
        tag: 'ul'
    });
    
    
    
    
    
    
    var rawImages = Ext.DomQuery.select('img', this.id);
    
    this.images = [];
    this.menuEntries = [];
    
    for (var i = 0; i < rawImages.length; i++) {
    
        var entry = this.menu.createChild({
            tag: 'li',
            children: [{
                tag: 'a',
                href: '#',
                onclick: 'return false',
                html: i + 1
            }]
        });
        
        entry.imageId = i + 1;
        entry.addListener('click', function(ev, ct){
            var entry = Ext.get(ct).parent();
            this.setActive(parseInt(entry.imageId));
        }, this);
        
        this.menuEntries[i + 1] = entry;
        var image = Ext.get(rawImages[i]);
        image.setVisibilityMode(Ext.Element.DISPLAY).hide();
        this.images[i + 1] = image;
    }
    
    this.prevEntry = this.menu.createChild({
        tag: 'li',
        children: [{
            tag: 'a',
            href: '#',
            onclick: 'return false',
            html: 'adasdasd',
            children: [{
                tag: 'img',
                src: 'fileadmin/templates/page/img/prev.png'
            }]
        }]
    }, this.menu.first()).hide();
    this.nextEntry = this.menu.createChild({
        tag: 'li',
        children: [{
            tag: 'a',
            href: '#',
            onclick: 'return false',
            children: [{
                tag: 'img',
                src: 'fileadmin/templates/page/img/next.png'
            }]
        }]
    }).hide();

    this.prevEntry.addListener('click', function(ev, ct){
		var entry = Ext.get(ct).parent().parent();		
        this.setActive(entry.imageId);
    }, this);

    this.nextEntry.addListener('click', function(ev, ct){
		var entry = Ext.get(ct).parent().parent();		
        this.setActive(entry.imageId);
    }, this);
    
	
	
    this.setActive(1);
    
}

Gallery.prototype = {
    setActive: function(index){
    
        if (this.activeIndex) {
            this.menuEntries[this.activeIndex].removeClass('act');
            this.images[this.activeIndex].hide(true);
        }
        this.activeIndex = index;
        
        this.images[this.activeIndex].show.defer(350, this.images[this.activeIndex], [true]);
        this.menuEntries[this.activeIndex].addClass('act');
        
        if (index > 1) {
            this.prevEntry.imageId = index - 1;
            this.prevEntry.show();
            
        }
        else {
            this.prevEntry.hide();
        }
        
        if (index < this.images.length - 1) {
            this.nextEntry.imageId = index + 1;
            this.nextEntry.show();
        }
        else {
            this.nextEntry.hide();
        }
    }
}



function TabPanel(id){
	Ext.get(id).show();
    this.id = id;
    this.headers = Ext.DomQuery.select('ul.tab_headers .tab_header', this.id);
    this.contents = Ext.DomQuery.select('div.tab_content', this.id);
    if (this.headers.length != this.contents.length) 
        throw 'Cannot create Tabpanel';
				
	var activeIndex = 0;
    
    for (var i = 0; i < this.headers.length; i++) {
        var h = Ext.get(this.headers[i]);
        this.headers[i].tabcontent = this.contents[i];		
		if(this.headers[i].getAttribute('activetab')){
			activeIndex = i;
		}
        h.addListener('click', function(e, header){			
            this.activeContent.removeClass(this.contentActiveClass);
            this.activeHeader.removeClass(this.headerActiveClass);
            this.activeHeader = Ext.get(header);
            this.activeContent = Ext.get(header.tabcontent);
            this.activeHeader.addClass(this.headerActiveClass);
            this.activeContent.addClass(this.contentActiveClass);
        }, this);
        if (h.hasClass('gallery')) {
            //new Gallery(this.contents[i]);
        }
    }
	this.activeContent = Ext.get(this.contents[activeIndex]);
    this.activeHeader = Ext.get(this.headers[activeIndex]);    
	this.activeContent.addClass(this.contentActiveClass);
    this.activeHeader.addClass(this.headerActiveClass);		
	
	
}

TabPanel.prototype = {
    headerActiveClass: 'act',
    contentActiveClass: 'act'
}

Ext.onReady(function(){
    var id = 'tabpanel1';
    if (Ext.get(id)) {
        try {
            var tp = new TabPanel(id);
        } 
        catch (e) {
            throw e
        }
    }
});