/*
* notes:
* you have to seht width during create udn move
* ie won't scale proportional otherwise if the
* img element was added to the document
*/
function Covers(position, elementId) {
this.covers = new Array();
this.count = 0;
this.front = 0;
this.state = null; // flow | focus | pageTurn
this.animating = false;
this.control = null;
this.controlFlowL = null;
this.controlFlowR = null;
this.controlPage = null;
this.controlPageTurn = null;
this.moving = null;
this._created = false;
/*
* Bind click events
*/
this.bindEvents = function() {
if ('flow' == this.state) {
for (var i = 0, maxI = this.count; i < maxI; ++i) {
this.covers[i].unbind('click');
this.covers[i].css('cursor', 'move');
if (this.front > i) {
this.covers[i].bind('click', function() { covers.move('left'); });
} else if (this.front < i) {
this.covers[i].bind('click', function() { covers.move('right'); });
} else {
var id = this.covers[i].attr('id');
this.covers[i].css('cursor', 'pointer');
this.covers[i].bind('click', function() { covers.focus(); myContents.load(id); window.location.hash = _revueString + id.replace('cover_',''); });
}
}
}
if ('focus' == this.state) {
var id = this.covers[this.front].attr('id');
this.covers[this.front].unbind('click').bind('click', function() { covers.pageTurn(); });
}
};
/*
* MOVE
*/
this.move = function(direction, distance) {
distance = 1;
if ( ('flow' == this.state) && (!this.animating) ) {
this.animating = true;
/* JS ANIMATION */
/*
*
*/
if ('left' == direction) {
for (i = 0; i < distance; ++i) {
var temp = this.covers.pop();
this.covers.unshift(temp);
/* 8 covers workaround */
//1 2 3 4 5
//5 1 2 3 4
/*var temp = this.covers[0];
this.covers[0] = this.covers[8];
this.covers[8] = temp;*/
/* end of 8 covers workaround */
}
}
/*
*
*/
if ('right' == direction) {
for (i = 0; i < distance; ++i) {
var temp = this.covers.shift();
this.covers.push(temp);
/* 8 covers workaround */
//1 2 3 4 5
//2 3 4 5 1
/*var temp = this.covers[8];
this.covers[8] = this.covers[7];
this.covers[7] = temp;*/
/* end of 8 covers workaround */
}
}
//0 1 2 3 4 5 6 7 8
//1 2 3 4 5 6 7 8 0
// 0 8
/*
1 5 LEFT 5 4 RIGHT 2 1
2 4 1 3 3 5
3 2 4
*/
$.each( this.covers, function(index, value) {
var left = config.offsetPx[index] + "px";
var top = (config.topOffset[index] + config.topMargin) + "px";
var height = config.itemSizesPx[index][1];
var width = config.itemSizesPx[index][0];
/* 8 covers workaround */
/*if ( (direction == 'right') && (index == 7) ) {
value.animate( { left : left, top: top, height: height, width: width }, 0, 'easeInOutCubic');
} else if ( (direction == 'left') && (index == 0) ) {
setTimeout(function() {
value.animate( { left : left, top: top, height: height, width: width }, 0, 'easeInOutCubic');
},1000 * config.timeRotate[distance-1])
} else {
value.animate( { left : left, top: top, height: height, width: width }, 1000 * config.timeRotate[distance-1], 'easeInOutCubic');
}*/
/* end of 8 covers workaround */
value.animate( { left : left, top: top, height: height, width: width }, 1000 * config.timeRotate[distance-1], 'easeInOutCubic');
setTimeout( function() { value.css('z-index', config.zIndex[index]); }, 500 * config.timeRotate[distance-1] );
});
/* END OF JS ANIMATION */
var selfObj = this;
setTimeout(function() { selfObj.animating = false; }, 1000 * distance * config.timeRotate[distance-1] + 100);
this.bindEvents();
}
};
/*
* FOCUS
*/
this.focus = function(direction, distance) {
if (!this.animating) {
this.animating = true;
// JS ANIMATION
if ('focus' != this.state) {
this.state = 'focus';
var left = 0;
//this.control.fadeTo(200, 0.0); TODO next lines
$('#coversControlFLowContainer_l').fadeTo(200, 0.0);
$('#coversControlFLowContainer_r').fadeTo(200, 0.0);
var selfObj = this; // TODO NUR EINMAL FÜR DIESE FUNKTION GLOBAL
setTimeout( function() { selfObj.controlPageTurn.fadeIn(400); } , config.timeFocus[0] * 1000);
setTimeout( function() { selfObj.controlPage.fadeIn(400); } , config.timeFocus[0] * 1000);
$.each( this.covers , function(index, value) {
value.animate( { left : config.offsetFocusPx[0], opacity: (selfObj.front != index ? 0 : 1) }, 1000 * config.timeFocus[0], 'easeInOutCubic');
});
} else {
this.state = 'flow';
$('#coversControlFLowContainer_l').fadeTo(200, 0.5);
$('#coversControlFLowContainer_r').fadeTo(200, 0.5);
this.controlPageTurn.hide();
this.controlPage.hide();
$.each( this.covers , function(index, value) {
value.animate( { left : config.offsetPx[index], opacity: 1 }, 1000 * config.timeFocus[0]);
});
window.location.hash = '';
}
// END OF JS ANIMATION
var selfObj = this;
setTimeout(function() { selfObj.animating = false; }, 1000 * config.timeFocus[0] + 100);
this.bindEvents();
}
};
this.showFront = function() {
this.covers[this.front].show();
};
this.hideFront = function() {
this.covers[this.front].hide();
};
this.fadeInFront = function() {
this.covers[this.front].fadeIn(300);
};
this.fadeOutFront = function() {
this.covers[this.front].fadeOut(300);
};
this.fadeControl = function(control, direction, fade) {
var time = 400;
if ('left' == direction) {
switch(control) {
case 'flow' : if ('in' == fade) this.controlFlowL.fadeTo(time,1.0); else this.controlFlowL.fadeTo(time, 0.5);
break;
}
}
if ('right' == direction) {
switch(control) {
case 'flow' : if ('in' == fade) this.controlFlowR.fadeTo(time, 1.0); else this.controlFlowR.fadeTo(time, 0.5);
break;
}
}
};
/*
*
*/
this.pageTurn = function() {
if (!this.animating) {
this.animating = true;
if ('pageTurn' != this.state) {
this.state = 'pageTurn';
this.controlPageTurn.hide();
this.controlPage.hide();
this.covers[this.front].animate( { left : (config.offsetTurnPagePx) + 'px' }, 1000 * config.timeFocus[0], 'easeOutCubic', function() {
pageTurn.load(covers.covers[covers.front].attr('id'), true);
});
myContents.fadeOut();
//var selfObj = this;
//setTimeout(function() { selfObj.fadeOutFront(); }, 1000 * config.timeFocus[0]);
} else {
this.state = 'focus';
this.showFront();
this.covers[this.front].animate( { left : (config.offsetFocusPx) + 'px' }, 1000 * config.timeFocus[0], 'easeInOutCubic');
var selfObj = this;
setTimeout( function() { selfObj.controlPageTurn.fadeIn(400); } , config.timeFocus[0] * 1000);
setTimeout( function() { selfObj.controlPage.fadeIn(400); } , config.timeFocus[0] * 1000);
}
var selfObj = this;
setTimeout(function() { selfObj.animating = false; }, 1000 * config.timeFocus[0] + 100);
}
};
/*
* INITIALISATION
* --------------------------------------------------------------------------------------------------------------
*/
this.create = function(front) {
if ( !this._created ) {
this.count = 9;
this.front = Math.floor( this.count / 2 );
for (var i = 0, maxI = coverData.ids.length; i < maxI; ++i) {
//var cover = $('![]()
').addClass("cover").attr('id', 'cover_' + (i+1) ).attr('alt', coverData.altTag[i]).attr('src', 'content/' + coverData.ids[i] + '/cover.jpg');
//var cover = $('').addClass("cover").attr('id', 'cover_' + (i+1) );
var cover = $('
').addClass("cover").attr('id', 'cover_' + coverData.ids[i] );
if (!checkBrowserName('IE')) {
cover.css('background', 'url(content/' + coverData.ids[i] + '/cover.jpg) top left no-repeat');
cover.css('background-size', '100% 100%');
cover.css('-moz-background-size', '100% 100%');
cover.css('-webkit-background-size', '100% 100%');
} else {
cover.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\'content/' + coverData.ids[i] + '/cover.jpg\', sizingMethod=\'scale\' )' );
}
this.covers.push(cover);
cover = null;
}
/* 8 covers workaround */
/*var cover = $('').addClass("cover hidden").attr('id', 'cover_dummy' );
if (!checkBrowserName('IE')) {
cover.css('background', 'url(content/' + coverData.ids[0] + '/cover.jpg) top left no-repeat');
cover.css('background-size', '100% 100%');
cover.css('-moz-background-size', '100% 100%');
cover.css('-webkit-background-size', '100% 100%');
} else {
cover.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\'content/' + coverData.ids[0] + '/cover.jpg\', sizingMethod=\'scale\' )' );
}
this.covers.push(cover);
cover = null;*/
/* end of 8 covers workaround */
if (front) {
for (var i = 0, maxI = this.covers.length; i < maxI ;++i) {
if (this.covers[this.front].attr('id').substr(6) == front) {
break;
}
var temp = this.covers.pop();
this.covers.unshift(temp);
}
}
for (var i = 0, maxI = this.covers.length; i < maxI; ++i) {
var cover = this.covers[i];
cover.css('width', config.itemSizesPx[i][0]);
cover.css('height', config.itemSizesPx[i][1]);
cover.css('left', config.offsetPx[i]).css('top', config.topOffset[i] + config.topMargin);
cover.css('z-index', config.zIndex[i]);
canvas.canvas.append(this.covers[i]);
}
this.bindEvents();
}
this._created = true;
};
/*
* INITIALISATION
* --------------------------------------------------------------------------------------------------------------
*/
/*
* TODO TEXT
*/
this.init = function() {
this.state = 'flow';
this.control = $('#canvasControl');
this.controlFlowL = $('#coversControlFLow_l');
this.controlFlowR = $('#coversControlFLow_r');
this.controlPageTurn = $('#coversControlPageTurn');
this.controlPage = $('#coverControl');
this.controlFlowL.css('opacity', 0.5);
this.controlFlowR.css('opacity', 0.5);
var selfObj = this;
$('#coversControlFLowContainer_l').hover(
function () { selfObj.fadeControl('flow', 'left', 'in'); selfObj.moving = setInterval( function () { selfObj.move('left') }, config.timeRotate[0] + 200); },
function () { selfObj.fadeControl('flow', 'left', 'out'); clearInterval(selfObj.moving); }
);
$('#coversControlFLowContainer_r').hover(
function () { selfObj.fadeControl('flow', 'right', 'in'); selfObj.moving = setInterval( function () { selfObj.move('right') }, config.timeRotate[0] + 200); },
function () { selfObj.fadeControl('flow', 'right', 'out'); clearInterval(selfObj.moving); }
);
this.controlPageTurn.bind('click', function() { covers.pageTurn(); });
};
this.init();
}