<div id="example">
	<a id="drag_button" style="cursor:pointer;cursor:hand;">Drag</a>
</div>

<p id="example">
<div id="example">
	<div id="drag_button" style="background:url(img_location.png) no-repeat;width:15px;height:15px;cursor:pointer;cursor:hand;">
	</div>
</div>

<div>	
	<div id="kwicks_pics">
		<a href="http://4hsa.pt" class="kwicks_pic">
		    <img src="images/portfolio/4hsa_big.png"/>
		  </a>
			<a href="http://techtrouts.com" class="kwicks_pic">
		    <img src="images/portfolio/techtrouts_big.png"/>
		  </a>
			<a href="http://webandcookies.com" class="kwicks_pic">
		    <img src="images/portfolio/wac_big.png"/>
		  </a>
	</div>
	<div id="kwicks">
	  <a href="http://4hsa.pt" rel="image" class="kwick">
	    <img src="images/portfolio/4hsa1.png" title="4HSA - Qualidade e Seguran&ccedil;a Alimentar" alt="4HSA - Qualidade e Seguran&ccedil;a Alimentar"/>
	  </a>
		<a href="http://techtrouts.com" class="kwick">
	    <img src="images/portfolio/techtrouts1.png"/>
	  </a>
		<a href="http://webandcookies.com" class="kwick">
	    <img src="images/portfolio/webandcookies1.png"/>
	  </a>
	</div>
</div>

#kwicks_pics {
	visibility:hidden;
	clear:both;
	width:880px;
	height:300px;
	text-align:center;
}
#kwicks_pics .kwicks_pic {
	display: block;
	background:none;
	border:none;
}
#kwicks {
	clear:both;
	width:auto;
	height:180px;
}
#kwicks .kwick {
	float:left;
	/*width should be the same as javascript's var szNormal*/
	width: 55px;
	background:none;
	border:none;
}

window.addEvent('domready', function(){
 
	var sequential = false; //changed to true requires to pass every intermediate image on slide
	var szNormal = 55; //should be the same as css #kwicks .kwick{width}
	var szSmall  = 50, szFull = 250, selected=0;
	var kwicks = $$("#kwicks .kwick");
	var fx = new Fx.Elements(kwicks, {wait: false, duration: 350, transition: Fx.Transitions.Back.easeOut});
	var kwickspics=$$("#kwicks_pics .kwicks_pic");
 
	var kwickspics_obj={
		movingTo:(kwickspics.length-1),
		selected:(kwickspics.length-1),
		next_i:false,
		checking:false,
		on_move:false,
		wait_delay_move:false,
		the_fxs:[],
		init:function(){
			kwickspics.each(function(kwickspic, i){
				kwickspics_obj.the_fxs[i]=new Fx.Slide(kwickspic, {
					duration: 200,
					//transition: Fx.Transitions.Back.easeOut,  -- transitions here return error on IE7, no idea why :/
					onComplete:function(){
					if(kwickspics_obj.wait_delay_move){
						kwickspics_obj.wait_delay_move=false;
						setTimeout(kwickspics_obj.checkStep,100);
						return;
					}
					if(kwickspics_obj.next_i!==false){
						kwickspics_obj.wait_delay_move=true;
						kwickspics_obj.the_fxs[kwickspics_obj.next_i].slideIn();
						kwickspics_obj.selected=kwickspics_obj.next_i;
						kwickspics_obj.on_move=false;
					}
				}});
				kwickspics_obj.the_fxs[i].hide();
			});
			$('kwicks_pics').style.visibility='visible';
			kwickspics_obj.the_fxs[kwickspics_obj.selected].slideIn();
		},
		moveTo:function(i){
			kwickspics_obj.movingTo=i;
			if(!kwickspics_obj.checking) kwickspics_obj.checkStep();
		},
		checkStep:function(){
			if(kwickspics_obj.on_move || kwickspics_obj.movingTo==kwickspics_obj.selected) {
				kwickspics_obj.checking=false;
				return;
			}
			kwickspics_obj.checking=true;
			kwickspics_obj.on_move=true;
 
			if(sequential){
				//requires to pass every image
				kwickspics_obj.next_i = kwickspics_obj.selected>kwickspics_obj.movingTo ?  kwickspics_obj.selected-1 : kwickspics_obj.selected+1;
				//go directly to final image
			} else kwickspics_obj.next_i=kwickspics_obj.movingTo;
			kwickspics_obj.the_fxs[kwickspics_obj.selected].slideOut();
			return;
		}
 
	}
	kwickspics_obj.init();	
 
	kwicks.each(function(kwick, i) {
		kwick.addEvent("mouseenter", function(event) {
			var o = {};
			o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
			kwicks.each(function(other, j) {
				if(i != j) {
					var w = other.getStyle("width").toInt();
					if(w != szSmall) o[j] = {width: [w, szSmall]};
				}
			});
			fx.start(o);
			kwickspics_obj.moveTo(i);
		});
	});
 
	$("kwicks").addEvent("mouseleave", function(event) {
		var o = {};
		kwicks.each(function(kwick, i) {
			o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
		});
		fx.start(o);
	});
});

window.addEvent('domready',function() { 
 
	//scaling values
	var scale_px=6;
	var scale_em=0.3;
 
	var bumps=$$('.bump');
	bumps.each(function(bump, i){
		var init_size=bump.getStyle('font-size');
 
		var units=init_size.match(/em/)!=null ? 'em' : init_size.match(/px/)!=null ? 'px' : false;
		if(units===false) return false;
 
		var size_up=(init_size.toFloat()+(units=='em' ? scale_em : scale_px))+units;
		var fx=new Fx.Morph(bump, {duration:90, wait:false, transition:Fx.Transitions.Back.easeOut});
 
		bump.addEvent("mouseenter", function(event) {
			fx.start({
				'font-size':size_up
			});
		});
		bump.addEvent("mouseleave", function(event) {
			fx.start({
				'font-size':init_size
			});
		});
	});
});

window.addEvent('domready',function() { 
 
	//default colors - if 'background-color' or 'color' aren't defined in css
	var default_bg_color='#fff';
	var default_color='#000';
 
	//highlight colors
	var h_bg_color='#eeeebb';
	var h_color='#999';
 
	highlight_anchors=function(item_id){
		if(!$(item_id)) {
			if(typeof $$(item_id)[0] == 'undefined' || typeof $$(item_id)[0].id == 'undefined'){
				return false;
			} else item_id=$$(item_id)[0].id;
		}
		var fx = new Fx.Styles(item_id, {duration:400, wait:false});
 
		var has_bg_color = $(item_id).getStyle('background-color') && $(item_id).getStyle('background-color')!='transparent'?true:false;
		var has_color = $(item_id).getStyle('color') && $(item_id).getStyle('color')!='inherit'?true:false;
		var cur_bg_color= has_bg_color ? $(item_id).getStyle('background-color') : default_bg_color;
		var cur_color= has_color ? $(item_id).getStyle('color') : default_color;
		fx.start({
				'background-color': h_bg_color,
				'color': h_color
			}).chain(function(){
				this.start({
					'background-color': cur_bg_color,
					'color': cur_color
				}).chain(function(){
					if(!has_bg_color) $(item_id).setStyle('background-color', 'transparent');
					if(!has_color) $(item_id).setStyle('color', 'inherit');
				});
			});
		return true;
	}
 
	//if anchor hash already exists, highlight onload
	if(typeof window.location.hash != 'undefined') highlight_anchors(window.location.hash);
 
	//setup smoothscroll
	new SmoothScroll({ duration: 1000, onComplete:function(){
		highlight_anchors(this.anchor);
	}});
});

 
window.addEvent('domready',function() { 
 
	//default colors - if 'background-color' or 'color aren't defined in css
	var default_bg_color='#fff';
	var default_color='#000';
 
	//highlight colors
	var h_bg_color='#eeeebb';
	var h_color='#999';
 
	highlight_anchors=function(item_id){
		if(item_id=='') return false;
		if(!$(item_id)) {
			if(typeof $$(item_id)[0] == 'undefined' || typeof $$(item_id)[0].id == 'undefined' || $$(item_id)[0].id==''){
				return false;
			} else item_id=$$(item_id)[0].id;
		}
 
		var fx = new Fx.Morph(item_id, {duration:400, wait:false});
 
		var has_bg_color = $(item_id).getStyle('background-color') && $(item_id).getStyle('background-color')!='transparent'?true:false;
		var has_color = $(item_id).getStyle('color') && $(item_id).getStyle('color')!='inherit'?true:false;
		var cur_bg_color= has_bg_color ? $(item_id).getStyle('background-color') : default_bg_color;
		var cur_color= has_color ? $(item_id).getStyle('color') : default_color;
		fx.start({
				'background-color': h_bg_color,
				'color': h_color
			}).chain(function(){
				this.start({
					'background-color': cur_bg_color,
					'color': cur_color
				}).chain(function(){
					if(!has_bg_color) $(item_id).setStyle('background-color', 'transparent');
					if(!has_color) $(item_id).setStyle('color', 'inherit');
				});
			});
		return true;
	}
 
	//if anchor hash already exists, highlight onload
	if(typeof window.location.hash != 'undefined') highlight_anchors(window.location.hash);
 
	//setup smoothscroll
	new SmoothScroll({ duration: 1000, onComplete:function(){
		highlight_anchors(this.anchor);
	}});
});