$(document).ready(function(){
	initSlider();
	changeBackground();
	
	initResize();
});

//settings backgrounds
function changeBackground(){
	var backgrounds = new Array();
	backgrounds[0] = 'bg01';
	backgrounds[1] = 'bg02';
	backgrounds[2] = 'bg03';
	backgrounds[3] = 'bg04'; 
	backgrounds[4] = 'bg05';
	backgrounds[5] = 'bg06'; 
	backgrounds[6] = 'bg07';
	backgrounds[7] = 'bg08';
	
	//Here put new rows like backgrounds[2] = 'bg03';  and more...
	
	$("body").addClass(backgrounds[Math.floor( Math.random() * (backgrounds.length) )]);
}

function initSlider(){
	//getting number of sliding elements
	var li_count = $("div.slider-holder ul li").size();
	//gettings width of one sliding element
	var li_width = $("div.slider-holder ul li").width();
	//settings width to ul slider element accordingly to it's total subelements width
	$("div.slider-holder ul").css("width", li_count*li_width+"px");
	
	//setting "active class" to the first pager element
	$("div#right-sidebar div.pager ul li:first a").addClass("active");
	//defining click pager link event
	$("div#right-sidebar div.pager ul li a").click(function(e){
		e.preventDefault();//cancelling default action
		//if clicke item is currently shown, exit
		if ( $(this).hasClass('active') ){
			return;
		}
		//Saving clicked link object 
		var link = $(this);
		//gettings link pisition number
		var index = $("div#right-sidebar div.pager ul li").index(this.parentNode);
		//sliding ul to position acordingly current item index
		$("div.slider-holder ul").animate({marginLeft:-index*li_width+"px"},1000,function(){
			//this code will be processed after animation is ended
			//remove "active class" from all pager elements
			$("div#right-sidebar div.pager ul li a").removeClass('active');
			//add "active" class toclicked linkelement
			link.addClass('active');
		});
	});
}

function initResize(){
	$(window).resize(function(){
		if ( $(window).width() < 1050 ){
			$("div.main-holder").css({
				width: 985+"px",
				overflow: "hidden"
			});
		}else{
			$("div.main-holder").css({
				width: 1042+"px",
				overflow: "visible"
			});
		}
	});
}