// JavaScript Document
/**
 * @fileOverview Simple slidebar with jquery
 * @author AlexShamber alexshamber@gmail.com
 * @version 1.0
 */

/**
 * @constructor
 * @param {object} options Configuration options for slidebar 
 */
function SlideBarClass(options) {
	this.slideBarId = '#' + options.slideBarId;
	this.containerClass =this.slideBarId + ' ' + options.containerClass;
	this.buttonClass = this.slideBarId + ' ' + options.buttonClass;
	this.contentClass = this.slideBarId + ' ' + options.contentClass;
	//Initialization function
	this.init = function() {
		var contentCssClass = this.contentClass;
		var slideBarId = this.slideBarId;
		var buttonClass = this.buttonClass;
		//Set css parameters to div with class this.contentClass from css parameters of div with class this.containerClass
		$(this.buttonClass + ' > a').html('<table cellpadding="0" cellspacing="0" border="0" style="heigh:20px;"><tr><td><a href="javascript:void(0);"><img alt="" src="images/arrow_back.gif" /></a></td><td><img alt="" src="images/back.gif" /></td></tr></table>');
		$(this.buttonClass + ' > a').html('<table cellpadding="0" cellspacing="0" border="0" style="heigh:20px;"><tr><td><span><b><a id="link" style="font-weight:700;" href="javascript:void(0);"><img alt="" src="images/more.gif" /></a></b></span></td><td><a href="javascript:void(0);"><img alt="" src="images/arrow_forward.gif" /></a></td></tr></table>');
		$(contentCssClass).css({
			'width':$(this.containerClass).width(),
			'height':$(this.containerClass).height(),
			'top':$(this.slideBarId).offset().top ? $(this.slideBarId).offset().top : 430,
			'left':$(this.slideBarId).offset().left,
			'display':'block',
			'background':'#9999a3'
		});
		//Bind toogle event to the button with class this.ButtonClass
		$(this.buttonClass + ' > a').toggle(
				function() {
					$(this).html('<table cellpadding="0" cellspacing="0" border="0" style="heigh:20px;"><tr><td><a href="javascript:void(0);"><img alt="" src="images/arrow_back.gif" /></a></td><td><span><b><a id="link" style="font-weight:700;" href="javascript:void(0);"><img alt="" src="images/back.gif" /></a></b></span></td></tr></table>');
					$(this).css({'display':'none'});
					$(contentCssClass  + ' .inner').animate({marginLeft:'-708px'},1500);
					$(this).fadeIn('normal');
					
				},
				function() {
					$(this).html('<table cellpadding="0" cellspacing="0" border="0" style="heigh:20px;"><tr><td><span><b><a id="link" style="font-weight:700;" href="javascript:void(0);"><img alt="" src="images/more.gif" /></a></b></span></td><td><a href="javascript:void(0);"><img alt="" src="images/arrow_forward.gif" /></a></td></tr></table>');
					$(this).css({'display':'none'});
					$(contentCssClass + ' .inner').animate({marginLeft:'0px'},1500);
					$(this).fadeIn('normal');
					
				}
		);
		//Bind resize event to the window
		$(window).bind('resize', function(e) {
			//Set css parameters to div with class this.contentClass from css parameters of div with class this.containerClass
			$(contentCssClass).css({
				'width':$(this.containerClass).width(),
				'height':$(this.containerClass).height(),
				'top':$(this.slideBarId).offset().top,
				'left':$(this.slideBarId).offset().left,
				'display':'block',
				'background':'#9999a3'
			});
		});
	};
}
$(document).ready(function(){
	options = {
			'slideBarId':'slidebar1',
			'containerClass':'.container',
			'buttonClass':'.button',
			'contentClass':'.content'
	};
	slideBar = new SlideBarClass(options);
	slideBar.init();
});