var HomePage = {
	init: function() {
		this.tabs = [$('tab_1'), $('tab_2'), $('tab_3'), $('tab_4')];
		if (user_type == 'Seller') {
			this.tabs.push($('tab_5'));
		}
		this.initBrandsGrid();
	},
	selectTab: function(new_index){
		var nc;
		for(var i=0; i<this.tabs.length; i++) {
			nc = (i+1 == new_index) ? 'active' : '';
			if (this.tabs[i].className != nc) {
				this.tabs[i].className = nc;
			}
		}
		this.brandsGrid.switchMode(new_index, true);
	},
	initBrandsGrid: function(){
		this.brandsGrid = new ITcraft.grid({
			url : 'ajax_general.php',
			params: {cmd: 'get_sprung_brands'},
			content_container: 'grid_logos_box',
			mask_element: 'grid_logos_mask',
			limit: 18,
			initdata: brands_vaforites,
			pager_container: 'none',
			no_records: 'No Logos to Display.',
			//style="background-image:url();"
			template: new Template('<a title="Logo Design - #{name}" href="/logo-design/details/#{brand_id}" class="brand_middle"><img src="#{photo_thumb}" tag="Logo Design - #{name}" /><span class="number">$#{price}</span></a>'),
			
			_getTemplate: function(mode) {
				switch(mode) {
				case 4:
					if (!this.sold_template) {
						this.sold_template = new Template('<a title="Logo Design - #{name}" href="/logo-design/details/#{brand_id}" class="brand_middle"><img src="#{photo_thumb}" alt="Logo Design - #{name}" /><span class="number">Sold</span></a>');
					}
					return this.sold_template;
					break;

				case 5:
					if (!this.critique_template) {
						this.critique_template = new Template('<a title="Logo Design - #{name}" href="/logo-design/details/#{brand_id}" class="brand_middle"><img src="#{photo_thumb}" alt="Logo Design - #{name}" /><span class="number">Not for sale</span></a>');
					}
					return this.critique_template;
					break;

				default:
					if (!this.normal_template) {
						this.normal_template = new Template('<a title="Logo Design - #{name}" href="/logo-design/details/#{brand_id}" class="brand_middle"><img src="#{photo_thumb}" alt="Logo Design - #{name}" /><span class="number">$#{price}</span></a>');
					}
					return this.normal_template;
					break;
				}
			},
			switchMode: function(mode, reload) {
				if (mode < 1) return;
				this.params['tab'] = mode;
				
				this.template = this._getTemplate(mode);
				
				/***** update href for 'view all' link [start] *****/
				var v_all_link = $('grid_logos_vall_link');
				if (v_all_link) {
					var link = '/logo-design/';
					switch(mode) {
					case 1:
						link += 'brandstack-favs/'
						break;
	
					case 2:
						link += 'sprung/'
						break;
	
					case 3:
						link += 'recent/'
						break;
	
					case 4:
						link += 'sold/'
						break;
	
					case 5:
						link += 'critique/'
						break;
					}
					v_all_link.href = link;
				}
				/***** update href for 'view all' link [end] *****/
				
				if (reload) {
					this._loadGrid(0);
				}
			}/*,
			_getPager: function(d){
				return '';
			}*/
		});
		
		this.brandsGrid.switchMode(1);
	},
	
	/*** Positions Boxes [start] ***/
	pos_elements: [],
	pos_containers: [],
	active_index: 0,
	pos_inited: false,
	initPosBoxes: function() {
		if (this.pos_inited) return;
		var el,cont;
		for(var i=1; i<5; i++) {
			this.pos_elements.push($('positionbox'+i));
			this.pos_containers.push($('positionbox_cont'+i));
		}
		this.pos_inited = true;
	},
	onPosBoxChange: function(new_index) {
		if (new_index < 1) return;
		new_index--;
		if (this.active_index == new_index) return;
		this.initPosBoxes();
		if (!this.pos_elements[new_index] || !this.pos_containers[new_index]) {
			return;
		}
		this.pos_elements[this.active_index].className = 'box';
		this.pos_elements[new_index].className = 'box active';
		this.pos_containers[this.active_index].style.display = 'none';
		this.pos_containers[new_index].style.display = 'block';
		this.active_index = new_index;
	}
	/*** Positions Boxes [end] ***/
};
ITcraft.onReady(HomePage.init, HomePage);