//Javscript Document
//#b6 reference is #1 in the html
//#a1 reference is #8 in the html
$(document).ready(function(){
//We fix the width
fixWidth();
//Set up for the perpetual repeating
//These are the html contents of the first and last pages
var id_b6 = $("#pages ul li:last").html();
var id_a1 = $("#pages ul li:first").html();
//This is the html contents of the #pages ul
var id_pages_ul = $("#pages ul").html();
//Now we reset the html of the #pages ul with id_al and id_b5 before and after
var id_pages_ul_html = ''+id_b6+'';
var id_pages_ul_html = id_pages_ul_html+id_pages_ul;
var id_pages_ul_html = id_pages_ul_html+''+id_a1+'';
//Now we insert into #pages ul
$("#pages ul").html(id_pages_ul_html);
//Here we move each of the pages into the right spots
$("#pages ul li").each(function(i){
//Move the pages where they need to go
$(this).css("left", i * ($("#pages").width()))
.attr("id",(i+1));
//Add 1 to i
i = i+1;
//Save i so we know how many pages there are, we don't have to add 1 because of the line above
window.li = i;
//This scrolls the page to the home
$("#pages").scrollTo( 900, 0, {axis:'x'} );
});
//Here we create the hover effect for the prev and next buttons on the home page
$('.scrollButton').each(function(){
$(this).hover(function(){
$(this).css('background-position', '0 0');
},function(){
$(this).css('background-position', '-30px 0');
});
});
//Here we create the hover effect for the scroll buttons on the home page
$('.vertScrollButton').each(function(){
$(this).hover(function(){
$(this).css('background-position', '0 -31px');
},function(){
$(this).css('background-position', '0 0');
});
});
//Here we create the hover effect for the links
$('.link').hover(function(){
$(this).css('color', '#ef4436');
},function(){
$(this).css('color', '#FFFFFF');
});
//Creates the focus effect in the search bar
$("input[name='search']").focus(function(){
//If the value of #busername is 'username' than blank it out
if($(this).val() == 'Search'){
$(this).val('');
}
})
.blur(function(){
//If the value of #busername is blank than give the value 'username'
if($(this).val() == ''){
$(this).val('Search');
}
});
//Here we create the tabbed interface for the backend
//Here we move the tabs to the right positions and give it a hover style, we also tell the page to load
$('.tab').each(function(i){
$(this).css("left", ((i * 101) - 1)+"px");
i++;
}).hover(function(){
//onmouseover we change the color to #525C65
$(this).css('color', '#525C65');
},function(){
//onmouseout we change the color back to #000000
$(this).css('color', '#000000');
}).click(function(){
//Get the attribute of the object, because we are referencing the .tab class
id = '#'+$(this).attr('id');
//Load the page that is clicked
loadPage(id, id+'Interface');
});
//Load the pages tab on page load
loadPage('#pagestab', '#pagestabInterface');
//Move and resize the buttons for pages in the pages tab
$('.navButton').each(function (i){
var id = $(this).attr('id');
//Make the width the right size
$(this).width((900/6) - 1).height(($('#editNav').height()) - 7).css('float', 'left')
.hover(function(){
$(this).css('background', '#BDBDBD');
},function(){
$(this).css('background', '#DDDDDD');
})
.click(function(){
loadPageEditor();
});
});
//Fix the last button so it doesn't look funky
$('.navButton:last').css('border-right', 'none').width((900/6));
//Load page 1 in the editor
loadPageEditor(1);
//Change the Page Editor when a button is clicked
$('.navButton').click(function(){
//Grab the Id of the current element
var id = $(this).attr('id');
$('.newPosts').hide();
if(id == 1 || id == 5){
$('.newPosts').show();
}
loadPageEditor(id);
});
$('.editEntryDiv').hover(function(){
$(this).css("background", "#87CEFA");
},function(){
$(this).css("background", "#CCCCCC");
});
$('.clickOnMe').hover(function(){
$(this).css("color", "#CD853F");
},function(){
$(this).css("color", "#000000");
});
$('.titleText,.entryText').click(function(){
//Get the attribute
var id = $(this).parent().attr('id').substr(9);
$('#editPostPullDown'+id).show();
$('.editEntryDiv').animate({
height:"20px"
}, { queue:false, duration: 500 });
//animate the openning of this div
$(this).parent().animate({
height:"300px"
},{ queue:true, duration: 500 });
});
});
//Scroll the page
function scrollPage(clicked){
//Move the page right or left depending on what is clicked
//The amount we are moving the scroll
var num = 900;
//The amount of time it will take
var time = 500
//The current scroll offset
var offset = $("#pages").scrollLeft();
var rnum = offset/num;
var offset = 900 * Math.round(rnum);
//If the clicked argument is 2 it turns the amount to -523 so we move to the left
if(clicked == 2){
num = -1*(num);
}
/*//Here we fix some stuff in Internet Explorer
if(navigator.appName == "Microsoft Internet Explorer"){
offset = $("#pages").scrollLeft() - 450;
num = num + 450;
}*/
//We do this so the animation can finish moving before we start again
if(offset % 900 == 0){
//If the clicked argument is 1 it stays the same so we move to the right
switch(offset){
//If we are viewing page #b6 we have to move to page #7
case 0:
$("#pages").scrollTo( 5400, 0, {axis:'x'} );
$("#pages").scrollTo( (5400 + num), time, {axis:'x'} );
break;
//If we are viewing page #a1 we have to move to page #1
case 6300:
$("#pages").scrollTo( 900, 0, {axis:'x'} );
$("#pages").scrollTo( 900 + num, time, {axis:'x'} );
break;
//And we do everything normal here
default:
$("#pages").scrollTo( offset + num, time, {axis:'x'} );
break;
}
}else{
}
}
//Change the page
function changePage(clicked){
//Move the page right or left depending on what is clicked
//The amount we are moving the scroll
var num = 900;
var ie = 0;
//The amount of time it will take
var time = 500
//The current scroll offset
var offset = $("#pages").scrollLeft();
var rnum = offset/num;
var offset = 900 * Math.round(rnum);
/*//Here we fix some stuff in Internet Explorer
if(navigator.appName == "Microsoft Internet Explorer"){
offset = $("#pages").scrollLeft() - 450;
ie = 450;
}*/
//We do this so the animation can finish moving before we start again
if( offset % 900 == 0 ){
//If the clicked argument is 1 it stays the same so we move to the right
switch( offset ){
//If we are viewing page #b6 we have to move to page #7
case 0:
$("#pages").scrollTo( 5400, 0, {axis:'x'} );
$("#pages").scrollTo( ((num*clicked)), time, {axis:'x'} );
break;
//If we are viewing page #a1 we have to move to page #1
case 6300:
$("#pages").scrollTo( 900, 0, {axis:'x'} );
$("#pages").scrollTo( ((num*clicked)), time, {axis:'x'} );
break;
//And we do everything normal here
default:
$("#pages").scrollTo( ((num*clicked)), time, {axis:'x'} );
break;
}
}
}
//This tells us what page we are currently on
function findPage(){
//The width of the page
var num = 900
//The amount of time it will take
var time = 200
//The current scroll offset
var offset1 = $("#pages").scrollLeft();
var rnum = offset1/num;
var offset = 900 * Math.round(rnum);
if(offset1 % num != 0){
var clicked = 2;
if(Math.round(rnum) > rnum){
clicked = 1;
}
$("#pages").scrollTo(offset, time, {axis:'x'} );
}
//If the offset of the page is 900 or 6300 we are on the Home page
if(offset == 900 || offset == 6300){
return 2;
}
//If the offset of the page is 180 we are on the About Us page
if(offset == 1800){
return 3;
}
//If the offset of the page is 900 or 6300 we are on the Sundays page
if(offset == 2700){
return 4;
}
//If the offset of the page is 900 or 6300 we are on the Sermons page
if(offset == 3600){
return 5;
}
//If the offset of the page is 900 or 6300 we are on the Calendar page
if(offset == 4500){
return 6;
}
//If the offset of the page is 900 or 6300 we are on the Contact page
if(offset == 5400 || offset == 0){
return 7;
}
}
//This function makes an attempt at fixing the bugs in IE
function fixWidth(){
//Here we get the window width for some clean up
var winWidth = window.innerWidth;
//Here we fix some stuff in Internet Explorer
if(navigator.appName == "Microsoft Internet Explorer"){
//Here we find the window width
winWidth = document.body.clientWidth;
//Css attributes to get the width to the right size
$("#bottomShadow").css("left",0);
$("#topShadow").css("left",0);
if(winWidth > 1000){
$("body").css({'position' : 'absolute', 'overflow-x':'hidden'});
}
}
var t = setTimeout("fixWidth();", 100);
}
//This loads the backend GUI page information
function loadPage(id, page){
$('.tab').each(function(){
$(this).css({'background' : '#BCBCBC'});
});
$(id).css({'background' : '#DDDDDD'});
$('#gui ul li').each(function(){
$(this).hide();
});
$(page).show();
}
//This loads each individual page editor
function loadPageEditor(id){
//Hide the containers
$('.editorContainers').hide();
//Show the right page editor
$('#page'+id+'Editor').show();
}
/*
//Checks the pages scroll position and moves it back
function checkForPage(){
//The amount we are moving the scroll
var num = 900;
//The amount of time it will take
var time = 500
//The current scroll offset
var offset = $("#pages").scrollLeft();
//Here we fix some stuff in Internet Explorer
if(navigator.appName == "Microsoft Internet Explorer"){
offset = $("#pages").scrollLeft() - 450;
num = num + 450;
}
//We do this so the animation can finish moving before we start again
if(offset % 900 == 0){
//We take the offset var and subtract 900 from it
var offsetFix = offset - num
}
}
*/
function vertScroll(page, dir){
elem = $('#'+page+' .pageDivWrap');
//Find the height
var height = elem.height();
//Find the vertical scroll position
var offset = elem.scrollTop();
//If the direction is down add 10 to the scroll
var num = offset + 10;
//If the direction is up subtract 10
if(dir == 2){
num = offset - 10
}
//If the num goes negative the scroll func will not scroll, so we set it to 0 if num is < 0
if(num < 0){
num = 0;
}
//If the num is bigger than the height of the div we set it to to the max height so it will scroll
if(num > height){
num = height;
}
//Scroll the element
elem.scrollTo(num, {axis:'y'} );
//We have to change Both contact pages
if(page == 0 ){
$("#7 .pageDivWrap").scrollTo(elem.scrollTop, {axis:'y'});
}
//Change the second contact page
if(page == 7 ){
$("#1 .pageDivWrap").scrollTo(elem.scrollTop, {axis:'y'});
}
//We have to change both home pages
if(page == 2){
$("#8 .pageDivWrap").scrollTo(elem.scrollTop, {axis:'y'});
}
if(page == 8){
$("#2 .pageDivWrap").scrollTo(elem.scrollTop, {axis:'y'});
}
//Repeat if the user has not let go of the mouse
if(window.mouseDown == 1){
var t = setTimeout("vertScroll('"+page+"','"+dir+"');", 10);
}
}
//Here we give the user the option to delete a post
function deletePost(id, file){
var answer = confirm("Are you sure you want to delete this post?")
if(answer){
//Send the request to delete from the server
$.post('backendUpload.php', {type:'delete', id:id, file:file}, function(data){
//Hid the post
$('#editEntry'+id).remove();
});
}else{
}
}
//Here we give the user the option to delete a post
function deleteImg(id, file){
var answer = confirm("Are you sure you want to delete this image?")
if(answer){
//Send the request to delete from the server
$.post('backendUpload.php', {type:'deleteImg', id:id, file:file}, function(data){
//Hide the post
window.location = 'http://www.sixthirtyfive.org/login';
});
}else{
}
}
//Creates the search bar edit
function sendSearch(search){
//Run the search
$.post("search.php", {search:search}, function(data){
$("#searchTab").remove();
//Pop up the search results
$.fn.colorbox({width:"800px", height:"600px", html:'Your Search:'+search+'
'+data});
});
$("input[name='search']").val('Search');
//Return false
return false;
}
//Close the search bar
function closeSearch(search){
//Open a "tab"
var tab = 'Search Results for \''+search+'\'
';
$("#hcontain").append(tab);
//Close the menu
$.fn.colorbox.close();
}
//Search go to page
function searchGoToPage(search, page){
//Change the page
changePage(page);
//Cose theSearch
closeSearch(search);
}