(function($) {
    if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8
        var oldCurCSS = $.curCSS;
        $.curCSS = function(elem, name, force){
            if(name === 'background-position'){
                name = 'backgroundPosition';
            }
            if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){
                return oldCurCSS.apply(this, arguments);
            }
            var style = elem.style;
            if ( !force && style && style[ name ] ){
                return style[ name ];
            }
            return oldCurCSS(elem, 'backgroundPositionX', force) +' '+ oldCurCSS(elem, 'backgroundPositionY', force);
        };
    }
    
    var oldAnim = $.fn.animate;
    $.fn.animate = function(prop){
        if('background-position' in prop){
            prop.backgroundPosition = prop['background-position'];
            delete prop['background-position'];
        }
        if('backgroundPosition' in prop){
            prop.backgroundPosition = '('+ prop.backgroundPosition;
        }
        return oldAnim.apply(this, arguments);
    };
    
    function toArray(strg){
        strg = strg.replace(/left|top/g,'0px');
        strg = strg.replace(/right|bottom/g,'100%');
        strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
        var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
        return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
    }
    
    $.fx.step. backgroundPosition = function(fx) {
        if (!fx.bgPosReady) {
            var start = $.curCSS(fx.elem,'backgroundPosition');
            if(!start){//FF2 no inline-style fallback
                start = '0px 0px';
            }
            
            start = toArray(start);
            fx.start = [start[0],start[2]];
            var end = toArray(fx.end);
            fx.end = [end[0],end[2]];
            
            fx.unit = [end[1],end[3]];
            fx.bgPosReady = true;
        }
        var nowPosX = [];
        nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
        nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];           
        fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

    };
})(jQuery);

var JavascriptHelper = {
    
    debug: false,
    
    init: function(){
      this.doMainScroller('.slidetabs', '.slideimages > div', 'slideWithScroll');
      this.doSlideNavigation('#mainnavi ul', 500, -900, 'white', 'black', true);
      this.doSlideNavigation('#subnavi ul', 300, -882, '#0084b6', '#5b5b5b', false);
      this.doMap('img.map', '#map', '.rooms');
    },
    doMap: function(img, map, rooms){
        var map = $(map);
        $(img).maphilight();
        
        var data = map.find('area').eq(0).data('maphilight') || {};
        
        data.alwaysOn = !data.alwaysOn;
        
        map.find('area').eq(0).data('maphilight', data).trigger('alwaysOn.maphilight');
        
        var elRooms = $(rooms);
        var startClass = '.' + map.find('area').eq(0).attr('id');
        
        elRooms.find(startClass).fadeIn();
        if(elRooms.find(startClass + ' .slideshow div').lenth > 1){
            elRooms.find(startClass + '.sslidetabs').tabs(rooms + ' ' + startClass + '.slideshow > div', {                
                effect: 'fade',
                fadeOutSpeed: "slow",
                rotate: true
            }).slideshow({
                autoplay: true,
                interval: 7000,
                clickable: true
            });
        }
        
        map.find('area').click(function(e) {
            e.preventDefault();
            map.find('area').each(
                function(index) {
                    dafoo = $(this).data('maphilight') || {};
                    dafoo.alwaysOn = false;
                    $(this).data('maphilight', dafoo).trigger('alwaysOn.maphilight');
                  }
            );
            var data = $(this).mouseout().data('maphilight') || {};
            data.alwaysOn = !data.alwaysOn;
                
            $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
            elRooms.find('.room').hide();
            var idCurrent = $(this).attr('id');
            var elCurrent = elRooms.find('.'+$(this).attr('id'))
            elCurrent.show();  
            if(elCurrent.find('.slideshow div').length > 1 && !(elCurrent.find('.sslidetabs').data("slideshow"))){
                elCurrent.find('.slideshow div').eq(0).show();
                if(JavascriptHelper.debug)
                    console.log('initate slideshow');
                    
                elCurrent.find('.sslidetabs').tabs(rooms + ' .' + idCurrent + " .slideshow > div", {
                    effect: 'fade',
                    fadeOutSpeed: "slow",
                    rotate: true
                }).slideshow({
                    autoplay: true,
                    interval: 7000,
                    clickable: true
                });                    
            }
        });
        
    },
    doMainScroller: function(tabs, panes, effect){
        $(tabs).tabs(panes, {
            effect: effect,
            fadeOutSpeed: "slow",
            rotate: true
        }).slideshow({
            autoplay: true,
            interval: 10500,
            clickable: false
        });
    },
    doSlideNavigation: function(ulElement, duration, nullPosition, activeColor, inactiveColor, fixWidth){
        var el = $(ulElement);
        if(fixWidth){
            el.css('width', el.find('li').length * el.find('li').width() + 'px');            
        }
        var mainPosition = nullPosition + el.find('li.active, li.trail').index() * el.find('li').width();
        
        if(JavascriptHelper.debug)
            console.log(mainPosition);            
        
        el.css({backgroundPosition: mainPosition + 'px 0px'});
        el.find('li a.trail, li a.active').css('color', activeColor);
        el.find('li a')
        .mouseover(function(){
            el.find('li a').css('color', inactiveColor);        
            $(this).css('color', activeColor);
            el.stop().animate(
                {backgroundPosition: nullPosition + $(this).parent().index() * el.find('li').width() + "px 0px"}, 
                {duration: duration}
            );

        })
        .mouseout(function(){
            el.stop().animate(
                {backgroundPosition: mainPosition + "px 0px"}, 
                {duration: duration}
            );
            el.find('li a').not('.active').not('.trail').css('color', inactiveColor);
            el.find('li a.trail, li.active a').css('color', activeColor);
        });
    }
}
$(function(){
    JavascriptHelper.init();
});

$.tools.tabs.addEffect("slideWithScroll", function(tabIndex, done) {
    this.getPanes().fadeOut('slow');
    this.getPanes().eq(tabIndex).fadeIn('slow');
    var direction;
    var img = $(".slideimages > div").eq(tabIndex).find('.img');
    if(Math.ceil(Math.random()*2) == 1) {
        $(img).css('backgroundPosition', '0px 0px')
            .show()
            .stop()
            .animate({
                    opacity: 1
                }, 800, 'linear')
            .animate({
                backgroundPosition: '-900px 0px'
            }, 10000, 'linear');
    } else {
        $(img).css('backgroundPosition', '-900px 0px')
            .show()
            .stop()
            .animate({
                    opacity: 1
                }, 800, 'linear')
            .animate({
                backgroundPosition: '0px 0px'
            }, 10000, 'linear');
    }
    done.call();
});

$.fn.maphilight.defaults = {
    fill: true,
    fillColor: 'ffffff',
    fillOpacity: 0.4,
    stroke: true,
    strokeColor: 'ffffff',
    strokeOpacity: 0.7,
    strokeWidth: 1,
    fade: true,
    alwaysOn: false,
    neverOn: false,
    groupBy: false,
    wrapClass: true,
    shadow: false,
    shadowX: 0,
    shadowY: 0,
    shadowRadius: 6,
    shadowColor: '000000',
    shadowOpacity: 0.8,
    shadowPosition: 'outside',
    shadowFrom: false
}