//TODO: Need a better way of passing context around between slide loads and handling global variables "vars". Currently only possible to have one slideshow on a page.

var vars = {
    'timer': null,
    'playing': true,
    'currentSlide': 0,
    'slideCount': 0,
    'delay': 6000
}

function loadSlide(cnt, context, objPrefix, maxTextLength, readMoreTxt, imgDiv, txtDiv, ctrlCircle) {
    if (vars.playing) {

        clearTimeout(vars.timer);
        vars.currentSlide = cnt;

        var pre = '#' + objPrefix + cnt;
        var img = $(pre + ' img');
        var h2 = $(pre + ' h2');
        var txt = $(pre + ' p');
        var link = $(pre + ' a');

        //Trim text description to prescribed length
        var txtTrim = txt.html();
        if (txtTrim != null) { if (txtTrim.length > maxTextLength) { txtTrim.substring(0, maxTextLength - 20) + '…'; } }

        $('.' + imgDiv, context).html('<img style="display: none;z-index:10;" src="' + img.attr('src') + '"/>');
        $('.' + txtDiv, context).html('<h2  style="display: none;">' + h2.html() + '</h2><div style="display: none;">' + txtTrim + '</div><a style="display: none;" href="' + link.attr('href') + '"><img src="/Portals/5/images/tri_readmore.png"> Read More</a>');
        $('.' + imgDiv + ' *', context).fadeIn(600);
        $('.' + txtDiv + ' *', context).fadeIn(600);
        $('.' + ctrlCircle).css('background', '#FFF');
        $('#' + ctrlCircle + cnt).css('background', '#155a92');
    }

    if (vars.currentSlide == vars.slideCount) { vars.timer = setTimeout('loadSlide(1,"#slideShow","' + objPrefix + '",' + maxTextLength + ',"","' + imgDiv + '", "' + txtDiv + '", "' + ctrlCircle + '")', vars.delay); }
    else { vars.timer = setTimeout('loadSlide(' + (vars.currentSlide + 1) + ',"#slideShow","' + objPrefix + '",' + maxTextLength + ',"","' + imgDiv + '", "' + txtDiv + '", "' + ctrlCircle + '")', vars.delay); }
}

(function ($) {
    $.fn.createSlideShow = function (options) {

        return this.each(function () {

            var settings = {

                //Parameters that will normally be overridden by the user
                'globalWidth': '300px',
                'boxHeight': '200px',
                'imgHeight': '200px',
                'imgBg': '#FFF',
                'txtHeight': '100px',
                'txtBg': '#365585',
                'maxTextLength': 200,
                'h2Styles': 'margin:0px;color:#FFF !important;font-size:22px;padding:8px 10px 2px 10px;font-family:Arial;',
                'txtStyles': 'color:#FFF;font-size:12px !important;line-height:18px;padding:5px 10px 0px 10px;font-family:Arial;',
                'linkStyles': 'position:absolute;bottom:8px;right:20px;color:#FFF !important;text-transform:uppercase;font-size:14px !important;font-weight:bold !important;text-decoration:none;font-family:Arial;',
                'linkHoverStyles': 'text-decoration:underline;',
                'ctrlDivStyles': 'height:33px;background:#9ad1e8;position:absolute;top:214px;left:0px;z-index:50;padding:0px 6px 0px 8px;-webkit-border-top-right-radius:8px;-moz-border-radius-topright:8px;border-top-right-radius:8px;',
                'ctrlCircleStyles': 'width:12px;height:12px;float:left;background:#FFF;margin:7px 6px 0px 6px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;border-radius:8px;-moz-border-radius:8px;cursor:pointer;-moz-box-shadow:3px 3px 3px #666;-webkit-box-shadow:3px 3px 3px #666;box-shadow: 3px 3px 3px #666;',
                'ctrlDelay': 6000,
                'ctrlPlayText': 'Play',
                'ctrlPauseText': 'Pause',
                'ctrlPlayPauseStyles': 'float:left;font-size:15px;font-family:Arial;color:#FFF;cursor:pointer;text-shadow:2px 2px 2px #666;padding:5px 3px 0px 3px;',
                'ctrlPlayPauseHoverStyles': 'color:#e6203d;',
                'ctrlPrevStyles': 'float:left;width:0px;height:0px;border-color: #b4d3e1 #FFF #b4d3e1 #b4d3e1;border-style:solid;border-width:8px;background:#FFF;margin:6px 4px 0px 6px;cursor:pointer;',
                'ctrlPrevHoverStyles': 'border-color: #b4d3e1 #e6203d #b4d3e1 #b4d3e1;',
                'ctrlNextStyles': 'float:left;width:0px;height:0px;border-color: #b4d3e1 #b4d3e1 #b4d3e1 #FFF;border-style:solid;border-width:8px 2px 8px 8px;background:#FFF;margin:6px 0px 0px 6px;cursor:pointer;',
                'ctrlNextHoverStyles': 'border-color: #b4d3e1 #b4d3e1 #b4d3e1 #e6203d;',

                //Parameters that you can override, but normally can just leave alone
                'imgDiv': 'ssImg',
                'txtDiv': 'ssTxt',
                'ctrlDiv': 'ssControl',
                'ctrlCircle': 'ssBox',
                'ctrlPlayPause': 'ssPlayPause',
                'ctrlPrev': 'ssPrev',
                'ctrlNext': 'ssNext',
                'objPrefix': 'ss',
                'readMoreTxt': 'Read More &#187;'
            }

            //Merge internal settings with passed settings
            if (options) { $.extend(settings, options); }

            //Handle Right Away
            vars.delay = settings.ctrlDelay;
            $(this).css('position', 'relative');
            $('ol', this).hide();
            vars.slideCount = $('ol li', this).size();
            $(this).append('<div class="' + settings.imgDiv + '"></div><div class="' + settings.txtDiv + '" style="border-top: solid 1px #9ad1e8;"></div>');

            //Setup Control Box
            var circles = '<div class="' + settings.ctrlDiv + '">';
            for (i = 0; i < vars.slideCount; i++) {
                circles = circles + '<div id="' + settings.ctrlCircle + (i + 1) + '" class="' + settings.ctrlCircle + '"></div>';
            }
            circles = circles + '<div class="' + settings.ctrlPrev + '"></div>';
            circles = circles + '<div class="' + settings.ctrlPlayPause + '">' + settings.ctrlPauseText + '</div>';
            circles = circles + '<div class="' + settings.ctrlNext + '"></div>';
            $(this).append(circles);

            $('.' + settings.ctrlCircle).click(function () {
                var sl = $(this).attr('id').replace(settings.ctrlCircle, '');
                var sll = sl * 1;
                loadSlide(sll, "#slideShow", settings.objPrefix, settings.maxTextLength, settings.readMoreTxt, settings.imgDiv, settings.txtDiv, settings.ctrlCircle);
            });

            $('.' + settings.ctrlPlayPause).click(function () {
                if (vars.playing == false) { vars.playing = true; $(this).html(settings.ctrlPauseText); }
                else { vars.playing = false; $(this).html(settings.ctrlPlayText); }
            });

            $('.' + settings.ctrlPrev).click(function () {
                if (vars.currentSlide == 1) { loadSlide(vars.slideCount, "#slideShow", settings.objPrefix, settings.maxTextLength, settings.readMoreTxt, settings.imgDiv, settings.txtDiv, settings.ctrlCircle); }
                else { loadSlide((vars.currentSlide-1), "#slideShow", settings.objPrefix, settings.maxTextLength, settings.readMoreTxt, settings.imgDiv, settings.txtDiv, settings.ctrlCircle); }
            });

            $('.' + settings.ctrlNext).click(function () {
                if (vars.currentSlide == vars.slideCount) { loadSlide(1, "#slideShow", settings.objPrefix, settings.maxTextLength, settings.readMoreTxt, settings.imgDiv, settings.txtDiv, settings.ctrlCircle); }
                else { loadSlide((vars.currentSlide+1), "#slideShow", settings.objPrefix, settings.maxTextLength, settings.readMoreTxt, settings.imgDiv, settings.txtDiv, settings.ctrlCircle); }
            });

            //Add Control Box Styles
            var thisSheet = document.styleSheets[0];
            if (thisSheet.insertRule) {
                thisSheet.insertRule('.' + settings.ctrlDiv + ' {' + settings.ctrlDivStyles + '}', 0);
                thisSheet.insertRule('.' + settings.ctrlCircle + ' {' + settings.ctrlCircleStyles + '}', 0);
                thisSheet.insertRule('.' + settings.ctrlPlayPause + ' {' + settings.ctrlPlayPauseStyles + '}', 0);
                thisSheet.insertRule('.' + settings.ctrlPlayPause + ':hover {' + settings.ctrlPlayPauseHoverStyles + '}', 0);
                thisSheet.insertRule('.' + settings.ctrlPrev + ' {' + settings.ctrlPrevStyles + '}', 0);
                thisSheet.insertRule('.' + settings.ctrlPrev + ':hover {' + settings.ctrlPrevHoverStyles + '}', 0);
                thisSheet.insertRule('.' + settings.ctrlNext + ' {' + settings.ctrlNextStyles + '}', 0);
                thisSheet.insertRule('.' + settings.ctrlNext + ':hover {' + settings.ctrlNextHoverStyles + '}', 0);
            } else { //IE 
                thisSheet.addRule('.' + settings.ctrlDiv, settings.ctrlDivStyles);
                thisSheet.addRule('.' + settings.ctrlCircle, settings.ctrlCircleStyles);
                thisSheet.addRule('.' + settings.ctrlPlayPause, settings.ctrlPlayPauseStyles);
                //thisSheet.addRule('.' + settings.ctrlPlayPause + ':hover', settings.ctrlPlayPauseHoverStyles);
                thisSheet.addRule('.' + settings.ctrlPrev, settings.ctrlPrevStyles);
                //thisSheet.addRule('.' + settings.ctrlPrev + ':hover', settings.ctrlPrevHoverStyles);
                thisSheet.addRule('.' + settings.ctrlNext, settings.ctrlNextStyles);
                //thisSheet.addRule('.' + settings.ctrlNext + ':hover', settings.ctrlNextHoverStyles);
            }

            //Setup Container Box
            $(this).css({ 'width': settings.globalWidth, 'height': settings.boxHeight, 'overflow': 'hidden', 'background': '#FFF' });

            //Setup Image Box
            $('.' + settings.imgDiv, this).css({ 'width': settings.globalWidth, 'height': settings.imgHeight, 'position': 'relative', 'overflow': 'hidden', 'background': settings.imgBg });
            //Add Image Box Styles
            if (thisSheet.insertRule) {
                document.styleSheets[0].insertRule('.' + settings.imgDiv + ' img{width:' + settings.globalWidth + ';height:' + settings.imgHeight + ';}', 0);
            } else { //IE 
                thisSheet.addRule('.' + settings.imgDiv + ' img', 'width:' + settings.globalWidth + ';height:' + settings.imgHeight + ';', 0);
            }

            //Setup Text Box
            $('.' + settings.txtDiv, this).css({ 'width': settings.globalWidth, 'height': settings.txtHeight, 'position': 'relative', 'overflow': 'hidden', 'background': settings.txtBg });
            //Add TextBox Styling
            if (thisSheet.insertRule) {
                thisSheet.insertRule('.' + settings.txtDiv + ' h2{' + settings.h2Styles + '}', 0);
                thisSheet.insertRule('.' + settings.txtDiv + ' div{' + settings.txtStyles + '}', 0);
                thisSheet.insertRule('.' + settings.txtDiv + ' a{' + settings.linkStyles + '}', 0);
                thisSheet.insertRule('.' + settings.txtDiv + ' a:hover{' + settings.linkHoverStyles + '}', 0);
            } else { //IE 
                thisSheet.addRule('.' + settings.txtDiv + ' h2', settings.h2Styles);
                thisSheet.addRule('.' + settings.txtDiv + ' div', settings.txtStyles);
                thisSheet.addRule('.' + settings.txtDiv + ' a', settings.linkStyles);
                thisSheet.addRule('.' + settings.txtDiv + ' a:hover', settings.linkHoverStyles);
            }

            loadSlide(1, $(this), settings.objPrefix, settings.maxTextLength, settings.readMoreTxt, settings.imgDiv, settings.txtDiv, settings.ctrlCircle);

        });

    };
})(jQuery);