/* ========== Vertical Drop Down ========== */
var photoSlide = new Fx.Slide('phfLinks');
var photoSlideToggle = 0;

$('phfPhoto').addEvent('click', function(e){
    e = new Event(e);
    photoSlide.toggle();
    if(photoSlideToggle % 2 == 0) {
        $('phfSlide').style.backgroundImage = "url('http://creative.myspace.com/ar/quebuenafoto/img/pix_07b.gif')";
        $('phfSlide').style.backgroundColor = "#B7B7B7";
    } else {
        $('phfSlide').style.backgroundImage = "url('http://creative.myspace.com/ar/quebuenafoto/img/pix_07.gif')";
        $('phfSlide').style.backgroundColor = "#B7B7B7";
    }
    photoSlideToggle++;
    e.stop();
});

photoSlide.hide();

/* ========== Vertical Scroll Bar ========== */
// http://solutoire.com/2008/03/10/mootools-css-styled-scrollbar/
function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){
    var steps = (horizontal?(content.getSize().scrollSize.x - content.getSize().size.x):(content.getSize().scrollSize.y - content.getSize().size.y))
    var slider = new Slider(scrollbar, handle, {    
        steps: steps,
        mode: (horizontal?'horizontal':'vertical'),
        onChange: function(step){
            // Scrolls the content element in x or y direction.
            var x = (horizontal?step:0);
            var y = (horizontal?0:step);
            content.scrollTo(x,y);
        }
    }).set(0);
    if( !(ignoreMouse) ){
        // Scroll the content element when the mousewheel is used within the 
        // content or the scrollbar element.
        $$(content, scrollbar).addEvent('mousewheel', function(e){  
            e = new Event(e).stop();
            var step = slider.step - e.wheel * 30;  
            slider.set(step);                   
        });
    }
    // Stops the handle dragging process when the mouse leaves the document body.
    $(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
}

window.addEvent('domready', function(){
    makeScrollbar( $('plnInner'), $('plnScroll'), $('plnHandle'), false, false );
});

window.addEvent('domready', function(){
    makeScrollbar( $('paInner'), $('paScroll'), $('paHandle'), true, false );
});

/* ========== Tabs ========== */
var EventsBackground = $('EventsBackground').getAttribute('src');
var SecretBackground = $('SecretBackground').getAttribute('src');
var GigBackground = $('GigBackground').getAttribute('src');

function focusTab(focusDiv){
    // Set all to grey
    $('ptlEventsImg').setAttribute('src', 'http://creative.myspace.com/ar/quebuenafoto/img/ptlEventsb.jpg');
    $('ptlSecretImg').setAttribute('src', 'http://creative.myspace.com/ar/quebuenafoto/img/ptlSecretb.jpg');
    $('ptlGigImg').setAttribute('src', 'http://creative.myspace.com/ar/quebuenafoto/img/ptlGigb.jpg');
    $('ptlEventsCapt').style.display = "none";
    $('ptlSecretCapt').style.display = "none";
    $('ptlGigCapt').style.display = "none";

    // Set one to blue
    $('ptrCaption').style.marginTop = '350px';
    $(focusDiv + 'Img').setAttribute('src', 'http://creative.myspace.com/ar/quebuenafoto/img/' + focusDiv + '.jpg');
    $(focusDiv + 'Capt').style.display = "block";

    // Set background of ptRight
    if(focusDiv == "ptlEvents") {
        $('ptRight').style.backgroundImage = "url(" + EventsBackground + ")";
    } else if(focusDiv == "ptlSecret") {
        $('ptRight').style.backgroundImage = "url(" + SecretBackground + ")";
    } else {
        $('ptRight').style.backgroundImage = "url(" + GigBackground + ")";    
    }
    //$('ptRight').style.backgroundImage = "url('http://creative.myspace.com/ar/quebuenafoto/img/" + focusDiv + "bg.jpg')";
    
    if(quadEase) quadEase.stop();
    transitionCaption();
}

focusTab('ptlGig');

var quadEase;
function transitionCaption(){        
    quadEase = new Fx.Styles('ptrCaption', {duration: 1500,transition: Fx.Transitions.Quad.easeOut});

    quadEase.start({
        'margin-top': [254]
    });
}