function backgroundPanelHelper(lang) {
	this.lang = lang;
}

backgroundPanelHelper.prototype.init = function(baseUrl, sectionUrlMapping) {
	
	this.initLayout();
	this.initEvents();
	
	this.dispatch(baseUrl, sectionUrlMapping);
}

backgroundPanelHelper.prototype.initLayout = function() {
	
	this.container = $('#bg-block');
	
	this.menuContainer = $('#bg-panel-menu-container');
	this.listContainer = $('#bg-list-container');
	this.imageOptionsContainer = $('#bg-image-options-container');
	this.imageUploadContainer = $('#bg-image-upload-container');
	this.colourloversLogo = $('#colourlovers-logo');
	
	this.uploadControl = $('#upload-control');
	this.uploadButton = $('#upload-button');
	this.form = $('#template-patterns-form');
	
	/* menu start */
	this.patternNewButton = $('#bg-patternsNew-button');
	this.patternTopButton = $('#bg-patternsTop-button');
	this.patternFavoriteButton = $('#bg-patternsFavorite-button');
	this.patternRandomButton = $('#bg-patternsRandom-button');
	
	this.imagesButtonId = 'bg-bgimages-button';
	this.imagesButton = $('#' + this.imagesButtonId);
	
	this.imageUploadButtonId = 'bg-imageUpload-button';
	this.imageUploadButton = $('#' + this.imageUploadButtonId);
	/* menu end */
}

backgroundPanelHelper.prototype.initEvents = function() {

	var self = this;
	
	// toggle menu active class
	// update window.location.hash
	self.menuContainer.find('li').click(function() {
		
		var section = $(this).attr('id').split('-')[1];
		window.location.hash = '#' + section;
		
		self.highlightSection($(this));
		self.bgHelper.pagesContainer.hide();
	})
	
	// hide image options for all non image menu sections
	self.menuContainer.find('li[id!="' + self.imagesButtonId + '"]').click(function() {
		self.hideImageOptions();
	})
	
	// hide image upload container for non image-upload menu sections
	self.menuContainer.find('li[id!="' + self.imageUploadButtonId + '"]').click(function() {
		self.hideImageUploadContainer();
	})
	
	// show colourlovers logo for patterns sections
	/*
	self.menuContainer.find('li[id^="bg-patternsRandom-"]').click(function() {
		self.showColourLoversLogo();
	})
	*/
	
	// hide colourlovers logo for non patterns sections
	self.menuContainer.find(':not([id^="bg-patternsRandom-"])').click(function() {
		self.hideColourLoversLogo();
	})
	
	self.patternNewButton.click(function() {
		console.log('load new patterns');
	})
	
	self.patternTopButton.click(function() {
		
		self.bgHelper.initSection('patternsTop', true); 
		self.bgHelper.pageCountAction();
		
		self.showColourLoversLogo();
	})
	
	self.patternFavoriteButton.click(function() {
		console.log('load favorite patterns');
	})
	
	self.patternRandomButton.click(function() {
		
		self.bgHelper.initSection('patternsRandom', true);
		self.bgHelper.pageCountAction();
		
		self.showColourLoversLogo();
	})
	
	self.imagesButton.click(function() {
		
		self.bgHelper.initSection('bgimages', false); 
		self.bgHelper.pageCountAction();
		
		self.showImageOptions();
	})
	
	self.imageUploadButton.click(function() {
		self.showImageUploadContainer();
	})
	
	self.uploadControl.change(function() {
		$(this).val() ? self.uploadButton.removeClass('hidden') : self.uploadButton.addClass('hidden');
	})
	
	self.uploadButton.click(function(event) {
		
		event.preventDefault();
		
		self.setRequestAction('add');
		self.submitForm('/' + self.lang + '/common/site-template-bgimage-list');
	})
	
	self.imageOptionsContainer.find('select.bg-attachment').change(function() {
		
		var key = $(this).val();
		self.bgHelper.applyBgAttachment(key); 
	})
	
	self.imageOptionsContainer.find('select.bg-positions').change(function() {
		
		var key = $(this).val();
		self.bgHelper.applyBgPosition(key);
	})
}

backgroundPanelHelper.prototype.dispatch = function(baseUrl, sectionUrlMapping) { 
	
	this.bgHelper = new backgroundHelper(baseUrl, sectionUrlMapping);
	
	var section = window.location.hash.replace('#', '');
	var allowedSections = array_keys(sectionUrlMapping);
	
	if (!section || !in_array(section, allowedSections)) {
		section = 'patternsRandom';
	}
	
	var sectionButton = this.menuContainer.find('li[id="bg-' + section + '-button"]');
	
	this.bgHelper.init(section);
	
	if (section == 'patternsRandom') {
		
		this.showColourLoversLogo();
		this.hideImageOptions();
		this.bgHelper.pageAsInput = true; 
	}
	
	else if (section == 'bgimages') {
		
		this.showImageOptions();
		this.hideColourLoversLogo();
		this.bgHelper.pageAsInput = false; 
	}
	
	this.highlightSection(sectionButton);
	this.bgHelper.pageCountAction();
	
	this.container.fadeIn(500);
}

backgroundPanelHelper.prototype.highlightSection = function(Object) {
	
	Object.parent().find('li').removeClass('active');
	Object.addClass('active');
}


backgroundPanelHelper.prototype.submitForm = function(formAction) { 
	
	this.form.attr('action', formAction);
	this.form.trigger('submit');
}

backgroundPanelHelper.prototype.setRequestAction = function(action) {
	this.form.find('input[name="_action"]').val(action);
}

backgroundPanelHelper.prototype.showImageOptions = function() {
	this.imageOptionsContainer.removeClass('hidden');
}

backgroundPanelHelper.prototype.hideImageOptions = function() {
	this.imageOptionsContainer.addClass('hidden');
}

backgroundPanelHelper.prototype.showImageUploadContainer = function() { 
	
	this.listContainer.addClass('hidden');
	this.imageUploadContainer.removeClass('hidden');
}

backgroundPanelHelper.prototype.hideImageUploadContainer = function() { 
	
	this.imageUploadContainer.addClass('hidden');
	this.listContainer.removeClass('hidden');
}

backgroundPanelHelper.prototype.showColourLoversLogo = function() {
	this.colourloversLogo.removeClass('hidden');
}

backgroundPanelHelper.prototype.hideColourLoversLogo = function() {
	this.colourloversLogo.addClass('hidden');
}