/* ------------------------------------------------------------------------
jfeature 0.3.5

Develop by: C.T. cttoy@hotmail.com
UI by D.F. dingding929@hotmail.com

Copyright D.F. & C.T.

feel free to use & change it

Thanks to: 
s3Slider http://www.serie3.info/s3slider/
jCarousel http://sorgalla.com/jcarousel/
Coda-Slider http://www.ndoherty.com/coda-slider

version: 0.3.5 / 2009-10-19
version: 0.3.0 / 2009-10-19
version: 0.2.0 / 2009-10-16
version: 0.1.0 / 2009-10-15	
version: 0.0.0 / 2009-10-14

------------------------------------------------------------------------- */


(function($) {

    /*
    <div id="jf1"><!--any id -->
    <div class="jf_tube"><!--required-->
    <ul class="jf_items"><!--required-->
    <li class="jf_item"><!--required-->
    <div class="jf_item_maindata"><!--required-->
    <a href='http://news.sohu.com' target="_blank">
    <img src="images/tempphoto-2.jpg" alt="temp" /></a>
    </div>
    <div class="jf_item_metadata"><!--optional-->
    <b>Chicago Bears at Seattle Seahawks</b><br />
    <span>Fifth field goal, overtime win for the Seahawks</span>
    </div>
    <div class="jf_item_thumb"><!--optional-->
    <img src="images/tempphoto-3thumb.jpg" class="nav_thumb" alt="temp_thumb" />
    </div>
    </li>
    ...
    ...
    </ul>            
    </div>
    </div>
    */

    $.fn.jfeature = function(vars) {
        //vars:
        //  delay
        //  tubeWidth, tubeHeight
        //  indexMode       

        var mainDelayIn = (vars.mainDelayIn != undefined) ? vars.mainDelayIn : 500;
        var mainDelayOut = (vars.mainDelayOut != undefined) ? vars.mainDelayOut : 500;
        var metaDelayIn = (vars.metaDelayIn != undefined) ? vars.metaDelayIn : 500;
        var metaDelayOut = (vars.metaDelayOut != undefined) ? vars.metaDelayOut : 500;
        var pauseDelay = (vars.pauseDelay != undefined) ? vars.pauseDelay : 3000;


        var tubeUnit = (vars.tubeUnit != undefined) ? vars.tubeUnit : 'px';
        var tubeWidth = (vars.tubeWidth != undefined) ? vars.tubeWidth : 640;
        var tubeHeight = (vars.tubeHeight != undefined) ? vars.tubeHeight : 360;
        var itemHeight = (vars.itemHeight != undefined) ? vars.itemHeight : tubeHeight;
        var indexMode = (vars.indexMode != undefined) ? vars.indexMode.toLowerCase() : 'digit';

        //private vars
        var _totalDelay = mainDelayIn + metaDelayIn + pauseDelay + metaDelayOut + mainDelayOut;
        var _isMouseOver = false;
        var _stage = 1;
        var _currentItem = null;
        //var _currentIndex = 0;
        var _timer = null;

        //private function
        //var _fnTimeout = null;
        var _fnStage1 = null;
        var _fnStage2 = null;
        var _fnStage3 = null;

        /* START: check delays */
        if (isNaN(mainDelayIn)) mainDelayIn = 500;
        if (isNaN(mainDelayOut)) mainDelayOut = 500;
        if (isNaN(metaDelayIn)) metaDelayIn = 500;
        if (isNaN(metaDelayOut)) metaDelayOut = 500;
        if (isNaN(pauseDelay)) pauseDelay = 500;
        /* END: check delays */

        /* START: get Elements */
        var container = this;
        var _tube = $('#' + container[0].id + ' .jf_tube');
        var _items = $('#' + container[0].id + ' .jf_tube .jf_items .jf_item  .jf_item_maindata');
        //var jf_item_maindatas = $('#' + container[0].id + ' ._tube ._items .jf_item .jf_item_maindata');
        //var jf_item_metadatas = $('#' + container[0].id + ' ._tube ._items .jf_item .jf_item_metadata');
        //var jf_item_thumbs = $('#' + container[0].id + ' ._tube ._items .jf_item .jf_item_thumb');
        var _index_digits = null;
        /* END: get Elements */

        /* START: get & set Width & Height */
        if (isNaN(tubeWidth)) tubeWidth = 640;
        if (isNaN(tubeHeight)) tubeHeight = 360;
        if (isNaN(itemHeight)) itemHeight = tubeHeight;
        _tube.css('width', tubeWidth).css('height', tubeHeight.toString() + tubeUnit);
        _items.css('width', tubeWidth).css('height', itemHeight.toString() + tubeUnit);
        /* END: get & set Width & Height */

        /* START: set Index */
        var _itemCount = _items.length;

        switch (indexMode) {
            case 'none': // no index
                break;
            case 'digit': // digit index
                if (_itemCount > 1) {
                    var indexHtml = '<div class="jf_index"><ul class="jf_index_digits">';

                    for (var i = 1; i <= _itemCount; i++) {
                        indexHtml = indexHtml + '<li class="jf_index_digit">' + i + '</li>';
                    }

                    indexHtml = indexHtml + '</ul></div>';
                    _tube.append(indexHtml);

                    _index_digits = $('#' + container[0].id + ' .jf_index .jf_index_digits .jf_index_digit');
                }
                break;
            case 'thumb': //thumb index
                break;
            default: //digit index
                indexMode = 'digit';
                if (_itemCount > 1) {
                    var indexHtml = '<div class="jf_index"><ul class="jf_index_digits">';

                    for (i = 1; i <= _itemCount; i++) {
                        indexHtml = indexHtml + '<li class="jf_index_digit">' + i + '</li>';
                    }

                    indexHtml = indexHtml + '</ul></div>';
                    _tube.append(indexHtml);

                    _index_digits = $('#' + container[0].id + ' .jf_index .jf_index_digits .jf_index_digit');
                }
                break;
        }
        /* END: set Index */

        /* START: define maindata's hover */

        _items.each(function(i) {
            $(_items[i]).mouseover(function() {
                if (_items.length > 1) {
                    _isMouseOver = true;
                    clearTimeout(_timer);
                }
            });

            $(_items[i]).mouseout(function() {
                if (_items.length > 1) {
                    _isMouseOver = false;
                    _timer = setTimeout(function() {
                        _fnStage3();
                    }, pauseDelay);
                }
            });

        });

        /* END: define maindata's hover */

        /* END: define digit index's hover */

        /* START: define digit index's hover */
        $('#' + container[0].id + ' .jf_index .jf_index_digits .jf_index_digit').hover(
            function() {
                if (_items.length > 1) {
                    $(this).addClass('hover');
                    _isMouseOver = true;
                    clearTimeout(_timer);
                }
            },
            function() {
                if (_items.length > 1) {
                    $(this).removeClass('hover');
                    _isMouseOver = false;
                    _timer = setTimeout(function() {
                        _fnStage3();
                    }, pauseDelay);
                }
            }
        );
        /* END: define digit index's hover */

        /* START: define digit index's click */
        $('#' + container[0].id + ' .jf_index .jf_index_digits .jf_index_digit').click(function() {

            _currentItem = (_currentItem != null) ? _currentItem : _items[0];
            var _currentIndex = $.inArray(_currentItem, _items);

            //hide the old one
            if (indexMode == 'digit' && _index_digits != null)
                $(_index_digits).removeClass('current');
            $(_items[_currentIndex]).hide();

            var _item_metadata = $(_items[_currentIndex]).parent().find('.jf_item_metadata');

            if (_item_metadata.length > 0) {
                $(_item_metadata).hide();
            }

            //get current index
            _currentIndex = $('#' + container[0].id + ' ul.jf_index_digits li.jf_index_digit').index(this);

            //show the new one
            if (indexMode == 'digit' && _index_digits != null)
                $(_index_digits[_currentIndex]).addClass('current');
            $(_items[_currentIndex]).show();
            _item_metadata = $(_items[_currentIndex]).parent().find('.jf_item_metadata');

            if (_item_metadata.length > 0) {
                $(_item_metadata).show();
            }
            _currentItem = _items[_currentIndex];
        });

        /* END: define digit index's click */


        /* START: stage1, stage2 & stage3 */

        //_fnStage1()
        _fnStage1 = function() {

            //_currentIndex = (_currentIndex >= _items.length) ? 0 : _currentIndex;
            _currentItem = (_currentItem != null) ? _currentItem : _items[0];
            var _currentIndex = $.inArray(_currentItem, _items);
            _currentIndex = (_currentItem == _items.length) ? 0 : _currentIndex;

            if (indexMode == 'digit' && _index_digits != null)
                $(_index_digits[_currentIndex]).addClass('current');

            var _item_metadata = $(_items[_currentIndex]).parent().find('.jf_item_metadata');

            if (_item_metadata.length > 0) { //if there is a  metadata

                $(_items[_currentIndex]).fadeIn((mainDelayIn), function() {

                    if ($(_item_metadata).css('bottom') == 0) {
                        $(_item_metadata).slideUp((metaDelayIn), function() {
                            _stage = 1;
                            _currentItem = _items[_currentIndex];
                            if (_items.length > 1)
                                _fnStage2();
                        });
                    }
                    else { //if ($(_item_metadata).css('bottom') == 0)
                        $(_item_metadata).slideDown((metaDelayIn), function() {
                            _stage = 1;
                            _currentItem = _items[_currentIndex];
                            if (_items.length > 1)
                                _fnStage2();
                        });
                    } //if ($(_item_metadata).css('bottom') == 0)

                });

            }
            else { //if there is not a metadata
                $(_items[_currentIndex]).fadeIn((mainDelayIn), function() {
                    setTimeout(function() { _stage = 1; _currentItem = _items[_currentIndex]; if (_items.length > 1) _fnStage2(); }, metaDelayIn);
                });
            }

        };

        //_fnStage2()
        _fnStage2 = function() {
            _timer = setTimeout(function() {
                _fnStage3();
            }, pauseDelay);
        }

        //_fnStage3()
        _fnStage3 = function() {
            if (!_isMouseOver) {

                _currentItem = (_currentItem != null) ? _currentItem : _items[0];
                var _currentIndex = $.inArray(_currentItem, _items);
                _currentIndex = (_currentItem == _items.length) ? 0 : _currentIndex;

                var _item_metadata = $(_items[_currentIndex]).parent().find('.jf_item_metadata');

                if (_item_metadata.length > 0) {

                    if ($(_item_metadata).css('bottom') == 0) {
                        $(_item_metadata).slideDown(metaDelayOut, function() {
                            $(_items[_currentIndex]).fadeOut(mainDelayOut, function() {
                                if (indexMode == 'digit' && _index_digits != null)
                                    $(_index_digits[_currentIndex]).removeClass('current');
                                //_currentIndex++;
                                _currentItem = _items[_currentIndex + 1];
                                _stage = 3;
                                _fnStage1();
                            });
                        });
                    } //if ($(jf_item_metadata).css('bottom') == 0)
                    else {
                        $(_item_metadata).slideUp(metaDelayOut, function() {
                            $(_items[_currentIndex]).fadeOut(mainDelayOut, function() {
                                if (indexMode == 'digit' && _index_digits != null)
                                    $(_index_digits[_currentIndex]).removeClass('current');
                                //_currentIndex++;
                                _currentItem = _items[_currentIndex + 1];
                                _stage = 3;

                                _fnStage1();
                            });
                        });
                    } //if ($(jf_item_metadata).css('bottom') == 0)
                }
                else {

                    setTimeout(function() {
                        $(_items[_currentIndex]).fadeOut(mainDelayOut, function() {
                            if (indexMode == 'digit' && _index_digits != null)
                                $(_index_digits[_currentIndex]).removeClass('current');
                            //_currentIndex++;
                            _currentItem = _items[_currentIndex + 1];
                            _stage = 3;

                            _fnStage1();
                        });
                    }, (metaDelayOut));

                }

            }
        }

        /* END: stage1, stage2 & stage3 */

        _fnStage1();

    };

})(jQuery);