var PanelView = Backbone.View.extend({

	useIScrollbar: false,
	scrollbar: undefined,
	hidden: undefined,

	// constants
	
	ISCROLL_OPTIONS: {
		hScroll: false,
		scrollbarClass: 'lbScrollbar'
	},
	BROWSER_SCROLLBAR_WIDTH: 16 + 1,
	ISCROLLBAR_WIDTH: 8 + 1,
	CONTENT_CLASS: 'panelContents',

	initialize: function(options) {
		//
	},
	
	update: function(viewMode) {
		this.render(viewMode);
	},
	
	show: function() {
		this.hidden = false;
	},
	
	hide: function() {
		this.hidden = true;
	},
	
	render: function(viewMode) {
    	this.updateContentWidth();
    	this.updateIScrollbar();
    	return this;
  	},
  	
  	useIScrollbar: function(useScrollbar) {
  		this.useIScrollbar = useScrollbar;
  		if (useScrollbar) {
  			this.initIScrollbar();
  		}
  	},
	
	updateContentWidth: function () {

		var innerWidth = this.el.width() - 2 * CONSTANTS.layout.PANEL_SIDE_PADDING; // padding;
		if (this.useIScrollbar) {
			innerWidth -= this.ISCROLLBAR_WIDTH;
		} else {
			innerWidth -= this.BROWSER_SCROLLBAR_WIDTH;
		}
		$('.' + this.CONTENT_CLASS, this.el).css({
			width: innerWidth
		});
		return innerWidth;
	},
  		
	updateIScrollbar: function() {
		if (!this.scrollbar) {
			return;
		}
		this.scrollbar.refresh();
	},
	
	removeIScrollbar: function() {
		if (!this.scrollbar) {
			return;
		}
		this.scrollbar.destroy();
	},
	
	initIScrollbar: function() {
		var id = this.el.attr('id');
		this.scrollbar = new iScroll(id, this.ISCROLL_OPTIONS);
	}
	
});