var thumb_boxsize = 95;
var fb_totalheight = 460; // matches the same exact value as #flipbook_box
var fb_vsheight = 358; // WHAT IS THE HEIGHT?
var fb_vswidth = 458;
var testimg;
var thumbsarray = new Array();
var fp_maxpos;
var clickedstate = "smallimg_1";
var clickedindex = 1; //this is the index value of the item selected
var fb_scrollbarx;
var boolean_scrollmouseactive = false;
var mousey;
var timeouts = new Array();
var miniscrollratio;
var fb_playstatus = true;
function resizeimage(obj){
	var objwidth = testimg.width;
	var objheight = testimg.height;
/*	var objwidth = document.getElementById(obj).width;
	var objheight = document.getElementById(obj).height;*/
	var scalevalue = 1;
/*	
//	alert("obj width:"+objwidth+" | screen width: "+fb_vswidth+" | obj height:"+objheight+" | screen height:"+fb_vsheight);
	if ((objwidth < fb_vswidth) && (objheight < fb_vsheight)){
//		alert("object is smaller!");
		// object is smaller than the screen, find which side is bigger, and then scale that side according to the larger side
		if (objwidth < objheight){
			// height is smaller, scale to the width..
//			alert("object height is smaller, need to scale up width ratio");
		scalevalue = fb_vswidth/objwidth;
		} else {
			// width is smaller, scale to the height..
//			alert("object width is smaller, need to scale up height ratio");
		scalevalue = fb_vsheight/objheight;
		}
	} else if ((objwidth < fb_vswidth) && (objheight > fb_vsheight)){
		// height is bigger, so we need to reduce it from the height side..
//		alert("object height is bigger, reducing height..!");
		scalevalue = fb_vsheight/objheight;
	
	} else if ((objwidth > fb_vswidth) && (objheight < fb_vsheight)){
		// width is larger, so we need to reduce it from the width side..
//		alert("object width is bigger, reducing width!");
		scalevalue = fb_vswidth/objwidth;
	} else {
//		alert("object is larger!");
		// this option indicates that the image is larger both height and width, we need to reduce it
		if (objwidth < objheight){
			// height is smaller, scale down to the height..
//		alert("object height is larger, need to reduce by height!");
		scalevalue = fb_vsheight/objheight;
		} else {
			// width is smaller, scale down to the width..
//		alert("object width is smaller, need to reduce by width!");
		scalevalue = fb_vswidth/objwidth;
		}
	}
//	alert(scalevalue);*/
	if(objwidth < objheight){
		/*
		document.getElementById("flipbook_viewarea").style.width = 358 + "px";
		document.getElementById("flipbook_viewarea").style.height = 458 + "px";
		document.getElementById("flipbook_viewscreen").style.width = 360 + "px";
		document.getElementById("flipbook_viewscreen").style.height = 460 + "px";
		*/
		document.getElementById("flipbook_viewarea").className = "area_tall";
		document.getElementById("flipbook_viewscreen").className = "screen_tall";
		document.getElementById("flipbook_article_win").style.top = 490 + "px";
		document.getElementById("flipbook_scrollbarcomponent").style.top = 532 + "px";
		document.getElementById("CNTR_flipbook").style.height = 680 + "px";
		
	}
	else{
		document.getElementById("flipbook_viewarea").className = "area_wide";
		document.getElementById("flipbook_viewscreen").className = "screen_wide";
		document.getElementById("flipbook_article_win").style.top = 390 + "px";
		document.getElementById("flipbook_scrollbarcomponent").style.top = 432 + "px";
		document.getElementById("CNTR_flipbook").style.height = 580 + "px";
	}

	document.getElementById(obj).width = parseInt(objwidth*scalevalue);
	document.getElementById(obj).height = parseInt(objheight*scalevalue);
	document.getElementById(obj).style.left = parseInt((fb_vswidth-objwidth*scalevalue)/2)+"px";
	document.getElementById(obj).style.top = parseInt((fb_vsheight-objheight*scalevalue)/2)+"px";
}
function resizetodimensions(id,newheight,newwidth){
	var theimage = new Image();
	alert(id);
	var tobj = document.getElementById(id);
	var thumburl = tobj.src; //this is the url of the main image the thumb
	if (thumburl == "") {thumburl = "blank"}
	theimage.src = thumburl;
	thumbsarray.push(theimage);
	var objwidth = theimage.width;
	var objheight = theimage.height;
	var scalevalue;
	if ((objwidth < newwidth) && (objheight < newheight)){
		if (objwidth < objheight){
		scalevalue = newwidth/objwidth;
		} else {
		scalevalue = newheight/objheight;
		}
	} else if ((objwidth < newwidth) && (objheight > newheight)){
		scalevalue = newheight/objheight;
	
	} else if ((objwidth > newwidth) && (objheight < newheight)){
		scalevalue = newwidth/objwidth;
	} else {
		if (objwidth < objheight){
		scalevalue = newheight/objheight;
		} else {
		scalevalue = newwidth/objwidth;
		}
	}
	document.getElementById(id).width = parseInt(objwidth*scalevalue);
	document.getElementById(id).height = parseInt(objheight*scalevalue);
}
function loaddisplayimg(url){
	var theimage = new Image();
	theimage.src = url;
	testimg = theimage;
}
function moveimagetoflipbook_viewarea(id){
	var fb_viewobj = document.getElementById("flipbook_viewarea");
	var fb_htmlobj = document.getElementById("fp_textdmp");

	var idval = id.split("largeimg_");
	var fb_image = document.getElementById(id);
	var fb_text = document.getElementById("associatedtextimg_"+idval[1]);
	fb_viewobj.innerHTML = "";// first thing to do is cleanup, take whatever was in here and dump it in the container
	fb_htmlobj.innerHTML = "";// first thing to do is cleanup, take whatever was in here and dump it in the container
	$(fb_viewobj).fadeIn(750).append($(fb_image).clone());
	$(fb_htmlobj).fadeIn(750).append($(fb_text).clone());
	if ('function' == typeof window.refreshAds) {
	   refreshAds();
	}
	if ('function' == typeof window.adRefresh) {
	   adRefresh();
	}
}
/*
function fb_selprev(fb_y){
	var newindex = clickedindex-fb_y;
	if (newindex > 0) {
		fb_selbyindex(newindex);
		if (Math.abs(currentscrolloffsetvalue) > scrollheightarray[newindex-fb_y]){
			fb_scrollupto(scrollheightarray[newindex-fb_y]);
		}
	}
}

function fb_selnext(fb_y){
	var newindex = clickedindex+fb_y;
	if (newindex < fp_maxpos+fb_y) {
		fb_selbyindex(newindex);
		if (((currentscrolloffsetvalue) < (scrollheightarray[newindex-fb_y]-fb_totalheight+thumb_boxsize)) && (newindex >= 4)){
//		alert("c_offsetval:"+(currentscrolloffsetvalue)+" | is lower than:"+(scrollheightarray[newindex-1]-fb_totalheight+thumb_boxsize));
		fb_scrolldownto((scrollheightarray[newindex-fb_y])+thumb_boxsize+82-fb_y);
		}
	}
}
*/
function fb_selnext(fb_y){
	var newindex = clickedindex+fb_y;
	if (newindex < fp_maxpos+fb_y) {
		fb_selbyindex(newindex);
		if (((currentscrolloffsetvalue) < (scrollheightarray[newindex-fb_y]-fb_totalheight+thumb_boxsize)) && (newindex >= 4)){
//		alert("c_offsetval:"+(currentscrolloffsetvalue)+" | is lower than:"+(scrollheightarray[newindex-1]-fb_totalheight+thumb_boxsize));
		fb_scrolldownto((scrollheightarray[newindex-fb_y])+thumb_boxsize+85-fb_y);
		}
	}
	else {
		fb_selbyindex(1);
		if(newindex > 4) {
		 fb_scrollupto(0);
		}
	}
}

function fb_selprev(fb_y){
	var newindex = clickedindex-fb_y;
	if (newindex > 0) {
		fb_selbyindex(newindex);
		if(newindex == 1) {
			fb_scrollupto(0);
		}
		else if (Math.abs(currentscrolloffsetvalue) > scrollheightarray[newindex-fb_y]){
			fb_scrollupto(scrollheightarray[newindex-fb_y]);
		}
	}
	else {
		fb_selbyindex(fp_maxpos);
		if(fp_maxpos > 4) {
			fb_scrolldownto(scrollheightarray[fp_maxpos-1]+thumb_boxsize+85-fb_y);
		}
	}
}

function fb_fliplargeimg(id){
	loaddisplayimg(document.getElementById(id).src);
	resizeimage(id);
	moveimagetoflipbook_viewarea(id);
}
function fb_selbyindex(numposition){
	var imgid = "largeimg_"+numposition;
	var fb_obj = document.getElementById("smallimg_"+numposition);
	document.getElementById(clickedstate).className = "fb_image_thumb";
	clickedstate = "smallimg_"+numposition;
	clickedindex = numposition;
	fb_obj.className="fb_image_thumb_hover";
	loaddisplayimg(document.getElementById(imgid).src);
	resizeimage(imgid);
	moveimagetoflipbook_viewarea(imgid);
}
var scrollheightarray = new Array();
function flipbookinitialize(){
	var thumbcollection = document.getElementById("fb_thumbspool").getElementsByTagName('img');
	fp_maxpos = parseInt(thumbcollection.length);
	document.getElementById("fb_thumbspool").style.width = parseInt(fp_maxpos * (thumb_boxsize))+"px";
	collectiveheight = 0;
	for (i=1; i <= fp_maxpos; i++) {
		if (i == 1) {
			scrollheightarray.push(collectiveheight);
		} else {
			scrollheightarray.push(collectiveheight = collectiveheight+thumb_boxsize);
		}
//		resizetodimensions("smallimg_"+i,90,90);
	}
	var scrollheight = document.getElementById("fb_thumbspool").offsetWidth;	
	miniscrollheight = (fb_totalheight*fb_totalheight/scrollheight);
	scrollbarlowerlimit = parseInt(fb_totalheight-miniscrollheight);
	miniscrollratio = miniscrollheight/fb_totalheight;
	//document.getElementById("fp_adjustablescrollbar").style.height = parseInt(miniscrollheight)+"px";
	fb_selbyindex(1);
	//fb_play();
}
var miniscrollheight;
var scrollbarlowerlimit;
function thumbover(obj){
	obj.className="fb_image_thumb_hover";
}
function thumbout(obj){
if (clickedstate == obj.id) {return false;}
	obj.className="fb_image_thumb";
}

// mouse utility movement stuff
var isIE = document.all?true:false;
if (!isIE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMousePosition;
//document.body.onmouseup = deactivatescrollbar;
function getMousePosition(e) {
  var _x;
  var _y;
  if (!isIE) {
    _x = e.pageX;
    _y = e.pageY;
  }
  if (isIE) {
    _x = event.clientX + document.body.scrollLeft;
    _y = event.clientY + document.body.scrollTop;
  }
  mousey = _y
  if (boolean_scrollmouseactive){
	processscrollbar();  
  }
  return true;
}
var yorigin_clicked;
var scrollbaroffsetvalue = 0;
var currentscrollbaroffsetvalue = 0;
var currentscrolloffsetvalue = 0;
function processscrollbar(){
	var deltay = yorigin_clicked-mousey;
	currentscrollbaroffsetvalue = scrollbaroffsetvalue-deltay;
	if (currentscrollbaroffsetvalue < 0) {currentscrollbaroffsetvalue = 0;}
	if (currentscrollbaroffsetvalue > scrollbarlowerlimit) {currentscrollbaroffsetvalue = scrollbarlowerlimit;}
	currentscrolloffsetvalue = -currentscrollbaroffsetvalue/miniscrollheight*fb_totalheight;
	document.getElementById("fb_thumbspool").style.left = parseInt(currentscrolloffsetvalue)+"px";
}
function activatescrollbar(){
	boolean_scrollmouseactive = true;
	yorigin_clicked = mousey;
	scrollbaroffsetvalue = currentscrollbaroffsetvalue;
	document.body.onmouseup = deactivatescrollbar;
}
function fb_csbov_by_csov(){
	currentscrollbaroffsetvalue = -currentscrolloffsetvalue/fb_totalheight*miniscrollheight;
}
function fb_csov_by_csbov(){
	currentscrolloffsetvalue = -currentscrollbaroffsetvalue/miniscrollheight*fb_totalheight;
}
function deactivatescrollbar(){
	if(boolean_scrollmouseactive){
		boolean_scrollmouseactive = false;
		scrollbaroffsetvalue = currentscrollbaroffsetvalue+scrollbaroffsetvalue;
	}
}
// scrolling animation utility function
function fb_scrollupto(valuex){fb_scrollthumbs(currentscrolloffsetvalue,-valuex);}
function fb_scrolldownto(valuex){fb_scrollthumbs(currentscrolloffsetvalue,-valuex+fb_totalheight);}

function fb_scrollthumbs(startingx,endingx){
	var idname = "fb_thumbspool";
	var scrollidname = "fp_adjustablescrollbar";
	var startx = startingx;
	while (timeouts.length > 0) {
		window.clearTimeout(timeouts.pop());
	}
    var endx = endingx; // where we end at
	var deltax = startx-endx; // how much we want to shift over by
    var numframes = 25;
	var framerate = 15;
    var incrementdifferences = new Array();
	var incrementdifferences_rev;
    for (var i=0; i < numframes; i++) {
        incrementdifferences.push(deltax*Math.sin(i*Math.PI/2/numframes));// --ease out function
    }
	incrementdifferences_rev = incrementdifferences.reverse();
	for (var i=0; i < numframes; i++) {
		startx = startingx-incrementdifferences_rev.pop();
		if (i== numframes-1){startx = endingx;}
		var vartimeout = window.setTimeout("document.getElementById('"+idname+"').style.left = '"+parseInt(startx)+"px';",framerate*i);
		timeouts.push(vartimeout);
		//vartimeout = window.setTimeout("document.getElementById('"+scrollidname+"').style.top = '"+parseInt(-startx*miniscrollratio)+"px';",framerate*i);
		timeouts.push(vartimeout);
		if (i == (numframes-1)){currentscrolloffsetvalue = parseInt(startx);fb_csbov_by_csov();}
	}
	
//	alert("scrollvalue set:"+currentscrolloffsetvalue);
}
var autoscrolltimervar = new Array();
var scrolldeltay = 0;
function fb_scrollonup(){ while (autoscrolltimervar.length > 0){clearTimeout(autoscrolltimervar.pop());} scrolldeltay = 0; autoscrolltimervar.push(setInterval(function(){shiftdown(false);},25));}
function fb_scrollondown(){while (autoscrolltimervar.length > 0){clearTimeout(autoscrolltimervar.pop());} scrolldeltay = 0; autoscrolltimervar.push(setInterval(function(){shiftdown(true);},25));}
function fb_scrolloff(){
	while (autoscrolltimervar.length > 0){
		clearTimeout(autoscrolltimervar.pop());
		}
}

function shiftdown(var_bool){
	if (var_bool) {
		currentscrollbaroffsetvalue++;
	} else {currentscrollbaroffsetvalue--;}
	if (currentscrollbaroffsetvalue < 0) {currentscrollbaroffsetvalue = 0;}
	if (currentscrollbaroffsetvalue > (scrollbarlowerlimit + 10)) {currentscrollbaroffsetvalue = (scrollbarlowerlimit+10);}
	currentscrolloffsetvalue = -currentscrollbaroffsetvalue/miniscrollheight*fb_totalheight;
	document.getElementById("fb_thumbspool").style.left = parseInt(currentscrolloffsetvalue)+"px";
}
function fb_play(){
	autoscrolltimervar.push(setInterval(function(){fb_selnext(1);},6500));
	document.getElementById("fb_stopimg").style.display = "block";
	document.getElementById("fb_playimg").style.display = "none";
}
function fb_stop(){
	while (autoscrolltimervar.length > 0){
		clearTimeout(autoscrolltimervar.pop());
	}
	document.getElementById("fb_stopimg").style.display = "none";
	document.getElementById("fb_playimg").style.display = "block";
}
function fb_mostop(mybool){
	var moobj = document.getElementById("fb_stopimg");
	if (mybool) {
		moobj.src="/cm/misquincemag/images/design/articles/flipbook/but-pause.gif";
	} else { moobj.src="/cm/misquincemag/images/design/articles/flipbook/but-pause.gif";}
}
function fb_moplay(mybool){
	var moobj = document.getElementById("fb_playimg");
	if (mybool) {
		moobj.src="/cm/misquincemag/images/design/articles/flipbook/but-play.gif";
	} else { moobj.src="/cm/misquincemag/images/design/articles/flipbook/but-play.gif";}
}
function fb_monext(mybool){
	
	var moobj = document.getElementById("fb_nextimg");
	if (mybool) {
		moobj.src="/cm/misquincemag/images/design/articles/flipbook/but-next.gif";
	} else { moobj.src="/cm/misquincemag/images/design/articles/flipbook/but-next.gif";}
/*	var imgtrue = "next_over.gif";
	var imgfalse = "next.gif";
	if (mybool) {
		document.getElementById("button_right").style.backgroundImage = "url('/cm/cosmogirl/images/v01/flipbook_app/'"+imgfalse+"')";
	} else {
		document.getElementById("button_right").style.backgroundImage = "url('/cm/cosmogirl/images/v01/flipbook_app/'"+imgtrue+"')";
	}
*/}
function fb_moprev(mybool){
	var moobj = document.getElementById("fb_previmg");
	if (mybool) {
		moobj.src="/cm/misquincemag/images/design/articles/flipbook/but-back.gif";
	} else { moobj.src="/cm/misquincemag/images/design/articles/flipbook/but-back.gif";}
}
// call that initializes the fb
// I don't know of a good solution for this one, as calling window.onload will override the existing one, so intead, we are going to set an interval and call it a day.
//window.setTimeout(fb_init(),1000);
//Window.onload = fb_init;
//$(document).ready(fb_init());