var $numpgs = 22;	//The Total Number of Pages
//var $pgnum = randRange(1,$numpgs); //Starting page number
var $pgnum = 1; //Starting page number
var $pageheight = 400; // the single page height we're using
var $pagewidth = 400;
var $imgpath = '/resources/images/pages/';
var $imgprefix = 'pg';//to be added
var $imgext = 'jpg';//to be added
var $timer = 2000;

var $htimer = $timer/2;
var $ttimer = $timer/3;
var $qtimer = $timer/4;
var $tqtimer = $htimer+$qtimer;

//Set Left page Numbers
	var $lbpgnum = $pgnum-2;
	var $lcpgnum = $pgnum;
	var $lapgnum = $pgnum+2;

//Set Right page Numbers
	var $rbpgnum = $pgnum-1;
	var $rcpgnum = $pgnum+1;
	var $rapgnum = $pgnum+3;


var $use = false;


function randRange(from,to) {
	return Math.floor((to-(from-1))*Math.random()) + from;
}


function buildImagePath(num) {
	var path  = '';

	path += $imgpath;
	path += $imgprefix;
	path +=  num;
	path += '.' + $imgext;

	//console.log(path);

	return path;
};


function buildImageSrc(num, className, id) {
	var path = '<img src="' + buildImagePath(num) + '"';

	path += ' class="' + className + '"';
	if ($defined(id)) {
		path += ' id="' + id + '"';
	}
	path += ' width="' + $pagewidth + '"';
	path += ' height="' + $pageheight + '" />';

	//console.log(path);

	return path;
};


function buildBGImageURL(num, repeat) {
	var path = 'url(' + buildImagePath(num);

	path += ') no-repeat top ' + repeat;

	//console.log(path);

	return path;
};




window.addEvent('domready', function(){ //Start Dom Ready
	//Start morph
	Fx.Morph = Fx.Styles.extend({
		start: function(className){
			var to = {};
			$each(document.styleSheets, function(style){
				var rules = style.rules || style.cssRules;
				$each(rules, function(rule){
					if (!rule.selectorText.test('\.' + className + '$')) return;
					Fx.CSS.Styles.each(function(style){
						if (!rule.style || !rule.style[style]) return;
						var ruleStyle = rule.style[style];
						to[style] = (style.test(/color/i) && ruleStyle.test(/^rgb/)) ? ruleStyle.rgbToHex() : ruleStyle;
					});
				});
			});
			return this.parent(to);
		}

	});

	Fx.CSS.Styles = ["width", "height", "opacity", "right", "top", "left"];

	//Select items by ID
	var lpgbefore=$('lpgbefore');
	var lpgcurrent=$('lpgcurrent');
	var rpgbefore=$('rpgbefore');
	var lpgafter=$('lpgafter');
	var rpgcurrent=$('rpgcurrent');
	var flip=$('flip');
	var morpher=$('morpher');
	var rightpage=$('rightpage');
	var leftpage=$('leftpage');
	var lpgimg=$('lpgimg');
	var lpgfront=$('lpgfront');
	var rpgfront=$('rpgfront');
	var rpgback=$('rpgback');
	var lpgback=$('lpgback');
	var rfxflip=$('rfxflip');
	var lfxflip=$('lfxflip');
	var action=$('action');
	var rlink='Right page link.';
	var llink='Left page link.';
	//Effects

	var rightpg =$('rightpg');
	var leftpg =$('leftpg');

	var lpActl = new Fx.Morph('rpgfront', {wait: false, duration: $timer, transition: Fx.Transitions.Sine.easeIn});
	var rpActl = new Fx.Morph('lpgback', {wait: false, duration: $timer, transition: Fx.Transitions.Sine.easeIn});
	var fxflipl = new Fx.Morph('lfxflip', {wait: false, duration: $timer, transition: Fx.Transitions.Sine.easeIn});

	var lpActr = new Fx.Morph('lpgfront', {wait: false, duration: $timer, transition: Fx.Transitions.Sine.easeIn});
	var rpActr = new Fx.Morph('rpgback', {wait: false, duration: $timer, transition: Fx.Transitions.Sine.easeIn});
	var fxflipr = new Fx.Morph('rfxflip', {wait: false, duration: $timer, transition: Fx.Transitions.Sine.easeIn});

	var lfx = lpgcurrent.effects({duration: $ttimer, transition: Fx.Transitions.Quart.easeOut});
	var rfx = rpgcurrent.effects({duration: $ttimer, transition: Fx.Transitions.Quart.easeOut});
	var afx = action.effects({duration: $ttimer, transition: Fx.Transitions.Back.easeOut});//action fx

	rpgback.setStyles({'width': 0, 'background': buildBGImageURL($rapgnum, 'right')});
	lpgfront.setStyles({'width': 0, 'background': buildBGImageURL($lapgnum, 'left')});

	$('rightpg').addEvent('click', function(e){
		new Event(e).stop();
		//if ($pgnum<=$numpgs && $use==false) {
		if ($pgnum+2<=$numpgs) {
			$use=true;
			$pgnum = $pgnum+2;
			if (morpher) {
				morpher.setHTML($pgnum);
			}

			if ($pgnum-1>0) {
				$rbpgnum = $pgnum-1
			}else{
				$rbpgnum ='blank'
			};

			if ($pgnum-2>0) {
				$lbpgnum = $pgnum-2
			}else{
				$lbpgnum ='blank'
			};


			if ($pgnum+1<=$numpgs) {
				$rcpgnum = $pgnum+1;
			}else{
				$rcpgnum ='blank'
			};

			if ($pgnum<=$numpgs) {
				$lcpgnum = $pgnum;
			}else{
				$lcpgnum ='blank'
			};


			if ($pgnum+3<=$numpgs) {
				$rapgnum = $pgnum+3;
			}else{
				$rapgnum ='blank'
			};

			if ($pgnum+2<=$numpgs) {
				$lapgnum = $pgnum+2;
			}else{
				$lapgnum ='blank'
			};


			leftpg.setStyle('z-index', 151);
			rightpg.setStyle('z-index', 151);
			flip.setStyle('z-index', 151);
			action.setStyle('right', '20px');
			rpgFx.delay($tqtimer, rlink);
			fxflipr.start('morphfullr');
			lpActr.start('morphr');
			rpActr.start('morphr').chain(function() {
				(function(){ $use=false; leftpg.setStyle('z-index', 161); rightpg.setStyle('z-index', 161); flip.setStyle('z-index', 161); }).delay($qtimer);
			});

			rightpg.addClass('rightHand');
			leftpg.addClass('leftHand');
		};

		if ($pgnum+2 >= $numpgs) {
			rightpg.removeClass('rightHand');
		}
	});


	$('leftpg').addEvent('click', function(e){
		new Event(e).stop();
		//if ($pgnum>=0 && $use==false) {

		if ($pgnum>1) {
			$use=true;
			$pgnum = $pgnum-2;
			if (morpher) {
				morpher.setHTML($pgnum);
			}

			if ($pgnum+3<=$numpgs) {
				$rapgnum = $pgnum+3;
			}else{
				$rapgnum ='blank'
			};

			if ($pgnum+2<=$numpgs) {
				$lapgnum = $pgnum+2;
			}else{
				$lapgnum ='blank'
			};

			if ($pgnum-1>0) {
				$rbpgnum = $pgnum-1
			}else{
				$rbpgnum ='blank'
			};

			if ($pgnum-2>0) {
				$lbpgnum = $pgnum-2
			}else{
				$lbpgnum ='blank'
			};


			if ($pgnum+1>0) {
				$rcpgnum = $pgnum+1;
			}else{
				$rcpgnum ='blank'
			};

			if ($pgnum>0) {
				$lcpgnum = $pgnum;
			}else{
				$lcpgnum ='blank'
			};

			leftpg.setStyle('z-index', 151);

			rightpg.setStyle('z-index', 151);
			flip.setStyle('z-index', 151);
			action.setStyle('right', '40px');
			lpgFx.delay($tqtimer, llink);
			fxflipl.start('morphfulll');
			lpActl.start('morphl');
			rpActl.start('morphl').chain(function() {
				(function(){$use=false; leftpg.setStyle('z-index', 161); rightpg.setStyle('z-index', 161); flip.setStyle('z-index', 161); }).delay($qtimer);
			});

			rightpg.addClass('rightHand');
			leftpg.addClass('leftHand');
		};

		if ($pgnum<=1) {
			leftpg.removeClass('leftHand');
		}
	});


	var rpgFx = function() {
		rpgcurrent.setHTML(buildImageSrc($rcpgnum, 'rpgimgs'));
		rpgbefore.setHTML(buildImageSrc($rapgnum, 'rpgimgs'));

		lfx.start({'right': '10px'});

		//Move Action Div to away from right 30
		afx.start({'right': '30px'}).chain(function() {
			rfxflip.setStyle('width', 0);

			rpgback.setStyles({'width': 0, 'background': buildBGImageURL($rapgnum, 'right')});
			lpgfront.setStyles({'width': 0, 'background': buildBGImageURL($lapgnum, 'left')});
			lpgback.setStyles({'width': 0, 'background': buildBGImageURL($lbpgnum, 'left')});
			rpgfront.setStyles({'width': 0, 'background': buildBGImageURL($rbpgnum, 'right')});

			lpgbefore.setHTML();
			lpgbefore.setStyles({'right': '10px', 'width': $pagewidth, 'background': buildBGImageURL($lbpgnum, 'left')});
			lpgcurrent.setHTML(buildImageSrc($lcpgnum, 'lpgimgs', 'lpgimg'));
			lpgcurrent.setStyle('right', '0px');
		});
	};


	var lpgFx = function() {
		lpgcurrent.setHTML(buildImageSrc($lcpgnum, 'lpgimgs'));
		lpgbefore.setHTML(buildImageSrc($lbpgnum, 'lpgimgs'));

		rfx.start({'left': '10px'});

		//Move Action Div to away from right 30
		afx.start({'right': '30px'}).chain(function() {
			lfxflip.setStyle('width', 0);

			rpgback.setStyles({'width': 0, 'background': buildBGImageURL($rapgnum, 'right')});
			lpgfront.setStyles({'width': 0, 'background': buildBGImageURL($lapgnum, 'left')});
			lpgback.setStyles({'width': 0, 'background': buildBGImageURL($lbpgnum, 'left')});
			rpgfront.setStyles({'width': 0, 'background': buildBGImageURL($rbpgnum, 'right')});

			rpgbefore.setHTML();
			rpgbefore.setStyles({'left': '10px', 'width': $pagewidth, 'background': buildBGImageURL($rapgnum, 'right')});
			rpgcurrent.setHTML(buildImageSrc($rcpgnum, 'rpgimgs', 'rpgimg'));
			rpgcurrent.setStyle('left', '0px');
		});
	};
	//End Dom Ready
});