/*
 * Animation Type:
 *  - Image for setting background style property
 *  - Text for setting innerHTML
 */
var AnimationType = { Image:1,Text:2 };
	


/*
 * Annimation class
 *  - use it whenever you need fadding funcionality
 */
var AnimationClass = Class.create({
	initialize: function(cImage, data, type)
	{
		this.obj = $(cImage);
		this.data = data;
		this.type = type;
		if(this.obj && this.data!=null && this.data.length>1)
			this.init();
	},
	
	init: function(){
		this.currentIndex = 0;
		this.cloneEl = new Element("div",{"class":this.obj.className,width:this.obj.getWidth(),height:this.obj.getHeight()});			
		this.cloneEl.zIndex = parseInt(this.obj.getStyle("zIndex"))+1;
		this.cloneEl.hide();
		this.obj.parentNode.appendChild(this.cloneEl);
		
		this.setData(this.data[0],this.obj);
		this.setData(this.data[1],this.cloneEl);
	},
	
	setData: function(val,el){
		var elToSetData = el || (this.cloneEl.style.display!="none" ? this.obj : this.cloneEl);			
		if(this.type==AnimationType.Image)
			elToSetData.style.background="url("+val+")";
		else{				
			elToSetData.update(val);
		}
		if(el==null){
			this.cloneEl[this.cloneEl.style.display!="none"?"fade":"appear"]({ duration: 2.5 });
			if(this.type==AnimationType.Text) this.obj[this.cloneEl.style.display!="none"?"appear":"fade"]({ duration: 2.5 });
		}
	},
	
	next: function(){
		console.log("Item:%s next", this.obj.className);

		this.currentIndex++;
		if(this.currentIndex>=this.data.length) this.currentIndex=0;
		this.setData(this.data[this.currentIndex]);
	},
	
	previous: function(){
		console.log("Item:%s previous", this.obj.className);

		this.currentIndex--;
		if(this.currentIndex<0) this.currentIndex=this.data.length-1;
		this.setData(this.data[this.currentIndex]);
	},
	
	goTo: function(num){
		console.log("Item:%s goTo[%s]", this.obj.className,num);

		if(num>=0 && num < this.data.length) this.currentIndex=num;			
		this.setData(this.data[this.currentIndex]);
	},
	
	registerEvent: function(name){
		console.log("Item:%s registeringEvent:%s", this.obj.className, name);
		document.observe(name, this.onChange.bind(this));
	},
	
	onChange: function(){
		console.log("Item:%s onChange:next", this.obj.className);
		
		this.next();
	}
});



/*
 * SimpleAnimation control
 *  - use it whenever you need to fade images
 */
var SimpleAnimation = Class.create((function(){
	var eventPrefix = "simpleanimation:";
	var obj,list,intervalId,animObj,delay,isImage;
	
	var constructor = function(o,l,d){
		obj = $(o);
		list = l;
		delay = d*1000;
		if(obj && list.length>0){ 
			isImage = (animObj=obj.select(".image")[0])!=null;
			if(isImage) init();
		}
	}
	
	var init = function(){
		if(isImage) animObj = new AnimationClass(animObj, list, AnimationType.Image);
		animObj.registerEvent(eventPrefix+"change");
	}
	
	var start = function(){
		stop();
		intervalId = setInterval(onChange,delay);
	};
	
	var stop = function(){
		clearInterval(onChange,delay);
	};
	
	var onChange = function(){ document.fire(eventPrefix+"change"); };

	return {
		initialize:constructor,
		start:start
	}
}()));



/*
 * Animation control
 *  - use it whenever you need items of fadding images with some navigation options
 */
var Animation = Class.create((function() {
    var eventPrefix = "animationcontrol:";
    var items = [];
    var obj, list, settings,
	imageIndex,
	validAction,
	intervalId, autoStartIntervalId,
	cImage, cTitle, cDescription, cNavigation, cLinkbox,
	isImage, isTitle, isDescription, isNavigation, isLinkbox,
	pageLinks;

    var constructor = function(o, l, s) {
        obj = $(o);
        list = l;
        settings = Object.extend({ prev: true, next: true, goTo: true, pause: true, prevText: "<", nextText: ">", pauseText: "||" }, (s || {}));

        if (obj && list.length > 0) {
            isImage = (cImage = obj.select(".image")[0]) != null;
            isTitle = (cTitle = obj.select(".title")[0]) != null;
            isDescription = (cDescription = obj.select(".description")[0]) != null;
            isNavigation = (cNavigation = obj.select(".navigation")[0]) != null;
            isLinkbox = (cLinkbox = obj.select(".link")[0]) != null;
            if (isImage || isTitle || isDescription) init();
            // TODO preloadImages();
        }
    }

    var init = function() {
        validAction = true;
        imageIndex = 0;
        if (isImage) items.push(new AnimationClass(cImage, list.pluck("img"), AnimationType.Image));
        if (isTitle) items.push(new AnimationClass(cTitle, list.pluck("title"), AnimationType.Text));
        if (isDescription) items.push(new AnimationClass(cDescription, list.pluck("description"), AnimationType.Text));
        if (isNavigation) {
            renderNavigation();
            bindNavigation();
        }

        // Only for belvin
        if (isLinkbox) {
            var linkData = [];
            for (var i = 0, l = list.length; i < l; i++) {
                var tar = "";
                if (list[i]["target"] != null && list[i]["target"] != "") tar = 'target="' + list[i]["target"] + '"';
                //var linkHtml = '<a href="'+list[i]["href"]+'" title="'+list[i]["hrefTitle"]+'">'+list[i]["hrefTitle"]+'</a>';
                var linkHtml = '<a ' + tar + '" href="' + list[i]["href"] + '" title="' + list[i]["hrefTitle"] + '"></a>'; // pchand specifika
                linkData.push(linkHtml);
                console.log(linkHtml);
            }
            items.push(new AnimationClass(cLinkbox, linkData, AnimationType.Text));
        }
        // End

        items.invoke("registerEvent", eventPrefix + "change");
    }

    var renderNavigation = function() {
        if (cNavigation.innerHTML != "") return;
        var html = "";

        if (settings.goTo) for (var i = 0, l = list.length; i < l; i++)
            html += '<a href="#" title="" class="goTo">' + (i + 1) + '</a>';
        if (settings.prev) html += '<a href="#" title="" class="prev">' + settings.prevText + '</a>';
        if (settings.pause) html += '<a href="#" title="" class="pause">' + settings.pauseText + '</a>';
        if (settings.next) html += '<a href="#" title="" class="next">' + settings.nextText + '</a>';

        cNavigation.update(html);
    };

    var bindNavigation = function() {
        cNavigation.down(".prev").observe("click", function(ev) {
            ev.stop();
            previous();
        });

        cNavigation.down(".pause").observe("click", function(ev) {
            ev.stop();
            pause();
        });

        cNavigation.down(".next").observe("click", function(ev) {
            ev.stop();
            next();
        });

        pageLinks = cNavigation.select(".goTo");
        for (var i = 0, l = pageLinks.length; i < l; i++) {
            pageLinks[i].observe("click", function(ev) {
                ev.stop();
                var el = ev.findElement("a");
                goTo(ev.element(), parseInt(el.innerHTML));
            });
        }
    };

    var selectPage = function(indx) {
        pageLinks.invoke("removeClassName", "selected");
        pageLinks[indx].addClassName("selected");
    }

    var start = function() {
        stop();
        intervalId = setInterval(onChange, 7000);
        validAction = true;
    };

    var stop = function() {
        validAction = false;
        clearTimeout(autoStartIntervalId);
        clearInterval(intervalId);
        intervalId = null;
    };

    var next = function() {
        if (validAction) {
            stop();
            imageIndex++;
            if (imageIndex >= pageLinks.length) imageIndex = 0;
            selectPage(imageIndex);
            autoStartIntervalId = setTimeout(start, 2600);
            items.invoke("next");
        }
    };

    var previous = function() {
        if (validAction) {
            stop();
            imageIndex--;
            if (imageIndex < 0) imageIndex = pageLinks.length - 1;
            selectPage(imageIndex);
            autoStartIntervalId = setTimeout(start, 2600);
            items.invoke("previous");
        }
    };

    var goTo = function(el, indx) {
        console.log("Test:%s", items[0].currentIndex);
        if (validAction) {
            stop();
            imageIndex = indx - 1;
            selectPage(imageIndex);
            autoStartIntervalId = setTimeout(start, 2600);
            items.invoke("goTo", indx - 1);
        }
    };

    var pause = function() {
        if (intervalId == null) start();
        else stop();
    };

    var onChange = function() {
        imageIndex++;
        if (imageIndex >= pageLinks.length) imageIndex = 0;
        selectPage(imageIndex);
        console.log("[onChange] - Next image: %s", imageIndex);
        document.fire(eventPrefix + "change");
    };

    return {
        initialize: constructor,
        start: start,
        next: next,
        previous: previous,
        goTo: goTo,
        pause: pause
    }
} ()));