var cntr = null;
var cntrw = 0;
var imgs = [0];
var imgsw = [];
var imgobj = [];
var last = 0;
var curr = 0;
var lnth = 0;
var st = 0;
var dir = 1;
var tls = [];
var alts = [];
var links = 0;
var bw = 0;
var single = false;
var st_height = 0;

/*try event delegation script. if we need to move images separately we need to make a strip which has two screens to the left and two to the right and then move images within */


$(document).ready(function(){
	
	bw = $(document).width();
	$(window).resize(function(){
		bw = $(document).width();
		var tempp = parseInt((bw - imgsw[curr])/2)-(imgs[curr]);
		cntr.animate({ marginLeft: tempp},100,function(){
			cntr.css('margin-left',tempp+'px');	
		});
	});
	// fist get browser window with

	cntr = $($('div#media'));


	tcnt = 0;
	cntr.find('img').each(function(){
		
		var temp = $(this).width()-6;
		var temph = $(this).height();
		if (st_height < temph) {
			st_height = temph;
		}
		$(this).attr('rel',lnth);
		cntrw += temp+10;
		lnth++;
		imgsw.push(temp);
		imgs.push(cntrw);
		imgobj.push($(this));
		if (tcnt!=0) {
			if (single) {
				$(this).hide();
			} else {
				$(this).fadeTo("fast", 0.3);
			}
		}
		tcnt++;
		alts.push($(this).attr('alt'));
		
		$(this).click(function(me){
			imageclick($(this));
		});
		
	});
	
	cntr.css('height',st_height+'px');
	cntr.css('width',cntrw+500+'px');
	st = parseInt((bw - imgsw[curr])/2)
	
	/// get width of first image and position it centered in 1150
	cntr.css('margin-left', st+'px');
	
	links = $($('p.nav a'));
	links.eq(curr).addClass('active');
	setText();
	
	links.click(function(me){
		me.preventDefault();
		links.eq(curr).removeClass('active');
		curr = parseInt($(this).html()) - 1;
		if (curr == 0) {
			dir = 1;
			$('#next-image').attr('src','images/arrowrs.gif');
			$('#previous-image').attr('src','images/arrowls.gif');	
		} else if (curr == lnth) {
			dir = -1;
			$('#next-image').attr('src','images/arrowls.gif');
			$('#previous-image').attr('src','images/arrowls.gif');	
		}
		moveImg();
		return false;
	});
	
	$('#next-image').click(function(me){
		me.preventDefault();
		nextImg($(this));
		return false;
	});	
	$('#previous-image').click(function(me){
		me.preventDefault();
		nextImg($(this));
		return false;
	});
	
	
	
	
});

function nextImg(obj) {
	links.eq(curr).removeClass('active');
	if (dir == 1) {
		if(curr < lnth-1) {
			curr++;
		}
		if (curr == (lnth-1)) {
			dir = -1;
			$('img.next_img').attr('src','images/arrowls.gif');
		}
	} else {
		if(curr > 0) {
			curr--;
		} 
		if (curr == 0) {
			dir = 1;
			$('img.next_img').attr('src','images/arrowrs.gif');
		}
	}
	moveImg();
		
}

function imageclick(obj) {
		links.eq(curr).removeClass('active');
		var tempimgc = parseInt(obj.attr('rel'));
		if (tempimgc == curr) {
			//$(obj).trigger('click');
			nextImg(obj);
		} else {
			curr = parseInt(obj.attr('rel'));
			if (isNaN(curr)) {
				curr = 0;
			}
			//alert(obj.attr('rel'));
			if (curr == 0) {
				dir = 1;
				$('img.next_img').attr('src','images/arrowrs.gif');		
			} else if (curr == lnth) {
				dir = -1;
				$('img.next_img').attr('src','images/arrowls.gif');		
			}
			moveImg();
		}
		return false;

}

function moveImg() {
	links.eq(curr).addClass('active');
	if(last!=curr) {
		if (!single) {
			imgobj[last].fadeTo("fast", 0.3);
		}
	}
	if (single) {
		var tempp = parseInt((bw - imgsw[curr])/2);
	} else {
		var tempp = parseInt((bw - imgsw[curr])/2)-(imgs[curr]);
	}
	//$('#canvas').prepend(tempp+',');
	var tempc = curr;
	var templ = last
	if (single) {
		//if(last!=curr) {
			imgobj[last].fadeTo("fast",0,function(){
				imgobj[templ].hide();
				cntr.css('margin-left',tempp+'px');
				imgobj[tempc].show();
				imgobj[tempc].fadeTo("fast", 1);
				setText();
			});	
		//} else {
		
		//}
	
	} else {
		cntr.animate({ marginLeft: tempp},300,'easeOutExpo',function(){
			cntr.css('margin-left',tempp+'px');	
			imgobj[tempc].fadeTo("fast", 1);
			
			setText();
		});
		
	}
	
	last = curr;
	
}


function setText() {
	$('div#description p.desc').html(alts[curr]);
}