/*
	optional
	{
		//	Da li da prikazuje brojeve unutar menija
		hideMenuText: null | true | false	
		//	Delay između tranzicije
		delay: number (ms),
		//	Auto start (default false)
		autoStart: null | true | false
	}
*/
function htmlBanner(slideId, menuId, optional) {
    var objSlide = document.getElementById(slideId);
    var objMenu = document.getElementById(menuId);
	var opt = optional || {};
    //	Inicijalizacija pomaknuta na dno	*/

    this.initialize = function() {
    	for (var i = 0; i < this.slides.length; ++i) {
    		this.slides[i].itemPos = "slide-" + i.toString();
    		this.slides[i].style.position = "absolute";
    		this.slides[i].style.zIndex = 10;

    		this.slides[i].style.left = -(Number(this.slides[0].offsetWidth) * i) + "px";

    		this.menuItems[i].idCount = "menu-" + i.toString();
    		this.menuItems[i].onclick = this.menuClick;
    		this.menuItems[i].onmouseover = this.menuOver;
    		this.menuItems[i].onmouseout = this.menuOut;

    		this.menuItems[i].slideId = slideId + "-slide";
    		this.slides[i].slideId = slideId + "-slide";

    		if (i == this.currentItem) {
    			this.menuItems[i].className = "active";
    		} else {
    			this.menuItems[i].className = "inActive";
    		}
    	}
    };



    this.slideNext = function(objSlide) {

    	if (typeof (objSlide) == "undefined") {
    		objSlide = this;
    	}
    	clearTimeout(objSlide.delayTimerId);
    	objSlide.delayTimerId = null;
    	if (objSlide.blocked) {
    		objSlide.startSlideCountDown();
    	}

    	if (objSlide.menuItems.length == 0 || objSlide.nextItem >= objSlide.menuItems.length || objSlide.nextItem < 0) {
    		return;
    	}
    	objSlide.menuItems[objSlide.currentItem].className = "inActive";
    	objSlide.menuItems[objSlide.nextItem].className = "active";
    	objSlide.blocked = true;
    	//  Smjer kretanja animatora
    	if (objSlide.currentItem > objSlide.nextItem) {
    		var a = new Animator(0,
                                Number(objSlide.slides[0].offsetWidth),
                                this.slides[objSlide.currentItem],
                                this.slides[objSlide.nextItem]);
    	} else {
    		var a = new Animator(0,
                                -Number(objSlide.slides[0].offsetWidth),
                                objSlide.slides[objSlide.currentItem],
                                objSlide.slides[objSlide.nextItem]);
    	}

    	objSlide.currentItem = objSlide.nextItem;
    	++objSlide.nextItem;
    	if (objSlide.nextItem >= objSlide.slides.length) {
    		objSlide.nextItem = 0;
    	}
    	objSlide.startSlideCountDown();
    };

    this.startSlideCountDown = function() {
    	if (!this.slides || this.slides.length == 0) {
    		return;
    	}

    	var objSlide = this;
    	this.delayTimerId = setTimeout(function() { objSlide.slideNext(objSlide) }, objSlide.delay);
    };

    this.menuClick = function() {

    	if (window[this.slideId].blocked || Number(this.idCount.replace("menu-", "")) == window[this.slideId].currentItem) {
    		return;
    	}
    	if (window[this.slideId].delayTimerId != null) {
    		clearTimeout(window[this.slideId].delayTimerId);
    		window[this.slideId].delayTimerId = setTimeout(function() { window[this.slideId].slideNext(window[this.slideId]) }, window[this.slideId].delay);
    	}
    	window[this.slideId].nextItem = Number(this.idCount.replace("menu-", ""));
    	window[this.slideId].slideNext(window[this.slideId]);
    };

    this.slideNextPrev = function(dir, id, caller) {
		this.slideId = id || this.slideId;
    	var nextItemId = window[this.slideId].currentItem + Number(dir);
    	if (window[this.slideId].blocked || nextItemId >= this.slides.length || nextItemId < 0) {
    		return;
    	}
    	if (window[this.slideId].delayTimerId != null) {
    		clearTimeout(window[this.slideId].delayTimerId);
    		window[this.slideId].delayTimerId = setTimeout(function() { window[this.slideId].slideNext(window[this.slideId]) }, window[this.slideId].delay);
    	}
    	window[this.slideId].nextItem = nextItemId;
    	window[this.slideId].slideNext(window[this.slideId]);
    };
	
	this.objSlideNextPrev = function(dir) {
		if(dir<0){
    		this.nextItem = this.currentItem - 1;
			if(this.nextItem<0){
				this.nextItem = 0;
				return;
			}
		}
		if(this.nextItem>=this.menuItems.length){
			return;
		}
		this.slideNext(this.slideId);
    };

    this.menuOver = function() {
    	var id = Number(this.idCount.replace("menu-", ""));
    	window[this.slideId].menuItems[id].className += " hover";
    	//alert(window[this.slideId].menuItems[id].className)
    	if (id == window[this.slideId].currentItem) {
    		return;
    	}
    };
    this.menuOut = function() {
    	var id = Number(this.idCount.replace("menu-", ""));
    	window[this.slideId].menuItems[id].className = window[this.slideId].menuItems[id].className.replace(" hover", "");
    	if (id == window[this.slideId].currentItem) {
    		return;
    	}
    	window[this.slideId].menuItems[id].className = window[this.slideId].menuItems[id].className.replace(" menuHover", "");
    };
    
    
    
    if(!objSlide||!objMenu){
        return;
    };
    window[slideId + "-slide"] = this;
    
    this.slides = null;
    this.menuItems = null;
    this.currentItem = 0;
    this.nextItem = 1;
	if(opt.delay!=null){
    	this.delay = opt.delay;
	}else{
		this.delay = 12000;
	}
	
    this.delayTimerId = null;
    
    this.blocked = false;

    this.slides = objSlide.getElementsByTagName("li");

    for (var i = 0; i < this.slides.length; i++) {
    	var s = document.createElement("span");
    	if(opt.hideMenuText!=true){
			s.innerHTML = (i+1).toString();
		}
    	var l = document.createElement("li");
    	l.appendChild(s);
    	objMenu.appendChild(l);
    }
    
    this.menuItems = objMenu.getElementsByTagName("li");
    if(this.slides.length == 0 || this.menuItems.length == 0 || this.slides.length > this.menuItems.length ){
        return;
    }
    
    this.initialize();
	if(opt.autoStart==true){
		this.startSlideCountDown();
	}
   }





function Animator(from, to, obj1, obj2){
	this.points = {
		// moving a box "from" and "to", eg. on the X coordinate
		'from': from,
		'to': to
	};
    this.speed = 20;
    this.delayTimerId = null;
    window.animator = this;
    
    this.obj1 = obj1;
    this.obj2 = obj2;
    
    this.animDelta = (this.points.to - this.points.from); // how far to move
    // animation curve: "sum of numbers" (=100%), slow-fast-slow
    this.tweenAmount = [1,3,5,7,9,10,10,10,10,10,9,7,5,3,1,];
    this.currentFrame = 0;
    // move from X to Y over frames as defined by tween curve
    this.frameCount = this.tweenAmount.length;
    this.frames = []; // array of coordinates we'll compute
    this.newFrame = this.points.from; // starting coordinate
    
    
    for (var i=0; i<this.frameCount; i++) {
       // calculate the points to animate
       this.newFrame += (this.animDelta * (this.tweenAmount[i]/100));
       this.frames[i] = this.newFrame;
    }
    this.frames[this.frameCount-1] = this.points.to;
    
	doAnim(this);

};

function doAnim(animator) {
	animator.obj1.style.left = Math.ceil(animator.frames[animator.currentFrame]) + "px";

	animator.obj2.style.zIndex = 100;
	animator.obj1.style.zIndex = 100;

	if (animator.points.to < animator.points.from) {
		animator.obj2.style.left = Number(animator.obj1.offsetWidth) + Math.ceil(animator.frames[animator.currentFrame]) + "px";
	} else {
		animator.obj2.style.left = Math.ceil(animator.frames[animator.currentFrame]) - Number(animator.obj1.offsetWidth) + "px";
	}
	animator.currentFrame++;

	if (animator.currentFrame >= animator.frameCount) {
		animator.currentFrame = 0;
		clearTimeout(animator.delayTimerId);
		animator.delayTimerId = null;
		window[animator.obj1.slideId].blocked = false;
	} else {
		animator.delayTimerId = setTimeout(function() { doAnim(animator) }, animator.speed);
	}
};