$(document).ready(function() {
	var offset;
	var prev_cur_small; 
	var i=0;
	var i_mac_big = 0;
	var prev_i=0;
	var step = 0;

	var sync_img = $('.mac_dev_img div');
	var sync_links = $('#nav_link a');	
	var sync_img_small = $('.panel div');	
	if (sync_img.length > 0){
		var cur = sync_img.get(0);
	}
	if (sync_links.length > 0){
		var cur_sync_links = sync_links.get(0);	
	}
	if (sync_img_small.length > 0 ){
		var cur_small = sync_img_small.get(0);
		var cur_small_pos = $(cur_small).position();
		var cur_small_offset = $(cur_small).offset();
	}
	var count = $('.mac_dev_img div').size()-1;

	var width = parseInt($(cur_small).css('width'));
	var width_mac_big_panel = parseInt($('#mac_big_panel').css('width'));
	var maxstep = Math.floor(width_mac_big_panel / width)-1;
	var mac_big_pos = $('#mac_big').position();
	var mac_big_offset = $('#mac_big').offset();
	if (mac_big_pos && cur_small_pos){			
		var delta_x = mac_big_pos.left - cur_small_pos.left;
	}
	var panel_pos;

	function go_to(inc)
	{
	/*	if ($(elem).hasClass('notactive'))
			return false;
		prev_i = i;
		i = i + inc;
		*/
		if (i >= count)
			{
			 	i=count;
//				$('#nav_next, #gallery_nav_next').addClass('notactive');
				$('#gallery_nav_next').addClass('notactive');				
			}
		else if (i <= 0)
			{
				i=0;
//				$('#nav_prev, #gallery_nav_prev').addClass('notactive');
				$('#gallery_nav_prev').addClass('notactive');				
			}

		else
			{	
//				$('#nav_prev, #gallery_nav_prev').removeClass('notactive');
//				$('#nav_next, #gallery_nav_next').removeClass('notactive');
				$('#gallery_nav_prev').removeClass('notactive');
				$('#gallery_nav_next').removeClass('notactive');
				
			}
//		cur = sync_img.get(prev_i);	
//		alert($(cur).attr('id'));
		if ($(cur)!=undefined)
		{
			$('#brick_'+$(cur).attr('id')).parent().fadeOut('fast');				
			$(cur).css('display','none');
			$(cur_sync_links).css('display','none');
			cur =  sync_img.get(i);
			cur_sync_links = sync_links.get(i);	
			$('#brick_'+$(cur).attr('id')).parent().fadeIn('fast');				
			$(cur).css('display','block');
			$(cur_sync_links).css('display','block');
		}

		prev_cur_small = sync_img_small.get(prev_i);
		cur_small = sync_img_small.get(i);
		$(prev_cur_small).removeClass('dev_small_active');				
		$(cur_small).addClass('dev_small_active');
		panel_pos = $(cur_small).parent().position();	
		offset = $(cur_small).position( );	
		if (inc > 0 && i <= maxstep)
		{
			i_mac_big += inc;
			$('#mac_big').animate({ left: (i_mac_big*width)+'px'}, { duration: 400, queue: false });	
		}
		else if (inc > 0 && i > maxstep && i_mac_big < maxstep)
		{
			i_mac_big += inc;
			$('#mac_big').animate({ left: (i_mac_big*width)+'px'}, { duration: 400, queue: false });	
		}
		else if (inc > 0 && i > maxstep)
		{
			$('#mygallery .panel').animate({ left: '-'+(i-maxstep)*width+"px"}, { duration: 500, queue: false });	
		}
		
		else if (inc < 0 && i >= 0 && i_mac_big == 0)
		{
			$('#mygallery .panel').animate({ left: '-'+(i-i_mac_big)*width+"px"}, { duration: 500, queue: false });	
		}
		else
		{
			i_mac_big += inc;
			$('#mac_big').animate({ left: (i_mac_big*width)+'px'}, { duration: 400, queue: false });	
		}
	}
/*--------------------*/
	function go_step(elem, inc)
	{
		if ($(elem).hasClass('notactive'))
			return false;
		prev_i = i;
		i = i + inc;
		go_to(inc);
		return false;	
	}
	
	
	function go_at(elem)
	{
		prev_i = i;
		i = $('.panel div').index(elem);
		go_to(i - prev_i);
		return false;	
	}
	function _dblclick(elem)
	{
		var a = sync_links.get($('.panel div').index(elem));
	//	var a = $(tmp).find('a:first');
		var href = $(a).attr('href');
//		$(a).click();
		window.location.href=href;
//		location.replace(href);
//		alert(href);
		return false;
	}
	//	Debug.log("width, width_mac_big_panel:\n"+parseInt(width)+', '+width_mac_big_panel,1);		
	$('#gallery_nav_next').bind('click', function(){go_step(this,1)});
	$('#gallery_nav_prev').bind('click', function(){go_step(this,-1)});
//	$('.dev_small').bind('click', function(){go_at(this)});
//	$(".dev_small").dblclick( function () { _dblclick(this) });
	$('.dbl_click').bind('click', function(){go_at(this)});
	$('.dbl_click').dblclick( function () { _dblclick(this) });
	$('.click').bind('click', function(){_dblclick(this)});
	
	//$('#tab_4').unbind('click').colorbox({inline:true, href:'#syncmate_features', innerWidth:'800px', innerHeight:'780px'});

	
});