var SearchTerm = '';
var isFrame = false;
var TagIDs = new Array();
var SearchType = -1;
var StartPage = 0;

function ReversePageGroup() {
    ImageLibraryBrowse(StartPage - 5);
}

function ReversePageGroupStart() {
    ImageLibraryBrowse(0);
}

function AdvancePageGroup() {
    ImageLibraryBrowse(StartPage + 5);
}

function AdvancePageGroupEnd(lastPage) {
    var modValue = lastPage % 5;
    ImageLibraryBrowse(lastPage - modValue);
}

function CakeIdeasReversePageGroup() {
    CakeIdeasBrowse(StartPage - 5);
}

function CakeIdeasAdvancePageGroup() {
    CakeIdeasBrowse(StartPage + 5);
}

function SetSearchTermAndBrowse(keyword) {
    SearchTerm = keyword;
    StartPage = 0;
    ImageLibraryBrowse();
}

function SearchAndBrowse() {
    if ($('#search').val() == 'Enter Search Terms') {
        // view all images
        SearchTerm = "";
    }else{
        SearchTerm = $('#search').val().replace("!","")
    }
    StartPage = 0;
    ImageLibraryBrowse();
}

function CakeIdeasSearchAndBrowse() {
	if ($('#search').val() != 'Enter Search Terms') {
		StartPage = 0;
        SearchTerm = $('#search').val();
        StartPage = 0;
        CakeIdeasBrowse();
    }
}

function ImageLibraryBrowse(newStartPage) {
	if (newStartPage == null) {
		StartPage = 0;
	} else {
		StartPage = newStartPage;
	}

    if ($('#framesOnly:checked').val() != null) {
        isFrame = true;
    }
    else {
        isFrame = false;
    }
    $('.libraryResults').html('<div class="loadingAnimation"><img src="Resources/Images/loading_animation.gif" width="50" height="50" /></div>');
    DecoPac.Images.ImageLibraryBrowse(SearchTerm, isFrame, TagIDs, SearchType, StartPage, ImageLibraryBrowse_callback);
}

function ImageLibraryBrowse_callback(res) {
    if (res.error && res.error.Message != 'Unknown')
        alert(res.error.Message)
    else {
        var x = res.value;
        $('#ImageLibraryContent').html(x);
        BrowseSlider();
        $("#search").autocomplete("SearchAutocomplete.aspx", { extraParams: { SearchType: 1} });
    }
}

function CakeIdeasBrowse(newStartPage) {
	if (newStartPage == null) {
		StartPage = 0;
	} else {
		StartPage = newStartPage;
	}
    $('.libraryResults').html('<div class="loadingAnimation"><img src="Resources/Images/loading_animation.gif" width="50" height="50" /></div>');
    DecoPac.Images.CakeIdeasBrowse(SearchTerm, TagIDs, SearchType, StartPage, CakeIdeasBrowse_callback);
}

function CakeIdeasBrowse_callback(res) {
    if (res.error && res.error.Message != 'Unknown')
        alert(res.error.Message)
    else {
        var x = res.value;
        $('#CakeIdeasContent').html(x);
        BrowseSlider();
        $("#search").autocomplete("SearchAutocomplete.aspx", { extraParams: { SearchType: 2} });
    }
}

function ShowCakeIdeas(ref) {
    DecoPac.Images.OverlayCakeIdeas(ref, Overlay_callback);
}

function ShowCakeDetail(ref) {
    DecoPac.Images.OverlayCakeDetail(ref, Overlay_callback);
}

function ShowFavorite(ref) {
    DecoPac.Images.OverlayFavorite(ref, Overlay_callback);
}

function ShowFavoriteOn(ref) {
    DecoPac.Images.OverlayFavoriteOn(ref, Overlay_callback);
}

function ShowImageDetail(ref) {
    DecoPac.Images.OverlayImageDetail(ref, Overlay_callback);
}

function Overlay_callback(res) {
    if (res.error && res.error.Message != 'Unknown')
        alert(res.error.Message)
    else {
        var x = res.value;
        $('#OverlayImageLibrary').html(x);
        TINY.box.show($('#OverlayImageLibrary').html(), 0, 557, 375, 1);
    }
}

function CreateCake_callback(res) {
    if (res.error && res.error.Message != 'Unknown') {
        TINY.box.show($('#OverlayMustLogIn').html(), 0, 557, 375, 1);
    } else {
        location.href = 'CreateCake.aspx';
    }
}

function CreateCake_error() {
    TINY.box.show($('#OverlayMustLogInCake').html(), 0, 557, 375, 1);
}

function AddImageToFavorites(ref) {
    DecoPac.Images.AddImageToFavorites(ref, AddImageToFavorites_callback);
}

function AddImageToFavorites_callback(res) {
    if (res.error && res.error.Message != 'Unknown') {
        TINY.box.show($('#OverlayMustLogIn').html(), 0, 557, 375, 1);
    } else {
        var x = res.value;
        $('#favoriteButton' + x).attr('href', "javascript:ShowFavoriteOn('" + x + "')");
        $('#favoriteIcon' + x).attr('src', 'Resources/Images/icon_favorite_on.png');
        var favoritesCount = parseInt($('#ImageCategoryCount2').html());
        favoritesCount = favoritesCount + 1;
        $('#ImageCategoryCount2').html(favoritesCount);
        TINY.box.hide();
    }
}

function RemoveImageFromFavorites(ref) {
    DecoPac.Images.RemoveImageFromFavorites(ref, RemoveImageFromFavorites_callback);
}

function RemoveImageFromFavorites_callback(res) {
    if (res.error && res.error.Message != 'Unknown') {
        TINY.box.show($('#OverlayMustLogIn').html(), 0, 557, 375, 1);
    } else {
        var x = res.value;
        $('#favoriteButton' + x).attr('href', "javascript:ShowFavorite('" + x + "')");
        $('#favoriteIcon' + x).attr('src', 'Resources/Images/icon_favorite.png');
        var favoritesCount = $('#ImageCategoryCount2').html();
        favoritesCount = favoritesCount - 1;
        $('#ImageCategoryCount2').html(favoritesCount);
        TINY.box.hide();
        if (SearchType == 2)
            StartPage = 0;
            ImageLibraryBrowse();
    }
}

function AddCakeIdeaToFavorites(ref) {
    DecoPac.Images.AddCakeIdeaToFavorites(ref, AddCakeIdeaToFavorites_callback);
}

function AddCakeIdeaToFavorites_callback(res) {
    if (res.error && res.error.Message != 'Unknown') {
        TINY.box.show($('#OverlayMustLogIn').html(), 0, 557, 375, 1);
    } else {
        var x = res.value;
        $('#favoriteButton' + x).attr('href', "javascript:RemoveCakeIdeaFromFavorites('" + x + "')");
        $('#favoriteIcon' + x).attr('src', 'Resources/Images/icon_cakeFavorite_on.png');
        var favoritesCount = parseInt($('#CakeIdeaCategoryCount2').html());
        favoritesCount = favoritesCount + 1;
        $('#CakeIdeaCategoryCount2').html(favoritesCount);
    }
}

function RemoveCakeIdeaFromFavorites(ref) {
    DecoPac.Images.RemoveCakeIdeaFromFavorites(ref, RemoveCakeIdeaFromFavorites_callback);
}

function RemoveCakeIdeaFromFavorites_callback(res) {
    if (res.error && res.error.Message != 'Unknown') {
        TINY.box.show($('#OverlayMustLogIn').html(), 0, 557, 375, 1);
    } else {
        var x = res.value;
        $('#favoriteButton' + x).attr('href', "javascript:AddCakeIdeaToFavorites('" + x + "')");
        $('#favoriteIcon' + x).attr('src', 'Resources/Images/icon_cakeFavorite.png');
        var favoritesCount = $('#CakeIdeaCategoryCount2').html();
        favoritesCount = favoritesCount - 1;
        $('#CakeIdeaCategoryCount2').html(favoritesCount);
        if (SearchType == 2)
            StartPage = 0;
            CakeIdeasBrowse();
    }
}

function ClearSearchTermAndBrowse() {
    SearchTerm = '';
    StartPage = 0;
    ImageLibraryBrowse();
}

function CakeIdeasClearSearchTermAndBrowse() {
    SearchTerm = '';
    StartPage = 0;
    CakeIdeasBrowse();
}

function ClearSearchTypeAndBrowse() {
    SearchType = -1;
    StartPage = 0;
    ImageLibraryBrowse();
}

function CakeIdeasClearSearchTypeAndBrowse() {
    SearchType = -1;
    StartPage = 0;
    CakeIdeasBrowse();
}

function AddTagAndBrowse(TagID) {
    TagIDs.push(TagID);
    StartPage = 0;
    ImageLibraryBrowse();
}

function CakeIdeasAddTagAndBrowse(TagID) {
    TagIDs.push(TagID);
    StartPage = 0;
    CakeIdeasBrowse();
}

function RemoveTagAndBrowse(TagID) {
    var x = TagIDs.indexOf(TagID);
    TagIDs.splice(x, 1);
    StartPage = 0;
    ImageLibraryBrowse();
}

function CakeIdeasRemoveTagAndBrowse(TagID) {
    var x = TagIDs.indexOf(TagID);
    TagIDs.splice(x, 1);
    StartPage = 0;
    CakeIdeasBrowse();
}

function ClearFiltersAndBrowse() {
    var TagIDsLength = TagIDs.length;
    TagIDs.splice(0, TagIDsLength);
    SearchTerm = '';
    SearchType = -1;
    StartPage = 0;
    ImageLibraryBrowse();
}

function CakeIdeasClearFiltersAndBrowse() {
    var TagIDsLength = TagIDs.length;
    TagIDs.splice(0, TagIDsLength);
    SearchTerm = '';
    SearchType = -1;
    StartPage = 0;
    CakeIdeasBrowse();
}

function SetSearchTypeAndBrowse(searchType) {
    SearchType = searchType;
    StartPage = 0;
    ImageLibraryBrowse();
}

function CakeIdeasSetSearchTypeAndBrowse(searchType) {
    SearchType = searchType;
    StartPage = 0;
    CakeIdeasBrowse();
}

function ImageLibraryLanding(IsFrame) {
    DecoPac.Images.ImageLibraryLanding(IsFrame, ImageLibraryLanding_callback);
}

function ImageLibraryLanding_callback(res) {
    if (res.error && res.error.Message != 'Unknown')
        alert(res.error.Message)
    else {
        var x = res.value;
        $('#ImageLibraryContent').html(x);
        ImageLibraryLandingSlider();

        $("#search").autocomplete("SearchAutocomplete.aspx", { extraParams: {SearchType: 1}});
    }
}

function CakeIdeasLanding() {
    DecoPac.Images.CakeIdeasLanding(CakeIdeasLanding_callback);
}

function CakeIdeasLanding_callback(res) {
    if (res.error && res.error.Message != 'Unknown')
        alert(res.error.Message)
    else {
        var x = res.value;
        $('#CakeIdeasContent').html(x);
        CakeIdeasLandingSlider();
        $("#search").autocomplete("SearchAutocomplete.aspx", { extraParams: { SearchType: 2} });
    }
}

// SLIDER / SCROLLING CODE

var maxWidth;
var ul;

function BrowseSlider() {
    var container = $('div.sliderGallery');
    ul = $('ul', container);

    maxWidth = $('#sliderContainer ul:first').width();

    var itemsWidth = ul.innerWidth() - container.outerWidth();

    $('.slider', container).slider({
        min: 0,
        max: itemsWidth,
        handle: '.handle',
        stop: function (event, ui) {
            ul.animate({ 'left': ui.value * -1 }, 500);
        },
        slide: function (event, ui) {
        	ul.css('left', ui.value * -1);

        	var fullWidth = itemsWidth;
        	var pct = Math.min(ui.value / fullWidth, 1);
        	var handleFeatured = $(this).children("div");
        	var val = pct * ($(this).outerWidth() - handleFeatured.outerWidth());
        	handleFeatured.css("left", val);
        	window.log(handleFeatured.outerWidth() + ", " + fullWidth + ", " + pct);
        }
    });
}

function moveSlider(pg, lpage) {
    var groupStart = StartPage;
    var remainder = lpage - groupStart;
    var lastPage = 5;
    if (remainder < 5)
        lastPage = remainder;
    //var handleInterval = 475 / (lpage - 1);
    var handleInterval = 475 / (lastPage - 1);
    var handleLeft = handleInterval * pg;
    $('#handle').css("left", handleLeft);

    // Fixes case when last page has less than 4 images
    if ((maxWidth / lastPage) < 691) {
        maxWidth = 691 * lastPage;
    }

    //var pct = pg / lpage;
    var pct = pg / lastPage;
    var ulLeft = maxWidth * -pct;

    ul.animate({ 'left': ulLeft }, 500);
}

function ImageLibraryLandingSlider() {
    var container1 = $('div.sliderGalleryFeatured');
    var container2 = $('div.sliderGalleryNew');
    var container3 = $('div.sliderGalleryPopular');
    var ul1 = $('ul', container1);
    var ul2 = $('ul', container2);
    var ul3 = $('ul', container3);

    var itemsWidth1 = ul1.innerWidth() - container1.outerWidth();
    var itemsWidth2 = ul2.innerWidth() - container2.outerWidth();
    var itemsWidth3 = ul3.innerWidth() - container3.outerWidth();

    $('.sliderFeatured', container1).slider({
    	min: 0,
    	max: itemsWidth1,
    	handle: $('.handleFeatured'),
    	stop: function (event, ui) {
    		ul1.animate({ 'left': ui.value * -1 }, 500);
    	},
    	slide: function (event, ui) {
    		ul1.css('left', ui.value * -1);

    		var fullWidth = itemsWidth1;
    		var pct = Math.min(ui.value / fullWidth, 1);
    		var handleFeatured = $(this).children("div");
    		var val = pct * ($(this).outerWidth() - handleFeatured.outerWidth());
    		handleFeatured.css("left", val);
    		window.log(handleFeatured.outerWidth() + ", " + fullWidth + ", " + pct);
    	}
    });
    $('.sliderNew', container2).slider({
        min: 0,
        max: itemsWidth2,
        handle: '.handleNew',
        stop: function (event, ui) {
            ul2.animate({ 'left': ui.value * -1 }, 500);
        },
		slide: function (event, ui) {
           	ul2.css('left', ui.value * -1);

           	var fullWidth = itemsWidth2;
           	var pct = Math.min(ui.value / fullWidth, 1);
           	var handleFeatured = $(this).children("div");
           	var val = pct * ($(this).outerWidth() - handleFeatured.outerWidth());
           	handleFeatured.css("left", val);
           	window.log(handleFeatured.outerWidth() + ", " + fullWidth + ", " + pct);
        }
    });
    $('.sliderPopular', container3).slider({
        min: 0,
        max: itemsWidth3,
        handle: '.handlePopular',
        stop: function (event, ui) {
            ul3.animate({ 'left': ui.value * -1 }, 500);
        },
        slide: function (event, ui) {
        	ul3.css('left', ui.value * -1);

        	var fullWidth = itemsWidth3;
        	var pct = Math.min(ui.value / fullWidth, 1);
        	var handleFeatured = $(this).children("div");
        	var val = pct * ($(this).outerWidth() - handleFeatured.outerWidth());
        	handleFeatured.css("left", val);
        	window.log(handleFeatured.outerWidth() + ", " + fullWidth + ", " + pct);
        }
    });
}

function CakeIdeasLandingSlider() {
    var container1 = $('div.sliderGalleryFeatured');
    var container2 = $('div.sliderGalleryNew');
    var ul1 = $('ul', container1);
    var ul2 = $('ul', container2);

    var itemsWidth1 = ul1.innerWidth() - container1.outerWidth();
    var itemsWidth2 = ul2.innerWidth() - container2.outerWidth();

    $('.sliderFeatured', container1).slider({
        min: 0,
        max: itemsWidth1,
        handle: '.handleFeatured',
        stop: function (event, ui) {
            ul1.animate({ 'left': ui.value * -1 }, 500);
        },
        slide: function (event, ui) {
        	ul1.css('left', ui.value * -1);
        	var fullWidth = itemsWidth1;
        	var pct = Math.min(ui.value / fullWidth, 1);
        	var handleFeatured = $(this).children("div");
        	var val = pct * ($(this).outerWidth() - handleFeatured.outerWidth());
        	handleFeatured.css("left", val);
        	window.log(handleFeatured.outerWidth() + ", " + fullWidth + ", " + pct);
        }
    });
    $('.sliderNew', container2).slider({
        min: 0,
        max: itemsWidth2,
        handle: '.handleNew',
        stop: function (event, ui) {
            ul2.animate({ 'left': ui.value * -1 }, 500);
        },
        slide: function (event, ui) {
        	ul2.css('left', ui.value * -1);

        	var fullWidth = itemsWidth2;
        	var pct = Math.min(ui.value / fullWidth, 1);
        	var handleFeatured = $(this).children("div");
        	var val = pct * ($(this).outerWidth() - handleFeatured.outerWidth());
        	handleFeatured.css("left", val);
        	window.log(handleFeatured.outerWidth() + ", " + fullWidth + ", " + pct);
        }
    });
}