﻿
var isIE = /MSIE/.test(navigator.userAgent);
	
function TopSlider(_container, _data)
{
	var SCENE_WIDTH = 962;
	var container = document.getElementById(_container);
	var data = _data;
	var currentIndex = 0;
	var currentPosition = 0;
	var scenes = [];
	var leftBtn;
	var rightBtn;
	var interval;
	
	function initialize()
	{
		for (var i = 0, ln = data.length; i < ln; i++)
		{
			var item = data[i];
			var pos_x = SCENE_WIDTH * i;
			
			if (item.href) 
			{
				var a = createElement("a", { href : item.href, "class" : "image" }, { left : pos_x + "px" });
			}
			else
			{
				var a = createElement("span", { "class" : "image" }, { left : pos_x + "px" });
			}
			
			var img = createElement("img", { src : item.src });
			
			a.appendChild(img);
			container.appendChild(a);
			
			var ob = {
				element : a,
				basePosition : pos_x
			};
			
			scenes.push(ob);
		}
		
		leftBtn = createElement("a", { href : "javascript:void(0)", "class" : "arrowBtn" }, { left : "2px" });
		var leftImg = createElement("img", { src : "images/left_btn.gif" });
		leftBtn.appendChild(leftImg);
		rightBtn = createElement("a", { href : "javascript:void(0)", "class" : "arrowBtn" }, { left : "918px" });
		var rightImg = createElement("img", { src : "images/right_btn.gif" });
		rightBtn.appendChild(rightImg);
		
		leftBtn.onclick = function()
		{
			slide(-1);
		};
		
		rightBtn.onclick = function()
		{
			slide(1);
		};
		
		container.appendChild(leftBtn);
		container.appendChild(rightBtn);
	}
	
	function slide(add_n)
	{
		var next = currentIndex + add_n;
		var ln = data.length - 1;
		//if (next < 0) next = ln;
		//if (next > ln) next = 0;
		
		currentIndex = next;
		
		var end_pos = -currentIndex * SCENE_WIDTH;
		var sa = 0;
		var tmp;
		var pos;
		var curr_pos;
		var str = "";
		var ln = scenes.length;
		
		for (var i = 0; i < ln; i++)
		{
			var element = scenes[i].element;
			var style = element.currentStyle || document.defaultView.getComputedStyle(element, '');
			var y = scenes[i].basePosition;//parseInt(style["left"]);
			
			if (add_n < 0)
			{
				if ((y + currentPosition) > SCENE_WIDTH)
				{
					y -= SCENE_WIDTH * ln;
					scenes[i].basePosition = y;
				}
			}
			else
			{
				if ((y + currentPosition) < -SCENE_WIDTH)
				{
					y += SCENE_WIDTH * ln;
					scenes[i].basePosition = y;
				}
			}
			
			str += y + ",";
		}
		
		/*if (currentPosition > 10000)
		{
			str = "";
			var diff = SCENE_WIDTH * ln;
			currentPosition -= diff;
			
			for (var i = 0; i < ln; i++)
			{
				scenes[i].basePosition += diff;
				str += scenes[i].basePosition + ",";
			}
		}
		
		console.log(str);
		console.log("*********");
		console.log(currentPosition);*/
		
		clearInterval(interval);
		interval = setInterval(function()
		{
			sa += 0.015;
			currentPosition += tmp = (end_pos - currentPosition) * sa;
			curr_pos = Math.round(currentPosition);
			
			for (var i = 0, ln = scenes.length; i < ln; i++)
			{
				var ob = scenes[i];
				pos = curr_pos + ob.basePosition;
				ob.element.style.left = pos + "px";
			}
			
			if (Math.abs(tmp) < 0.04)
			{
				currentPosition = end_pos;
				curr_pos = Math.round(currentPosition);
				clearInterval(interval);
				for (var i = 0, ln = scenes.length; i < ln; i++)
				{
					var ob = scenes[i];
					pos = curr_pos + ob.basePosition;
					ob.element.style.left = pos + "px";
				}
			}
		}, 25);
	}
	
	initialize();
}

function createElement(tag, attr, styles, innerText)
{
	var elm = document.createElement(tag);
			
	for (var str in attr) 
	{
		if (str == "class" && isIE)
		{
			elm.setAttribute("class", attr[str]);
			elm.setAttribute("className", attr[str]);
		}
		else
		{
			elm.setAttribute(str, attr[str]);
		}
	}
	
	var selm = elm.style;
	
	for (var style in styles)
	{
		selm[style] = styles[style];
	}
	
	if (innerText != undefined) 
	{
		elm.innerHTML = innerText;
	}
	
	return elm;
}


