// projects browser
projects = {	
		
	settings : {
		'scroll_speed' : 250, // milliseconds 
		'thumb_scroll_increment' : 640, // pixels
		'container_width' : 640 // pixels
	},
		
	init : function() {
			width = this.set_container_width();
			if(width >= this.settings.container_width) {
				this._insert_navigation();
				this._init_navigation();	
				this.animate_thumb(0, false); //weird bug with Safari (foo call)
				this.scroll_to_panel_page();
			}		
			
			// always init overlay effect
			this._init_overlay();		
		},

	set_container_width: function() {
		// set container width 
		var width = 0;
		$('#projects div ul img').each(function(el) { 
			width += $(this).width();
		});
		$('#projects div ul').css('width', width);
		return width;
	},

	scroll_thumbs: function(direction) {
		increment = this.settings.thumb_scroll_increment; // increment value	
		page_number = parseInt($('input#panel_page').val()); //storing page number in a hidden input

		if(!$('#projects div ul').hasClass('animating')){ // do nothing if block is animated 

			if(direction == 'left') {				
				left = parseInt($('#projects div ul').css('left'));
				if(left < 0) {
					$('input#panel_page').attr('value', page_number -= 1);
					new_left = left + increment;
				}	else {
					new_left = 0;	
				}
				this.animate_thumb(new_left, true);
			} else if (direction == 'right') {
				increment = increment * -1;
				left = parseInt($('#projects div ul').css('left'));
				max = $('#projects div ul').width() + left;

				if(max < $('#projects .slide-content').width()) {
					new_left = left;	
				} else {
					$('input#panel_page').attr('value', page_number += 1);
					new_left = left + increment;				
				}			
				this.animate_thumb(new_left, true);				
			}		
		}	
	},

	// called on init() only
	scroll_to_panel_page : function() {
		increment = this.settings.thumb_scroll_increment; // increment value	
		page_number = parseInt($('input#panel_page').val());
		if (page_number > 0) {
			new_left = (increment * page_number) * -1;
			this.animate_thumb(new_left, false);
		}
	},

	animate_thumb : function(value, animate) {
		$('#projects div ul').addClass('animating');	
		if(animate) {
			$('#projects div ul').animate({ 
			        left: value
			}, this.settings.scroll_speed, 'swing', this.after_scroll);			
		} else {
			$('#projects div ul').css('left', value);
			this.after_scroll();
		}
	},

	after_scroll : function() {
		$('#projects div ul').removeClass('animating');		
		$('#projects div ul li a').each(function() {
			// remove any params to href
			var strHref = $(this).attr("href");
	  	if (strHref.indexOf("?") > -1 ){
				strHref = strHref.substr(0, strHref.indexOf("?"));
	  	}

			new_href = strHref + '?panel_page=' + $('input#panel_page').val();
			$(this).attr('href', new_href);
			
			$(this).mouseover(function() {
				projects._toggle_overlay(this, 'show');
			});			
			$(this).mouseout(function() {
				projects._toggle_overlay(this, 'hide');
			});			
		});
	},
	
	_init_overlay : function() {		
		$('#projects div ul li a').mouseover(function() {
			projects._toggle_overlay(this, 'show');
		}).mouseout(function() {
			projects._toggle_overlay(this, 'hide');
		});			
	},
	
	_toggle_overlay : function(e, action) {
		// define selection, bug with IE6/7
		var sel = $(e);
		
		// get content and positions
		var content = $(sel).prev().html();
		var positions = $(sel).offset();

		if(action == 'show') {
			$("#project-overlay").html(content);
			$("#project-overlay").css('left', positions.left);
			if($.browser.msie && parseInt($.browser.version.substr(0,1)) <= 7) {
				$("#project-overlay").css('top', positions.top - 18);	
			} else {
				$("#project-overlay").css('top', positions.top - 55);
			}
			
		} else {
			$("#project-overlay").html('');
		}		
	},
	

	_insert_navigation : function() {
		$('#projects').append('<a href="#" class="browser-btn left" rel="left">Left</a>');		
		$('#projects').append('<a href="#" class="browser-btn right" rel="right">Right</a>');
	},

	_init_navigation : function() {
		$('#projects a.browser-btn').each(function() {
			$(this).bind('click', function(){
				projects.scroll_thumbs(this.rel);
				return false;
			});
		});
	}


};

project_images = {

	settings : {
		'speed' : 500, // milliseconds 
		'container_width' : 640, // pixels
		'container_height' : 400 // pixels		
	},

	init : function() {		
		el = '.project-images';				
		var items = $(el + ' .slide-content ul li');
		
		if(items.length > 1) {						
			this._insert_navigation(items);
						
			// init nav
			this._activate_menu_item(0);
			
			// fade first item
			this.fade_image(0);
		} else {
			// fade first item but don't insert image navigation
			this.fade_image(0);
		}
						
	},
	
	fade_image: function(pos) {
	  // previous active el
    previous = $('.project-images div ul li').filter('.active')[0];
    $(previous).css('zIndex', pos - 1).removeClass('active');

    // animating current el
		$('.project-images div ul li:eq('+pos+')')
		  .css('opacity', 0)
		  .css('zIndex', pos)
		  .addClass('active')
		  .animate({opacity: 1}, this.settings.speed, null, function() { $(previous).css('opacity',0); })
		;
		
		// activating sub nav link
		this._activate_menu_item(pos);
	},

	_insert_navigation : function(items) {
		// adding navigation container & links
		$('.project-images').append('<ul id="images_mini_nav"></ul>');				
		items.each(function(i) {
			$('.project-images #images_mini_nav').append("<li><a name='"+i+"'>"+(i+1)+"</a></li>");
		});

		this._init_navigation();
	},

	_init_navigation : function() {
		$('.project-images #images_mini_nav a').each(function() {
			$(this).bind('click', function(){
			  if(!$(this).hasClass('active')) {
			    project_images.fade_image(this.name);  
			  }				
			});
		});
	},
	
	_current_position : function(pos) {
		return pos * this.settings.container_width * -1;
	},
	
	// activate menu item (removing any active then adding to the current position)
	_activate_menu_item : function(pos) {
		$('.project-images #images_mini_nav a').each(function() { $(this).removeClass('active'); });
		$('.project-images #images_mini_nav a:eq('+pos+')').addClass('active');
	}
	
  // _center_images : function(items) {
  //  items.each(function(i) {
  //    src = $(this).children('img')[0].src;
  //    $(this).css('background-image', 'url("'+src+'")');
  //  });
  // }

};