var video_carousel = {
    container: null,
    list: null,
    items: [],
    animating: null,
    si: null,
    update_interval: 30,
    scroller_width: 0,
    target_offset: 0,
    current_offset: 0,
    move_offset: 20,
    item_width: 96,
    slides_no: 0,
    current_slide: 0,

    init: function(container_id) {
        this.container = document.getElementById(container_id);
        if(!this.container) return;
        this.container_id = container_id;

        $(this.container).addClass('loaded');
        this.list = $('#video-gallery-scroller ul')[0];

        var wrap_div = document.createElement('div');
            wrap_div.setAttribute('id', container_id + '-items');

        wrap_div.appendChild(this.list);
        this.container.appendChild(wrap_div);

        if(this.container_id == 'video-gallery-scroller') {
            this.carousel_width = 601;
        }

        this.items = $('#video-gallery-scroller ul li')

        this.slides_no = Math.floor(this.items.length/15);
        if(this.items.length % 15 != 0) {
            this.slides_no++;
        }
        this.list.style.width = this.slides_no * this.carousel_width +'px';
        this.list.style.height = '276px';

        if(this.slides_no < 2) return;

        this.createControls();
    },


   createControls: function() {
        //if($(this.container).select('.controls')[0]) return;

        var ul = document.createElement('ul');
            ul.className = 'controls';

        var prev_li = document.createElement('li');
            prev_li.className = 'prev';

        var prev_a = document.createElement('a');
            prev_a.className = 'prev';
            prev_a.setAttribute('href', '#');
            prev_a.innerHTML = "nazad"

        var prev_img = document.createElement('img');
            prev_img.setAttribute('alt', 'Natrag');
            prev_img.setAttribute('title', 'Natrag');

            if(this.container_id == 'video-gallery-scroller') {
                prev_img.setAttribute('src', '/design/mojportal3/images/strelica-week-prev.gif');
            }

         //   prev_a.appendChild(prev_img);

            prev_li.appendChild(prev_a);
            ul.appendChild(prev_li);

        var next_li = document.createElement('li');
            next_li.className = 'next';

        var next_a = document.createElement('a');
            next_a.className = 'next';
            next_a.setAttribute('href', '#');
            next_a.innerHTML = "naprijed"

        var next_img = document.createElement('img');
            next_img.setAttribute('alt', 'Naprijed');
            next_img.setAttribute('title', 'Naprijed');

            if(this.container_id == 'video-gallery-scroller') {
                next_img.setAttribute('src', '/design/mojportal3/images/strelica-week-next.gif');
            }

            //next_a.appendChild(next_img);
            next_li.appendChild(next_a);
            ul.appendChild(next_li);

            this.container.appendChild(ul);

        //Event.observe(prev_a, 'click', this.clickListener.bindAsEventListener(this), false);
        //Event.observe(next_a, 'click', this.clickListener.bindAsEventListener(this), false);

        $(prev_a).bind('click', this.clickListener);
        $(next_a).bind('click', this.clickListener);

   },


   clickListener: function(e) {
        if(window.event) {
            window.event.returnValue = false;
        } else {
            e.preventDefault();
        }

        var event = window.event ? window.event : e;
        var eventTarget = event.srcElement ? event.srcElement :  event.target;
        if(eventTarget.nodeName.toLowerCase() == 'img') {
            eventTarget = eventTarget.parentNode;
        }

        var direction = eventTarget.parentNode.className;

        if(!this.animating) {
            video_carousel.prepareScrolling(direction);
        }
   },

   prepareScrolling: function(direction) {

        if(direction == 'next') {

            var requested_slide = this.current_slide + 1;
            if(requested_slide < this.slides_no) {
                this.target_offset = (this.current_slide+1) * this.carousel_width;
                this.initMoving();
                this.current_slide++;
            }

        } else {

            var requested_slide = this.current_slide - 1;
            if(requested_slide >= 0) {
                this.target_offset = (this.current_slide-1) * this.carousel_width;
                this.initMoving();
                this.current_slide--;
            }
        }


   },

   initMoving: function() {
         this.animating = true;
         var o = this;
         this.si = setInterval( function() { o.moveCalculation();}, this.update_interval);
   },

   moveCalculation: function () {
        var diff = this.target_offset - this.current_offset;

        if(diff > 0) {
            var step = this.move_offset;
            if(diff < this.move_offset) {
                step = diff;
            }
        } else {
            var step = -this.move_offset;
            if(diff > step) {
                step = diff;
            }
        }

        if(step == 0) {
            clearInterval(this.si);
            this.animating = false;
        }

        this.current_offset += step;
        this.moveItems(step);

   },

   moveItems: function(current_step) {

        var item_to_move = this.list;
        if( item_to_move.style.left ) {
            var new_offset = parseInt(item_to_move.style.left) - current_step + 'px';
        } else {
            var new_offset = - current_step + 'px';
        }
        item_to_move.style.left = new_offset;
        item_to_move.style.position = 'relative';

        /*
        var il = this.items.length;
        for( var i = 0 ; i < il; i++ ) {
            var item_to_move = this.items[i];
            if( item_to_move.style.left ) {
                var new_offset = parseInt(item_to_move.style.left) - current_step + 'px';
            } else {
                var new_offset = - current_step + 'px';
            }
            item_to_move.style.left = new_offset;
            item_to_move.style.position = 'relative';
        }*/
   }

}