var currentStory = '';
var startStory = '';
var storyData = new Object;
var storyLoaded = false;
function openStory(who) {
		var pos = $('#mainBillboard').offset();
		setStory(who);
		$("#storyOuterDiv2").hide();
		$("#storyOuterDiv").show();
}
function openStory2(who) {
		var pos = $('#mainBillboard').offset();
		setStory(who);
		$("#storyOuterDiv").hide();
		$("#storyOuterDiv2").show();
}
function closeStory() {
		setStory(startStory);
		$("#storyOuterDiv").hide();
		$("#storyOuterDiv2").hide();
}

function setStory(who) {
	if ( !storyLoaded || who != currentStory ) {
	  $('#' + currentStory).attr('src',storyData.imgPath + currentStory + '_off.jpg');
	  $('#' + currentStory + '_main').fadeOut(50,function() {
		$('#' + who + '_main').fadeIn(50);
	  });
	  $('#' + who).attr('src',storyData.imgPath + who + '_on.jpg');
	  $('#' + currentStory).css({'cursor':'pointer'});
	  currentStory = who;
	  storyLoaded = true;
	}
	$('#' + currentStory).css({'cursor':'default'});
}
function rollImage(who,what) {
	if ( what == 'on' ) {
		$('#' + who).attr('src',storyData.imgPath + who + '_on.jpg');
	} else {
		if ( who != currentStory ) {
			$('#' + who).attr('src',storyData.imgPath + who + '_off.jpg');
		}
	}
}

function buildStories(container) {

	// This is the drop shadow container
	var oneDiv   = document.createElement('div');
	var shTable  = document.createElement('table');
	$(shTable).css({'width':'752px','height':'454px'});
	$(shTable).attr('cellpadding','0');
	$(shTable).attr('cellspacing','0');

	var tBody    = document.createElement('tbody');

	var topTr    = document.createElement('tr');
	var midTr    = document.createElement('tr');
	var btmTr    = document.createElement('tr');

	var topltd   = document.createElement('td');
	$(topltd).css({'width':'15px','height':'15px','background':'transparent url(\'http://www.franklinplanner.com/images/popovers/shdw/tleft.png\') no-repeat'});

	var topmtd   = document.createElement('td');
	$(topmtd).css({'width':'705px','height':'15px','background':'transparent url(\'http://www.franklinplanner.com/images/popovers/shdw/top.png\') repeat-x'});
	var toprtd   = document.createElement('td');
	$(toprtd).css({'width':'15px','height':'15px','background':'transparent url(\'http://www.franklinplanner.com/images/popovers/shdw/tright.png\') no-repeat'});

	var midltd   = document.createElement('td');
	$(midltd).css({'width':'15px','background':'transparent url(\'http://www.franklinplanner.com/images/popovers/shdw/left.png\') repeat-y'});

	var midmtd   = document.createElement('td');

	var midrtd   = document.createElement('td');
	$(midrtd).css({'width':'15px','background':'transparent url(\'http://www.franklinplanner.com/images/popovers/shdw/right.png\') repeat-y'});
	$(midrtd).html(' ');

	var btmltd   = document.createElement('td');
	$(btmltd).css({'width':'15px','height':'15px','background':'transparent url(\'http://www.franklinplanner.com/images/popovers/shdw/bleft.png\') no-repeat'});

	var btmmtd   = document.createElement('td');
	$(btmmtd).css({'height':'15px','background':'transparent url(\'http://www.franklinplanner.com/images/popovers/shdw/bottom.png\') repeat-x'});
	var btmrtd   = document.createElement('td');
	$(btmrtd).css({'width':'15px','height':'15px','background':'transparent url(\'http://www.franklinplanner.com/images/popovers/shdw/bright.png\') no-repeat'});

	// This is the outer border div with 8px white border and the 'close' button
	var borderDiv   = document.createElement('div');
	$(borderDiv).css({'border':'8px solid ' + storyData.borderColor});

	// This is the main container of the content
	var contentDiv = document.createElement('div');
	$(contentDiv).css({'width':'705px','height':'434px'});

	// Build Up the left side
	var leftDiv = document.createElement('div');
	var mainDiv = document.createElement('div');
	$(leftDiv).css({'width':'124px','float':'left'});
	$(mainDiv).css({'background-color':storyData.backgroundColor,'width':'581px','height':'434px','float':'right'});
	var leftHeadImg = document.createElement('img');
	leftHeadImg.src = storyData.headerImg; 
	$(leftHeadImg).css({'border':'none','display':'block'});
	leftDiv.appendChild(leftHeadImg);
	for ( i=0;i<storyData.storyItems.length;i++ ) {
	  var leftImg = document.createElement('img');
	  leftImg.src = storyData.imgPath + storyData.storyItems[i] + '_off.jpg';
	  $(leftImg).css({'display':'block','cursor':'pointer','border':'none'});
	  $(leftImg).attr('class','storySetter');
	  $(leftImg).attr('id',storyData.storyItems[i]);
	  $(leftImg).attr('onmouseover','rollImage(\'' + storyData.storyItems[i] + '\',\'on\');');
	  $(leftImg).attr('onmouseout','rollImage(\'' + storyData.storyItems[i] + '\',\'off\');');
	  $(leftImg).attr('onclick','setStory(\'' + storyData.storyItems[i] + '\');');
	  leftDiv.appendChild(leftImg);
	  var mainImgDiv = document.createElement('div');
	  $(mainImgDiv).css({'display':'none','border':'none','width':'581px','height':'406px'});
	  $(mainImgDiv).attr('id',storyData.storyItems[i] + '_main');

	  var mainImg = document.createElement('img');
	  mainImg.src = storyData.imgPath + storyData.storyItems[i] + '_main.jpg';
	  $(mainImg).css({'display':'block','border':'none','width':'581px','height':'406px'});
	  mainImgDiv.appendChild(mainImg);
	  mainDiv.appendChild(mainImgDiv);
	}
	// Add the bottom links to the right div
	var bottomMainDiv = document.createElement('div');
	var bottomLeftDiv = document.createElement('div');
	var bottomRightDiv = document.createElement('div');

	$(bottomLeftDiv).css({'float':'left'});
	$(bottomLeftDiv).html('<a href="http://getorganized.franklinplanner.com/tell_us_your_story"><img src="' + storyData.imgPath + 'btn_tellus.gif" style="display:inline;border:none;"/></a>');

	$(bottomRightDiv).css({'float':'right'});
	$(bottomRightDiv).html('<a href="javascript:closeStory();"><img src="' + storyData.imgPath + 'btn_continue.gif" style="display:inline;border:none;"/></a>');

	// Append it all together.

	bottomMainDiv.appendChild(bottomLeftDiv);
	bottomMainDiv.appendChild(bottomRightDiv);
	mainDiv.appendChild(bottomMainDiv);
	contentDiv.appendChild(leftDiv);
	contentDiv.appendChild(mainDiv);
	borderDiv.appendChild(contentDiv);
	midmtd.appendChild(borderDiv);

	topTr.appendChild(topltd);
	topTr.appendChild(topmtd);
	topTr.appendChild(toprtd);
	midTr.appendChild(midltd);
	midTr.appendChild(midmtd);
	midTr.appendChild(midrtd);
	btmTr.appendChild(btmltd);
	btmTr.appendChild(btmmtd);
	btmTr.appendChild(btmrtd);
	tBody.appendChild(topTr);
	tBody.appendChild(midTr);
	tBody.appendChild(btmTr);
	shTable.appendChild(tBody);

	oneDiv.appendChild(shTable);

	$(container).html($(oneDiv).html());
	setStory(currentStory);
	//$(container).fadeIn(50);
}