var mousePos = Array(0,0);
var direction = 'R';
var deltaX = 0;
var deltaY = 0;
var start = false;

function mouseCoords(eventObj){
	var xpos, ypos;
	if(eventObj.pageX || eventObj.pageY){
		xpos = eventObj.pageX;
		ypos = eventObj.pageY;
	} else {
		xpos = eventObj.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
		ypos = eventObj.clientY + document.documentElement.scrollTop - document.documentElement.clientTop;
	}
	return new Array(xpos, ypos);
}

function mouseMove(eventObj){
	eventObj = eventObj || window.event;
	coords = mouseCoords(eventObj);
	if(coords[0]-mousePos[0]>0) direction = 'R';
	else direction = 'L';
	deltaX = coords[0]-mousePos[0];
	deltaY = coords[1]-mousePos[1];
	mousePos = coords;
	move_slider(start,deltaX);
}

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.parentNode;
    }
    return { top: _y, left: _x };
}

document.onmousemove = mouseMove;
document.onmouseup = mouseUp;

mask = document.getElementById('SliderMask');
overlay = document.getElementById('SliderOverlay');
panel = document.getElementById('SliderPanel');
slider = document.getElementById('SliderImg');
caption = document.getElementById('SliderCaption');

var image_width = 100;
var image_height = 162;
var current_image_width = 130;
var current_image_height = 211;
var image_padding = 20;

var slider_icon_width = 0;
var slider_width = 830;
var slider_start_position = 0;
var slider_left = 0;
var sliding = false;

var reflection = true;
var reflection_height = 40;
var reflection_png = '/reflect3.php';
var reflection_jpg = '/reflect2.php';

var speed = 20;

var actual_image_width = image_width + image_padding;
var actual_current_width = current_image_width + image_padding;

var slider_end_position = slider_width - slider_icon_width - slider_start_position;
var slider_actual_width = slider_end_position - slider_start_position;

var slider_panel_width = actual_image_width * image_array.length + current_image_width;
var max_slider_left = slider_width/2;
var min_slider_left = slider_width/2 - slider_panel_width + image_width/2 + slider_start_position + 1;
var slide_factor = slider_panel_width / slider_actual_width;

var current_image_id = parseInt(image_array.length / 2);

mask.style.height = (current_image_height + 5) + 'px';

panel.style.width = slider_panel_width + 'px';
panel.style.left = (-actual_image_width*current_image_id+max_slider_left-current_image_width/2) + 'px';
panel.innerHTML = create_images(current_image_id,0.5);

slider_left = slider_width/2 + slider_start_position;
if(slider) slider.style.left = slider_left+'px';

//mask.style.border = '1px solid #999900';
//caption.style.border = '1px solid #999900';

function create_images(id,percent){
	
	var imageStream = '';
	
	for(i=0;i<image_array.length;i++){
		
		var ext_arr = image_array[i].split('.');
		var ext = ext_arr[ext_arr.length-1].toUpperCase();
		var src = image_array[i];
		
		if(reflection){
			if(ext=='PNG') src = reflection_png + '?height=' + reflection_height + '&img=' + src;
			else src = reflection_jpg + '?height=' + reflection_height + '&img=' + src;
		}
			
		if(id==i){
			
			if(percent>=0 && percent<=0.5) percent = percent*2;
			else if(percent>0.5 && percent<=1) percent = (1-percent)*2;
			
			var w_increment = (current_image_width-image_width)*percent;
			if(w_increment<0) w_increment = 0;
			var w = image_width + w_increment;
			var h_increment = (current_image_height-image_height)*percent;
			if(h_increment<0) h_increment = 0;
			var h_margin = current_image_height-image_height-h_increment;
			var h = image_height + h_increment;
			
			imageStream += '<img id="XImg'+i+'" onclick="slide_me('+i+')" src="'+src+'" width="'+w+'" height="'+h+'" alt="" style="margin-right:20px;margin-top:'+h_margin+'px" />';
			caption.innerHTML = caption_array[current_image_id];
			
		} else {
			
			imageStream += '<img id="XImg'+i+'" onclick="slide_me('+i+')" src="'+src+'" width="'+image_width+'" height="'+image_height+'" alt="" style="margin-right:20px" />';
			
		}
	}
	
	return imageStream;
}

function move_slider(is_start,dx){
	
	if(!is_start) return false;
	
	l = slider_left + dx;
	if(l<slider_start_position) l = slider_start_position;
	if(l>slider_end_position) l = slider_end_position;
	slider_left = l;
	if(slider) slider.style.left = l + 'px';
	
	l = parseFloat(panel.style.left) - dx * slide_factor;
	if(l > max_slider_left) l = max_slider_left;
	if(l < min_slider_left) l = min_slider_left;
	panel.style.left = l + 'px';
	
	var current_slider_position = max_slider_left - l;
	
	current_image_id = parseInt((current_slider_position+slider_start_position-image_padding)/actual_image_width);
	
	if(current_image_id+1>image_array.length){
		for(i=image_array.length-3;i<image_array.length;i++){
			document.getElementById('XImg'+i).style.width = image_width+'px';
			document.getElementById('XImg'+i).style.height = image_height+'px';
			document.getElementById('XImg'+i).style.marginTop = (current_image_height-image_height)+'px';
		}
		return false;
	}
	
	var percent = 0.5-Math.abs((-l-actual_image_width*current_image_id+max_slider_left-current_image_width/2-5)/current_image_width)
	if(percent<0) percent=0;
	if(percent>0.5) percent=0.5;
	
	animate_images(current_image_id, percent);
	return false;
}

function animate_images(id,percent){
	
	caption.innerHTML = caption_array[id];
	
	if(percent>=0 && percent<=0.5) percent = percent*2;
	else if(percent>0.5 && percent<=1) percent = (1-percent)*2;
	
	var w_increment = (current_image_width-image_width)*percent;
	if(w_increment<0) w_increment = 0;
	var w = image_width + w_increment;
	var h_increment = (current_image_height-image_height)*percent;
	if(h_increment<0) h_increment = 0;
	var h_margin = current_image_height-image_height-h_increment;
	var h = image_height + h_increment;
			
	document.getElementById('XImg'+id).style.width = w+'px';
	document.getElementById('XImg'+id).style.height = h+'px';
	document.getElementById('XImg'+id).style.marginTop = h_margin+'px';
	
	for(i=id-1;i>id-3;i--){
		if(i<0) continue;
		document.getElementById('XImg'+i).style.width = image_width+'px';
		document.getElementById('XImg'+i).style.height = image_height+'px';
		document.getElementById('XImg'+i).style.marginTop = 0+'px';
	}
	
	for(i=id+1;i<id+3;i++){
		if(i>=image_array.length) continue;
		document.getElementById('XImg'+i).style.width = image_width+'px';
		document.getElementById('XImg'+i).style.height = image_height+'px';
		document.getElementById('XImg'+i).style.marginTop = 0+'px';
	}
	
}

var current_slider_pos = 0;
var target_slider_pos = 0;
var xMove = 0;

function slide_arrow(direction){
	if(sliding) return;
	if(direction=='left') id = current_image_id+1;
	else id = current_image_id-1;
	slide_me(id);
}

function slide_me(id){
	
	if(current_image_id==id) return;
	if(sliding) return;
	
	current_slider_pos = parseInt(panel.style.left);
	target_slider_pos = -actual_image_width*id+max_slider_left-current_image_width/2;
	
	xMove = 5/slide_factor;
	if(current_slider_pos<target_slider_pos) xMove = -xMove;
	
	move_slider_to_current(id);
}

function move_slider_to_current(id){
	
	if(!document.getElementById('XImg'+id)) return;
	
	var h = parseInt(document.getElementById('XImg'+id).style.height);
	var p = parseInt(panel.style.left);
	if((h==current_image_height) || (xMove<0 && p>target_slider_pos) || (xMove>0 && p<target_slider_pos)){
		animate_images(current_image_id, 0.5);
		panel.style.left = target_slider_pos+'px';
		sliding = false;
		return;
	}
	
	sliding = true;
	move_slider(true,xMove);
	setTimeout('move_slider_to_current('+id+')',speed);
}

function start_move(){
	start = true;
	return false;
}

function stop_move(){
	start = false;
	return false;
}

function mouseUp(){
	start = false;
}

//Mouse Wheel Event
function hookEvent(element, eventName, callback){
	if(typeof(element) == "string") element = document.getElementById(element);
	if(element == null) return;
	if(element.addEventListener){
		if(eventName == 'mousewheel') element.addEventListener('DOMMouseScroll', callback, false);  
		element.addEventListener(eventName, callback, false);
	}
	else if(element.attachEvent) element.attachEvent("on" + eventName, callback);
}

function cancelEvent(e){
	e = e ? e : window.event;
	if(e.stopPropagation) e.stopPropagation();
	if(e.preventDefault) e.preventDefault();
	e.cancelBubble = true;
	e.cancel = true;
	e.returnValue = false;
	return false;
}

function handleWheel(e){
	e = e ? e : window.event;
	var delta = e.detail ? e.detail : e.wheelDelta;
	if (parseInt(delta) < 0) slide_arrow('left');
	else if (parseInt(delta) > 0) slide_arrow('right');
	cancelEvent(e);
}

hookEvent('SliderOverlay', 'mousewheel', handleWheel);
//End Mouse Wheel Event

function debug(value){
	document.getElementById('Debug').innerHTML = value;
}

document.write('<div style="position:fixed;top:0px;left:0px;" id="Debug"></div>');