/*
 object oriented gallery 
*/
options = {
	container: '#img_container',
	arrow: '#arrow',
	navigator: '#navigator'
};

var gallery = function(options){
	var options = options;
	var container = $(options.container);
	var images = container.children();
	
	/*
	* Construct image navigator and the others
	*/
	this.construct = function(){
		var navigator = document.getElementById(options.navigator.replace(/\#/gi,""));
		for(i=0;i<images.length;i++){
			//create Element
			new_span = new Image();
			new_span.src = $(images[i]).attr('thumb');
			if(i==0){
				new_span.className = 'dot_active';//set active if first item
			}else{
				$(images[i]).hide();
				new_span.className = 'dot_disable';
			}
			$(new_span).bind('click',i,function(event){
				c = event.data;
				navigate_id(c);	
				$('.dot_active').attr('class','dot_disable');	
				$(this).attr('class','dot_active');												 
			});
			navigator.appendChild(new_span);
		}
		$(navigator).width(images.length*85);
	}
	
	/*
	* Animate item by id using this function
	*/
	this.navigate_id = function(id){
		target = images[id];
		$(target).fadeIn(2000);
		for(i=0;i<images.length;i++){
			if(images[i] != target){
				$(images[i]).fadeOut(2000);
			}
		}
	}
	
	this.construct();
	this.navigate_id(0);
}

function load_news(id){
	$.get('news.php?id='+id+'', function(data) {
  	$('#news_slider').html(data);
	});
}

$(document).ready(function(){
	gallery(options);
});