/// <reference path="/Script/jquery-1.4.1-vsdoc.js"/>
var scrollPaneId = 0;

(function ($) {
    $.fn.scrollPane = function (setting, events) {
        var ps = $.extend({
            renderTo: false,
            isSliderShow: true,
            isMainSlider: true,
            isAutoMoveMain : true,
            autoMoveMainTime : 3,
            isAutoShowComplete : true,
            scrollPaneClassName: 'jquery-scrollpane',
            scrollPaneContentClassName: 'jquery-scrollpane-content',
            scrollPaneSliderClassName: 'jquery-scrollpane-slider',
            scrollPaneSliderBackClassName : 'jquery-scrollpane-slider-back',
            buttonLeft: true,
            buttonLeftClassName: 'jquery-scrollpane-button-left',
            buttonRight: true,
            buttonRightClassName: 'jquery-scrollpane-button-right',
            buttonSliderClassName: 'jquery-scrollpane-button-slider',
            buttonSliderWidthAuto: true
        }, setting);
        ps.renderTo = (ps.renderTo == false) ? this.parent() : ((typeof ps.renderTo == 'string') ? $(ps.renderTo) : ps.renderTo);
        ps.renderTo.css('overflow-x', 'hidden').css('position', 'relative');

        var es = $.extend({
            start : function(){},
            change: function(){},
            stop : function(){}
        }, events);

        var self = this;
        documentObj = $(document);
        body = $('body');

        self.css('position', 'absolute')
        	.css('white-space', 'nowrap')
            .css('left', 0)
            .css('overlow-y', 'hidden')
        	.children().css('display', 'inline')
            .first().css('margin-left', 0);
        self.children().last().css('margin-right', 0);

        $('img', self).height( pxToNumber(self.css('height')) );

        this.scrollPaneId = ++scrollPaneId;
        this.sliderMouseDown = false;
        this.slider = function (obj) {
            var sliderMouseX = 0;
            var sliderLeft = 0;
            var sliderType = obj.width() > obj.parent().width() ? 'l' : 'r';
            var selfSlider = this;

            obj.mousedown(function(e){
                self.sliderMouseDown = true;
                sliderMouseX = e.clientX;
                body.css("cursor", "e-resize");
                obj.css("cursor", "e-resize");
                sliderLeft = pxToNumber( obj.css('left') );
                es.start(e, self);

                documentObj.mousemove(function (e) {
                    if(self.sliderMouseDown){
	                    var left = e.clientX - sliderMouseX + sliderLeft;
	                    if(sliderType == 'l'){
		                    if (left > 0) {left = 0;
		                    } else if (obj.width() + left < obj.parent().width()) {left = obj.parent().width() - obj.width();}
	                    }else{
		                    if (left < 0) {left = 0;
		                    } else if (obj.width() + left > obj.parent().width()) {left = obj.parent().width() - obj.width();}
	                    }
	                    obj.css('left', left);
	                    self.moveDiv(obj);
	                    es.change(e, self);
                    }
                    return false;
                }).mouseup(function (e) {
                    if(self.sliderMouseDown){
	                    self.sliderMouseDown = false;
	                    body.css('cursor', '');
	                    obj.css('cursor', 'pointer');
	                    es.stop(e, self);
	                    documentObj.unbind('mousemove').unbind('mouseup');
	                    if(ps.isAutoShowComplete){
		                    self.showComplete();
	                    }
                        if(ps.isAutoMoveMain){
                            if(self.autoMoveMainPause == false){
                                self.autoMoveMainPause = true;
                                setTimeout(function(){
                                    self.autoMoveMainPause = false;
                                }, ps.autoMoveMainTime * 1000);
                            }
                        }
                    }
                    return false;
                });
                return false;
            });
        };
        this.autoShowComplateStart = false;
        this.showComplete = function(){
            if(self.sliderMouseDown || self.autoShowComplateStart || self.autoMoveMainStart){return;}
            var left = -(pxToNumber(self.css('left')));
            var k = self.getNow();
            if(mainWidthMap[k] == left) return;
            var now = mainWidthMap[k] - mainWidthMap[k-1];
            left < Number(mainWidthMap[k-1]) + Number(now / 2) ? --k : k;
            var c = self.isOut(mainWidthMap[k]);
            self.animate({left : -c}, 200, function(){
                self.moveDiv(self);
                self.autoShowComplateStart = false;
            });
        };
        this.autoMoveMainStart = false;
        this.autoMoveMainPause = false;
        this.autoMoveMainType = 'right';
        this.autoMoveMain = function(){
            if(self.sliderMouseDown || self.autoShowComplateStart || self.autoMoveMainStart || self.autoMoveMainPause){
            	return;
            }
            self.autoMoveMainStart = true;
            var k = self.getNow();
            self.autoMoveMainType == 'right' ? k++ : k--;
            var c = self.isOut(mainWidthMap[k]);
            if(mainWidthMap[k] < 1){
                self.autoMoveMainType = 'right';
            }else if( c < mainWidthMap[k]){
                self.autoMoveMainType = 'left';
            }
            self.animate({left:-c}, 500, function(){
                self.autoMoveMainStart = false;
                self.moveDiv(self);
            });
        }

        if (ps.isSliderShow) {
            var spDiv = $('<div />');
            spDiv.attr('id', 'scrollPane-' + this.scrollPaneId)
                .attr('class', ps.scrollPaneClassName)
                .css('width', this.parent().css('width'))
                .appendTo(ps.renderTo);
            if (ps.buttonLeft) {
                var leftDiv = $('<a />');
                leftDiv.attr('id', 'scrollPaneLeft-' + this.scrollPaneId)
                    .text('<')
                    .addClass(ps.buttonLeftClassName)
                    .css('cursor', 'pointer')
                    .appendTo(spDiv);
            }
            if (ps.buttonRight) {
                var rightDiv = $('<a />');
                rightDiv.attr('id', 'scrollPaneRight-' + this.scrollPaneId)
                    .text('>')
                    .addClass(ps.buttonRightClassName)
                    .css('cursor', 'pointer')
                    .css('text-align', 'right')
                    .appendTo(spDiv);
            }
            var contentDiv = $('<div />');
            contentDiv.attr('id', 'scrollPaneContent-' + this.scrollPaneId)
                .addClass(ps.scrollPaneContentClassName)
                .css('position', 'relative')
                .css('width',
                	spDiv.width() - (ps.buttonLeft ? leftDiv.width() * 2  : 0) - (ps.buttonRight ? rightDiv.width() * 2 : 0) 
                	- pxToNumber(contentDiv.css('border-left-width')) 
                	- pxToNumber(contentDiv.css('border-right-width'))
                );
            if (ps.buttonLeft) {
                leftDiv.after(contentDiv);
            } else {
                contentDiv.appendTo(spDiv);
            }
            spDiv.css('margin-top', self.height() + 0);
            spDiv.children().css('float', 'left');

            var sliderDiv = $('<div />');
            sliderDiv.attr('id', 'scrollPaneSlider-' + this.scrollPaneId)
                .addClass(ps.scrollPaneSliderClassName)
                .css('width', 20)
                .css('position', 'absolute')
                .css('cursor', 'pointer')
                .css('left', 0)
                .appendTo(contentDiv);
            var sliderBack = $('<div />');
            	sliderBack.attr('id', 'scrollPaneSliderBack-' + this.scrollPaneId)
            	.addClass(ps.scrollPaneSliderBackClassName)
            	.appendTo(contentDiv);

            var p = self.parent().width() / self.width();

            if (ps.buttonSliderWidthAuto) {
                var buttonSliderWidthAutoId = setInterval(function () {
                    p = self.parent().width() / self.width();
                    p = p > 1 ? 1 : p;
                    var width = contentDiv.width() * p;
                    width = width < 20 ? 20 : width;
                    sliderDiv.width(width);
                }, 100);
            }
            self.slider(sliderDiv);
        }
        this.moveDiv = function (now) {
            var move = now == sliderDiv ? self : sliderDiv;
            move.stop();
            move.css(
                'left', -(pxToNumber(now.css('left')) / ( now.parent().width() - now.width()*2 ) * ( move.width() - move.parent().width()*2 ) )
            );
        }

        this.getNow = function(){
            var left = -pxToNumber(self.css('left'));
            for(var k in mainWidthMap){
                if(mainWidthMap[k] >= left-1){break;}
            }
            return k;
        }
        this.isOut = function(c){
        	return c < 10 ? 0 : (c > self.width() - self.parent().width() ? self.width() - self.parent().width() : c);
        }
        
        if(ps.isAutoShowComplete || ps.isAutoMoveMain){
        	var mainWidthMap = new Array;
            var mainWidthMapTimeId = setInterval(function(){
                var tmp = new Array;
                self.children().each(function(){
                    tmp.push( ($(this).position().left ).toFixed(2) );
                });
                if(mainWidthMap.toString() == tmp.toString()){
                    //clearInterval(mainWidthMapTimeId);
                }else{
                    mainWidthMap = tmp;
                }
            }, 1000);
        }
        if (ps.isMainSlider) {self.slider(self);}
        
        if(ps.isAutoMoveMain) {
        	var autoMoveMainTimeId = setInterval(function(){
                self.autoMoveMain();
            }, ps.autoMoveMainTime * 1000);
            spDiv.mouseover(function(){
            	self.autoMoveMainPause = true;
            }).mouseout(function(){
            	setTimeout(function(){
            		self.autoMoveMainPause = false;
            	}, ps.autoMoveMainTime * 1000); 
            });
            self.mouseover(function(){
                self.autoMoveMainPause = true;
            }).mouseout(function(){
                setTimeout(function(){
            		self.autoMoveMainPause = false;
            	}, ps.autoMoveMainTime * 1000); 
            });
        };
        if (ps.isSliderShow){
            sliderDiv.click(function(){return false;});
            contentDiv.click(function(e){
                var left = e.clientX - contentDiv.offset().left;
                if( left > contentDiv.width() - sliderDiv.width()){left = contentDiv.width() - sliderDiv.width();}
                sliderDiv.css('left', left);
                self.moveDiv(sliderDiv);
                if(ps.isAutoShowComplete){self.showComplete();}
            });
            if(ps.buttonLeft){
	            leftDiv.click(function(){
	                self.autoMoveMainPause = true;
	                if(ps.isAutoShowComplete || ps.isAutoMoveMain){
		                var k = Number( self.getNow() ) - 1;
		                var c = self.isOut(mainWidthMap[k]);
	                }else{
	                	var c = -pxToNumber(self.css('left')) - 200;
	                }
	                self.animate({left:-c}, 500, function(){
	                    self.moveDiv(self);
	                    self.autoMoveMainPause = false;
	                });
	            });
            }
            if(ps.buttonRight){
	            rightDiv.click(function(){
	                self.autoMoveMainPause = true;
	                if(ps.isAutoShowComplete || ps.isAutoMoveMain){
		                var k = Number( self.getNow() ) + 1;
		                var c = self.isOut(mainWidthMap[k]);
	                }else{
	                	var c = -pxToNumber(self.css('left')) + 200;
	                }
	                self.animate({left:-c}, 500, function(){
	                    self.moveDiv(self);
	                    self.autoMoveMainPause = false;
	                });
	            });
            }
        }
    };
})(jQuery);

function pxToNumber(px) {
	if(!px){return 0;}
    px = px.substr(0, (px.length - 2));
    return Number(px);
}