/* Display Constructor */
function SLIDESHOW_Display(tag, width, height, duration) {
    this.progress = new Image();
    this.progress.src = "/Images/HomeGalleryLoading.gif";
    this.progress.id = "progress";

    this.parent = tag;
    this.tagID = tag + "_slide_display";
    this.width = width;
    this.duration = duration;

    $('*[id$=' + tag + ']').html('<table  cellpadding="0" cellspacing="0" style="padding: 0px; "><tr><td id="' + this.tagID + '" style="margin-top: 0px;"></td></tr></table>');
    $('*[id$=' + tag + ']').css('width', width);
    $('*[id$=' + tag + ']').css('height', height);
    $('*[id$=' + this.tagID + ']').css('width', width);
    $('*[id$=' + this.tagID + ']').css('height', height);
}

SLIDESHOW_Display.prototype.loadingContent = function(title, content, link) {
    var tagID = this.tagID;


    $('#' + tagID + '_content').remove();

    if ((title == "" || !title) && (content == "" || !content))
        return;

    $('#' + this.parent).append('<div id="' + tagID + '_content" class="CONTENT"></div>');
    $('#' + tagID + '_content').css('opacity', '0');

    if (title != '' && title) {
        $('#' + tagID + '_content').append('<div style="margin-bottom: 10px;"><a class="TITLE">' + title + '</a></div>');
    }

    if (content != '' && content && (!title || title == "")) {
        $('#' + tagID + '_content').append('<div class="BREAK"><a class="DESCRIPTION">' + content + '</a></div>');

    }
    else if (content != '' && content) {
        $('#' + tagID + '_content').append('<div><a class="DESCRIPTION">' + content + '</a></div>');
    }

    $('#' + tagID + '_content').fadeTo('slow', 0.8, function() {

    });
}

SLIDESHOW_Display.prototype.loadingImage = function(reference, image_src, title, content, link) {

    $('#' + this.tagID + '_content').remove();

    var tagID = this.tagID;
    var progress = this.progress;
    var duration = this.duration;

    /* Display Progressing */
    $('*[id$=' + tagID + ']').html(progress);

    $(progress).css('margin-left', 'auto');
    $(progress).css('margin-right', 'auto');

    /* Preloading Image */
    var image = new Image();
    image.src = image_src;

    $(image).css('margin-left', 'auto');
    $(image).css('margin-right', 'auto');

    $(image).css('display', 'none');
    $(image).css('opacity', '0');

    $('*[id$=' + tagID + ']').append(image);

    /* Remove image when error found during loading */
    $(image).bind('error', function(events) {
        $(this).remove();
    });
    /********************************** Modify ********************************/
    var object = this;
    /********************************** Modify ********************************/
    /* Image loaded */
    $(image).bind('load', function(events) {

        /* Remove Progress Bar */
        $(progress).remove();
        $(this).css('display', '');

        /* Perform a fade in effect */
        $(this).fadeTo(duration, 1, function() { });
        $(this).css('display', '');

        object.loadingContent(title, content, link);
        /********************************** Modify ********************************/
        if (reference.AutoInterval)
            $(this).attr('title', 'Click to stop Slide Show');
        else
            $(this).attr('title', 'Click to start Slide Show');
        /********************************** Modify ********************************/
        $(this).css('cursor', 'pointer');
        $(this).bind('click', function() {
            /********************************** Modify ********************************/
            reference.AutoSlideShow(reference.thumbnail_size);
            if (reference.AutoInterval)
                $(this).attr('title', 'Click to stop Slide Show');
            else
                $(this).attr('title', 'Click to start Slide Show');
            /********************************** Modify ********************************/
        });
    });
}

/*List Constructor */
function SLIDESHOW_List(reference, tagID, width, height, duration, item_width, item_height) {

    this.reference = reference;
    this.page = 0;
    this.timer = 0;
    this.tagID = tagID;
    this.width = width;
    this.duration = duration;
    this.item_width = item_width;
    this.item_height = item_height;

    $('*[id$=' + tagID + ']').css('width', width + 'px');
    $('*[id$=' + tagID + ']').css('height', height + 'px');

    width *= 200;

    $('*[id$=' + tagID + ']').append('<ul id="' + tagID + '_slide_holder" style="height: 0px; width: ' + width + 'px"></ul>');
    /********************************** Modify ********************************/
    var object = this;

    $('*[id$=next]').bind('click', function() {
        if (!object.AutoInterval)
            object.Next();
    });
    $('*[id$=previous]').bind('click', function() { if (!object.AutoInterval) object.Previous(); });
    /********************************** Modify ********************************/
}

/*
* Adding Photo to the list according x and y position within the list
*
*/

SLIDESHOW_List.prototype.AddPhoto = function(thumbnail, src, title, content, link, index) {
    var duration = this.duration;
    var value = GetValueFromPX($('#' + this.tagID + '_slide_holder').css('width'));
    value += this.item_width;
    var progress = new Image();
    progress.src = "/Images/GalleryLoading.gif";
    progress.id = this.tagID + '_photo' + index + "_progress";

    /*
    * Image Div holder.	
    *
    */
    var obj = this;
    var object = this.reference;


    $('*[id$=' + this.tagID + '] ul#' + this.tagID + '_slide_holder').append('<li style="padding-top: 2px; height:' + this.item_height + 'px; width: ' + this.item_width + 'px;"><a id="' + this.tagID + '_thumbnail_' + index + '" ></a></li>');
    $('#' + this.tagID + '_thumbnail_' + index).html(progress);
    $('#' + this.tagID + '_slide_holder').css('width', value + 'px');

    var image = new Image();
    image.src = thumbnail + '?random=' + (new Date()).getTime();
    image.id = this.tagID + '_photo' + index;

    $('#' + this.tagID + '_thumbnail_' + index).append(image);
    $(image).css('display', 'none');
    $(image).css('opacity', '0');

    var tagID = this.tagID;

    $(image).bind('error', function(events) {
        var id = $(this).attr('id');
        $('#' + id + '_progress').remove();
    });
    var obj = this;
    $(image).bind('load', function(events) {

        var id = $(this).attr('id');
        $('#' + id + '_progress').remove();
        $(this).css('display', '');

        $(this).fadeTo(duration, 1, function() { });
        $(this).css('display', '');
        $(this).attr('border', '0');


        $('#' + tagID + '_thumbnail_' + index).bind('click', function(events) {

            object.loadingImage(obj, src + '?random=' + (new Date()).getTime(), title, content, link);

            $('#' + tagID + ' ul ' + 'li').css('background-color', 'transparent');
            $(this).parent().css('background-color', '#FF6600');
        });
    });
}

var x = 0;
/* Next Page list Note: Ajax call needed*/
SLIDESHOW_List.prototype.Next = function() {

    var value = GetValueFromPX($('ul#' + this.tagID + '_slide_holder').css('left'));
    var size = $('ul#' + this.tagID + '_slide_holder li').size();

    value *= -1;

    if (size * this.item_width <= value + this.width)
        return;

    this.MoveNext();
}

/* Previous Page in the array Note: No Ajax Call*/
SLIDESHOW_List.prototype.Previous = function() {

    var value = GetValueFromPX($('ul#' + this.tagID + '_slide_holder').css('left'));
    if (value >= 0)
        return;
    this.MovePrevious();
}

var interval;

SLIDESHOW_List.prototype.MoveNext = function() {
    var t = this.timer;
    var w = this.width;
    var p = this.page;
    var tagID = this.tagID;

    var i = this.item_width;

    /* Disable button while move to next page */
    $('*[id$=next]').attr('disabled', 'disabled');
    $('*[id$=previous]').attr('disabled', 'disabled');

    interval = setInterval(
		function() {
		    $('#' + tagID + '_slide_holder').each(function(index) {

		        var value = t / 50 * (((p + 1) * w) - p * w) + p * w;
		        value *= -1;
		        if (t >= 50) {
		            $('#' + tagID + '_slide_holder a').each(function(index2) {

		                if ((p + 1) * (w / i) == index2) {

		                    $(this).trigger('click');
		                }
		            });
		            $('*[id$=next]').attr('disabled', '');
		            $('*[id$=previous]').attr('disabled', '');
		            clearInterval(interval);
		        }

		        t += 1;

		        $(this).css('left', value + 'px');
		    });
		}, 10
	);
    this.page += 1;
    this.timer = 0;
}

SLIDESHOW_List.prototype.MovePrevious = function() {
    var tagID = this.tagID;
    var t = this.timer;
    var w = this.width;
    var p = this.page;

    var i = this.item_width;

    /* Disable button while move to next page */
    $('*[id$=previous]').attr('disabled', 'disabled');
    $('*[id$=next]').attr('disabled', 'disabled');

    interval = setInterval(
		function() {
		    $('#' + tagID + '_slide_holder').each(function(index) {

		        var value = t / 50 * (((p + 1) * w) - p * w) - p * w;
		        //value *= -1;
		        if (t >= 50) {
		            $('#' + tagID + '_slide_holder a').each(function(index2) {

		                if ((p - 1) * (w / i) + (w / i - 1) == index2) {

		                    $(this).trigger('click');
		                }
		            });
		            $('*[id$=previous]').attr('disabled', '');
		            $('*[id$=next]').attr('disabled', '');
		            clearInterval(interval);
		        }

		        t += 1;

		        $(this).css('left', value + 'px');
		    });
		}, 10
	);
    this.page -= 1;
    this.timer = 0;
}

//SLIDESHOW_List.prototype.LoadPhotoFromAjax = function(canvasID) {
//    var object = this;
//    var reference = this.reference;
// 

//    var FetchPhotos = function() {
//        PageMethods.FetchPhotos(canvasID, 
//            function(result) {
//                object.thumbnail_size = result.length;

//                for (var i = 0; i < result.length; i++) {
//                    /********************************** Modify ********************************/
//                    if (i == 0)
//                        reference.loadingImage(object, result[i].url + '?random=' + (new Date()).getTime(), result[i].title, result[i].content, result[i].link);
//                    /********************************** Modify ********************************/
//                    object.AddPhoto(result[i].thumb_url, result[i].url, result[i].title, result[i].content, result[i].link, i);
//                    $('*[id^=' + object.tagID + '_thumbnail_' + 0 + ']').parent().css('background-color', '#FF6600');
//                }
//                /********************************** Modify ********************************/
//                object.AutoSlideShow(result.length);

//            },
//            function(error) {
//               // alert('test' + error.Message);
//            });
//    };
//    FetchPhotos();
//}

SLIDESHOW_List.prototype.LoadPhotoFromAjax = function(url, method, data) {
    var object = this;
    var reference = this.reference;
    var Proxy = new serviceProxy(url);


    var canvas = new Object();
    canvas.canvasId = photoGalleryID;

    Proxy.invoke(method, canvas,
        function(result) {
    object.thumbnail_size = result.length;

    for (var i = 0; i < result.length; i++) {
        /********************************** Modify ********************************/
        if (i == 0)
            reference.loadingImage(object, result[i].url + '?random=' + (new Date()).getTime(), result[i].title, result[i].content, result[i].link);
        /********************************** Modify ********************************/
        object.AddPhoto(result[i].thumb_url, result[i].url, result[i].title, result[i].content, result[i].link, i);
        $('*[id^=' + object.tagID + '_thumbnail_' + 0 + ']').parent().css('background-color', '#FF6600');
    }
    /********************************** Modify ********************************/
    object.AutoSlideShow(result.length);
        },
        function(result) {
            alert('error');
        });
     
  
}


$(document).ready(function() {


    /*************
    * Find all progress src on top with the image you wanted to use for progress bar
    ***********/
    /******************************************************************
    * Create SLIDESHOW_Display object with id = display as the div tag in webform1.aspx
    * 1st parameter ID
    * 2nd parameter Width
    * 3rd parameter Height
    * 4th parameter duration
    *******************************************************************/
    var a, b;



    if (hasMasterPage == 1) {
        a = new SLIDESHOW_Display('ctl00_Content_display', '570px', '330px', 'slow');

    } else {
        a = new SLIDESHOW_Display('display', '600px', '450px', 'slow');
    }
    // a.loadingImage('Image/alert_caution.gif');

    /******************************************************************
    * Create SLIDESHOW_Display object with id = display as the div tag in webform1.aspx
    * 1st parameter Reference from the first object created. Above the this comment
    * 2nd parameter Width 
    * 3rd parameter Height
    * 4th parameter duration
    * 5th parameter Item width include border gabs
    * 6th parameter Item height include border gabs
    *******************************************************************/
    b = new SLIDESHOW_List(a, 'slide_list', 496, 94, 'slow', 124, 94);
    
    var canvas_id = photoGalleryID;


    b.LoadPhotoFromAjax("/Service/PhotoGalleryService.svc/", 'AutoFetchPhotos', '');

});

function GetValueFromPX(value) {

    if (value != null) {
        return parseInt(value.substring(0, value.indexOf('px')));
    }
}

/***********************************
Reset List Position
***********************************/
SLIDESHOW_List.prototype.Reset = function() {
    this.page = 0;
    $('ul#' + this.tagID + '_slide_holder').css('left', '0px');
}


/********************************** Modify ********************************/
/***********************************
Auto Slide Show
***********************************/
SLIDESHOW_List.prototype.AutoSlideShow = function(size) {

    var object = this;                                                  /* Current object for call back*/
    var current_index = -1;                                              /* Local variables for current selected index */
    var visible_size = 4;                                               /* Total Visible Size */
    var visible_index = 0;
    var size = size;

    var tagID = this.tagID;

    var AutoShow = function() {

        //        if (visible_index >= visible_size) visible_index = 1;
        //        else visible_index++;

        if (current_index >= size) { object.Reset(); current_index = 0; object.page = 0; visible_index = 0; }
        else {
            current_index++;
        }

        $('*[id^=' + tagID + '_thumbnail_]').each(function(index) {
            if (current_index == index && visible_index == visible_size && current_index <= size) {
                object.Next();
                visible_index = 1;

            }
            else if (current_index == index && current_index <= size) {
                $(this).trigger('click');
                visible_index++;
            }

        });

    };

    if (!this.AutoInterval && size > 1) {
        object.Reset();

        AutoShow();
        this.AutoInterval = setInterval(
            AutoShow
            , 10000);
    }
    else {
        clearInterval(this.AutoInterval);
        this.AutoInterval = null;
    }
}
/********************************** Modify ********************************/