var slider_slide_count=0;
var slider_slide_width=650;
var slider_control_width=17; // odd number!
var slider_control_space = (slider_control_width-1)/2;

/**
* Initliaze one slide
*/
function slider_init_slide( self ){
	slider_slide_count++;
}

/**
* Move slide displacement pixels to the right
* and adjust content
*/
function slider_move_to( no, pos ){

	var idx = no-2;

	if( pos < slider_control_space ) return false; //pos = slider_control_space;
	if( pos > slider_slide_width - slider_control_space ) return false; //pos = slider_slide_width - slider_control_space;

	var hasSpace = slider_make_space( no, pos );

	if( !hasSpace ) return false;

	var remain = slider_slide_width - pos;

	var slide = $( 'slide-' + no );
	slide.setStyles( {
		'left': pos,
		'width': remain,
	} );

	var img = slide.getElements( 'img' )[0];
	img.setStyles( {
		'left': -pos,
	} );

	var control = $( 'slider-line-' + no );

	control.setStyles( {
		'left': pos - ((slider_control_width-1)/2)
	} );

	return true;
}

function slider_make_space( no, pos ){

	var old_pos = slider_pos( no );
	var diff = pos-old_pos;
	if( diff < 0 ){ // move left

		var no2 = no-1;
		if( no2 < 2 ) return true; // last
		var pos2 = slider_pos( no2 );
		if( pos2 + slider_control_space > pos ){
			return slider_move_to( no2, pos - slider_control_space );
		}

	} else { //move right

		var no2 = no+1;
		if( no2 > slider_slide_count ) return true;
		var pos2 = slider_pos( no2 );
		if( pos2 - slider_control_space < pos ){
			return slider_move_to( no2, pos + slider_control_space );
		}
	}
	return true;
}

/**
* returns the position of the slider no
*/
function slider_pos( no ){

	var slide_id = 'slide-' + no;
	var slide = $( slide_id );
	var pos = slide.getStyle( 'left' );
	pos = pos.replace( 'px', '' );
	return pos-0;
}

function slider_no( pos ){

	for( var i=2; i<=slider_slide_count; i++ ){

		var sPos = slider_pos( i );

		var min = sPos - slider_control_space;
		if( min < 0 ) min = 0;
		var max = sPos + slider_control_space;
		if( max >= slider_slide_width ) max = slider_slide_width-1;

		if( pos > min && pos < max ) return i;
	}
	return 0;
}

var slider_moving = 0;
var slider_start;
var slider_start_pos;

/*
function slider_no_for( control ){

	return control.get( 'id' ).replace( 'slider-line-', '' );
}
*/

function slider_offset_in_div( e ){

	var ev = e.event;
	if( ev.offsetX ){
		return ev.offsetX;
	} else if( ev.layerX ){
		return ev.layerX;
	} else {
		//alert( "No fitting offset found. Perhaps your browser is too old. Or just 'different'." );
		return -1;
	}
}

function slider_control_mouse_down( e ){

	//console.log( "d" );

	var pos = slider_offset_in_div( e );
	//console.log( 'pos: ' + pos );
	var no = slider_no( pos );
	//console.log( 'no: ' + no );
	if( no ){
		
		slider_moving = no;
		slider_start = e.event.clientX;
		slider_start_pos = slider_pos( no );

		$('slider-overlay').setStyle( 'display', 'block' );
	}

	return false;
}

function slider_control_mouse_up(){

	//console.log( "u" );
	slider_moving = 0;
	$('slider-overlay').setStyle( 'display', 'none' );

	return false;
}
function slider_control_mouse_move( e ){

	var offX = slider_offset_in_div( e );
	var no = slider_no( offX );
	if( no ){
		this.setStyle( 'cursor', 'move' );
	} else {
		this.setStyle( 'cursor', 'auto' );
	}

	var moving = slider_moving;
	
	if( moving ){
		//console.log( "m" );
		var x = e.event.clientX;
		var displace = x-slider_start;
		var pos = slider_pos( moving );
		slider_move_to( moving, slider_start_pos+displace );
	}

	return false;
}

/**
* Initialize all component
*/
function slider_init(){

	$$('#slider .slide').each( slider_init_slide );

	var delta = slider_slide_width / slider_slide_count;

	// displace
	for( var i=2; i<=slider_slide_count; i++ ){

		var pos = Math.ceil((delta * (i-1)));

		slider_move_to( i, pos );
	}

	$( 'slider-control' ).addEvents( {
			'mousedown': slider_control_mouse_down,
			'mouseup': slider_control_mouse_up,
			'mousemove': slider_control_mouse_move,
			//'mouseleave': slider_control_mouse_up,
	} );
	$( 'slider-overlay' ).addEvents( {
			//'mousedown': slider_control_mouse_down,
			'mouseup': slider_control_mouse_up,
			'mousemove': slider_control_mouse_move,
			//'mouseleave': slider_control_mouse_up,
	} );
}

document.addEvent( 'domready', function(){

	if( $('slider') ){
		slider_init();
	}
} );