var lastPictureNumber = 0
var currentScroller = null

function scrollToPicture(pictureNumber){
    var duration = Math.abs(pictureNumber - lastPictureNumber) * 1.4
    duration = Math.max(duration, 1)
    //duration = Math.min(duration, 17)
    
    //duration = 17
    
    var id = 'picture' + pictureNumber.toString()
    var picture = MochiKit.DOM.getElement(id)
    if (!picture) return
    
    //var offset = 0 - (picture.width - 800) / 2
    
    var offset = 0 - ((800 - picture.width) / 2)
    
    if (currentScroller){
        currentScroller.cancel()
    }
    
    currentScroller = new HorizontalScrollTo2(picture, {duration:duration, offset: offset, parent:'scrollBox'})
    lastPictureNumber = pictureNumber
}

function scrollRelative(movement){
    scrollToPicture(lastPictureNumber + movement)
}

var cloudSteps = 80
var widthOfEachCloudStrip = 2
var startingWidthOfEachCloudStrip = 10
    



function init(){
   //buildLeftCloud(0,20) 
   //buildRightCloud(0,20)
   
   window.moveTo(0,0); 
   window.resizeTo(screen.availWidth,screen.availHeight);
   
   // put rollovers on all the dots
   var dots = getElementsByTagAndClassName("*","dot")
   
   var currentlySelected = dots[0]
   var currentIndex = 0
   
   for (var i=0;i<dots.length;i++){
       var dot = dots[i]
       dot.onmouseover = function(){
		    this.originalSource = this.src
		   	switch (this.src.split('/').pop()) {
			    case 'right.gif' :
				    this.src = 'images/right-over.gif'
				break;
				case 'left.gif' :
				    this.src = 'images/left-over.gif'
				break;
			}
		   	
		}
       dot.onmouseout = function(){
		   this.src = this.originalSource 
		}
	
	   
	
	   var f = function(index){
		   return function(){
			    scrollToPicture(index + 1)
				var el = dots[index]
				for (var j=0;j<dots.length;j++){
					if (j < index){
						dots[j].src = 'images/left.gif'
					} else if (j == index) {
						dots[j].src = 'images/small-logo.gif'
						dots[j].originalSource = dots[j].src
					} else {
						dots[j].src = 'images/right.gif'
					}
						
					
				}
				
		   }
	   }
	
	   dot.onclick = f(i)
   }
   
   //scrollToPicture(1)
   
   // appear and fade the whole dots bit on mouse over
   /*
   var divDots = document.getElementById('divDots')
   divDots.onmouseover = function(){
       appear(divDots, {'from':parseFloat(divDots.style.opacity),'to':0.6})
   }
   
   divDots.onmouseout = function(){
       appear(divDots, {'from':parseFloat(divDots.style.opacity),'to':0})
   }
   */
   
}

addLoadEvent(init)


/** @id HorizontalScrollTo2
 * 
 * Like HorizontalScrollTo, but also works for divs which use overflow-x:scrolling,
 * or overflow:auto. A new required option is 'parent' which is a reference to
 * the div which has the scroll bars
 * 
 * TODO : do thorough QA on Safari, Chrome and IE
 * 
 * @param {Object} element
 * @param {Object} options
 **/
HorizontalScrollTo2 = function (element, options) {
    var cls = arguments.callee;
    if (!(this instanceof cls)) {
        return new cls(element, options);
    }
    this.__init__(element, options);
};

HorizontalScrollTo2.prototype = new MochiKit.Visual.Base();

MochiKit.Base.update(HorizontalScrollTo2.prototype, {
    /***
    Scroll horizontally to an element in the page
    ***/

    __class__ : MochiKit.Visual.HorizontalScrollTo,

    __init__: function (element, /* optional */options) {
        this.element = MochiKit.DOM.getElement(element);
        this.parent = MochiKit.DOM.getElement(options.parent);
        this.start(options);
    },

    /** @id MochiKit.Visual.ScrollTo.prototype.setup */
    setup: function () {
        var p = MochiKit.Position;
        //p.prepare();
        
        var parentOffset = p.cumulativeOffset(this.parent)
        var elementOffset = p.cumulativeOffset(this.element)
        var deltaX = elementOffset.x - parentOffset.x
        var deltaY = elementOffset.y - parentOffset.y
        
        // offsets represent the difference between the element and the parent
        offsets = new MochiKit.Style.Coordinates(deltaX, deltaY);
        
        if (this.options.offset) {
            offsets.x += this.options.offset;
        }
        var max;
        
        /*
        if (window.innerWidth) {
            max = window.innerWidth - window.width;
        } else if (document.documentElement &&
                   document.documentElement.clientWidth) {
            max = document.documentElement.clientWidth -
                  document.body.scrollWidth;
        } else if (document.body) {
            max = document.body.clientWidth - document.body.scrollWidth;
        }
        */
        
        max = this.parent.scrollWidth - this.parent.clientWidth;
        
        //this.scrollStart = p.windowOffset.x;
        this.scrollStart = this.parent.scrollLeft
        
        this.delta = (offsets.x > max ? max : offsets.x) - this.scrollStart;
        
        
        var a = 12
    },

    /** @id MochiKit.Visual.ScrollTo.prototype.update */
    update: function (position) {
        //var p = MochiKit.Position;
        //p.prepare();
        this.parent.scrollLeft = this.scrollStart + (position * this.delta)
        //window.scrollTo(this.scrollStart + (position * this.delta), p.windowOffset.y);
    }
});