$(document).ready(function()
{
  $('body .motive').pdMotiveRotator({ 
    rowTimeOut: 7000,
    annotList: annList,
    titleList: titList,
    imageList: imgList,
    linkList: hrefList
  });
});

(function($){
    
    $.fn.pdMotiveRotator = function(options)
        {
            /* OPTION */
            var o = $.extend({
                rowTimeOut: 3000,
                imageList: [],
                titleList: [],
                annotList: [],
                linkList:[],
                random: true
            }, options);
            
            /* HELP RULES */
            var time = null;
            var element = $(this);
            $(element).addClass('js-motive').append('<div class="help"></div>');
            $('.help', element).hide();
            var paging = '';
            var pagingBox = $('.paging-row p', this);
            var arrayLength = Math.max(o.imageList.length, o.titleList.length, o.annotList.length, o.linkList.length)
            var counter = 0;
            if( o.random == true)
                {
                    var actualNum = Math.round(Math.random()*(arrayLength-1));
                }
            else
                {
                    var actualNum = 0;    
                }

            /* CREATE PAGING */
            for(var i=0; i < arrayLength; i++){
                paging = paging + '<a href="#" class="dot"><span class="out">'+ (i+1) +'.</span></a>';
            }
            paging = '<a class="prev" href="#"><span class="out">&larr;</span></a><span class="item">' + paging + '</span><a class="next" href="#"><span class="out">&rarr;</span></a>';
            $(pagingBox).append(paging);
            
            /* ITEM */
            var actualUnit = function(){
                $('.item a', pagingBox).removeClass('active').css('cursor', 'pointer');
                $('.item a:eq('+actualNum+')', pagingBox).addClass('active').css('cursor', 'default');                    
            };
            actualUnit();
            
            /* ROTATE DATA */
            var rotateData = function(){
                var imgTmp = document.createElement('img');
                $(imgTmp).bind('load', function(){
                    if($.browser.msie && $.browser.version == '6.0'){
                            $(this).css('background-image', 'url('+ o.imageList[actualNum].file +')').show();
                            $(element).css('background-image', 'url('+ o.imageList[actualNum].file +')');
                            $('.title', element).empty().text(o.titleList[actualNum]);
                            $('.annot', element).empty().text(o.annotList[actualNum]);
                            $('a.link', element).attr('href', o.linkList[actualNum]);
                    }
                    else{
                        if (counter > 0){
                            $('.help', element).css('background-image', 'url('+ o.imageList[actualNum].file +')').fadeIn(500, function(){
                                $(element).css('background-image', 'url('+ o.imageList[actualNum].file +')');
                                $('.title', element).empty().text(o.titleList[actualNum]);
                                $('.annot', element).empty().text(o.annotList[actualNum]);
                                $('a.link', element).attr('href', o.linkList[actualNum]);
                            });
                        }
                        else{
                            $(element).css('background-image', 'url('+ o.imageList[actualNum].file +')');
                            $(this).hide();
                            $('.title', element).empty().text(o.titleList[actualNum]);
                            $('.annot', element).empty().text(o.annotList[actualNum]);
                            $('a.link', element).attr('href', o.linkList[actualNum]);
                        }
                    }
                    counter++;
                }).attr('src', o.imageList[actualNum].file)
                
            }
            rotateData();
            
            var clickUnit = function(el){
                time = clearTimeout(time);
                $('.help', element).hide();
                actualNum = $('.item a', pagingBox).index(el);
                rotateData();
                actualUnit();
                time = setTimeout(function(){rotate()}, o.rowTimeOut);
            }
            
            /* ROTATE */
            var rotate = function(){
                $('.help', element).hide();
                if( actualNum < arrayLength -1 ){
                    actualNum++;
                }
                else{
                    actualNum  = 0;  
                }
                rotateData();
                actualUnit();
                time = setTimeout(function(){rotate()}, o.rowTimeOut);
            }
            
             /* NEXT and PREV */
            $('a.next, a.prev', pagingBox).bind('click', function(){
                time = clearTimeout(time);
                $('.help', element).hide();
                if( actualNum < arrayLength -1 && $(this).is('.next') == true){  actualNum++;  }
                else if( actualNum == arrayLength -1 && $(this).is('.next') == true){  actualNum  = 0;  }
                else if( actualNum > 0 && $(this).is('.prev') == true){  actualNum--;  }
                else if( actualNum == 0 && $(this).is('.prev') == true){  actualNum  = arrayLength -1;  }
                rotateData();
                actualUnit();
                time = setTimeout(function(){rotate()}, o.rowTimeOut);
                return false;
            });
            
            /* UNIT CLICK */
            $('.item a', pagingBox).bind('click', function(){clickUnit($(this)); return false;});
            

            time = setTimeout(function(){rotate()}, o.rowTimeOut);  
	   };
})(jQuery);