geekworld.co

PROJECT = (function( cmax )
{
var me = project.threeSixty = project.threeSixty|| {};

var _totalImage = 174;
var _imageArray=[];

var _rotateLeft; // anticlockwise
var _rotateRight; // clockwise

var _imageContainer;

var _currentImage=0;
var _previousX;
var _currentX;

var _canRotate;

var _rotateTimer;

me.init = function() {
$$( '#Gallery .galleryVideoPlayer' ).addClass( 'loading' );
me.setImageArray();

// create control buttons
_rotateRight = $$( '#Gallery .three-sixtyControl a.right' );
_rotateLeft = $$( '#Gallery .three-sixtyControl a.left' );

_imageContainer = $( 'PROJECT360' );

// bind the control buttons
_rotateRight.addEvent('mousedown', moveRight);
_rotateLeft.addEvent('mousedown', moveLeft);

_rotateRight.addEvent('mouseup', stopRotate);
_rotateLeft.addEvent('mouseup', stopRotate);

// bind event to the actual image - going to
_imageContainer.addEvent('mousedown', startDrag);
_imageContainer.addEvent('mouseup', stopRotate);
_imageContainer.addEvent('mouseout', stopRotate);

// and a key listner
this.addEvent('keydown', startMove);
this.addEvent('keyup', stopMove);
}

me.setImageArray = function() {
// remembering that Paul started the image array from 1 not 0!
for (i=1; i<=_totalImage; i++){
var iString = i;
if (i<10){
iString = '00'+i;
}else if (i<100 && i>=10){
iString='0'+i;
}
var imageString = 'content/images/360/image_360 001 '+iString+'.jpg';
_imageArray.push(imageString);
}
loadImages();
}

loadImages = function(){
for (i=0; i<_imageArray.length; i++){
$$( '#image-load-holder' ).set('src', _imageArray[i]);
}
}

moveRight = function(e){
_canRotate = true;
rotateRight();
}

moveLeft = function(e){
_canRotate = true;
rotateLeft();
}

rotateLeft = function(){
if (_currentImage ==0)
_currentImage = _totalImage-1;
else
_currentImage --;
updateImage();
if (_canRotate)
_rotateTimer = rotateLeft.delay(100);
}

rotateRight = function()
{
if (_currentImage ==_totalImage-1)
_currentImage = 0;
else
_currentImage ++;
updateImage();
if (_canRotate)
_rotateTimer = rotateRight.delay(100);
}

updateImage = function(){
var image = _imageArray[_currentImage];
$$( '#CMAX360 img' ).set('src', image);
}

startDrag = function(e){
e.preventDefault();
_currentX = [e.page.x];
// watch the mouse
_previousX = _currentX;
_imageContainer.addEvent('mousemove', dragging);
}

dragging = function(e){
_currentX = [e.page.x];
if (_currentX != _previousX)
{
// either moving left or right!
if (_currentX > _previousX)
rotateLeft();
else
rotateRight();
_previousX = _currentX;
}
}

stopRotate = function(e){
e.preventDefault();
_rotateTimer = $clear(_rotateTimer);
_imageContainer.removeEvent('mousemove', dragging);
_canRotate = false;
}

startMove = function(e){
// listen for left and right arrows
if(e.key == "right"){
rotateRight();
}
else{
if(e.key== "left"){
rotateLeft();
}
}
}

stopMove = function(e)
{
//alert("keyup")
}

window.addEvent( 'domready', me.init );

return project;

})( window.PROJECT || {} );