﻿(function(){
    var dq = Ext.DomQuery;
    var carousel = Ext.get('carousel');
    var bucket = Ext.get('carousel-bucket');
    var link = Ext.get('carousel-photo-link');
    var orderLink = Ext.get('carousel-order-link');
    var date = dq.select('.article-info .date', carousel.dom)[0];
    var sport = dq.select('.article-info .sport', carousel.dom)[0];
    var title = dq.select('.article-info .article-title', carousel.dom)[0];
    var teaser = dq.select('.article-info .teaser-text', carousel.dom)[0];
    var teaserCt = dq.select('.article-info .article-teaser', carousel.dom)[0];
    var ellipsis = dq.select('.article-info .ellipsis', carousel.dom)[0];
    var win = dq.select('.photo-win', carousel.dom)[0];
    
    var btns = Ext.select('div.buttons div.button', false, carousel.dom);
    var activeBtn = 1;
    var playing = true;
    var delay = 8000;
    var setActiveButton = function(de){
        de = de || delay;
        if (playing) dt.delay(de);
        if (activeBtn <= 0) activeBtn = DS.carousel.data.length;
        if (activeBtn >= (DS.carousel.data.length + 1)) activeBtn = 1;
        var i = activeBtn;
    
        var d = DS.carousel.data[i-1];
        btns.item(i-1).radioClass('active-button');
        date.innerHTML = d.date;
        sport.innerHTML = d.sport;
        title.innerHTML = String.format('<a href="{0}" style="color: #fff;">{1}</a>', d.articleURL, d.title);
        if (title.offsetHeight > 30){
            teaserCt.style.height = '15px';
            ellipsis.style.visibility = 'visible';
            teaser.innerHTML = d.teaser;
            ellipsis.style.left = (teaser.offsetWidth + 1) + 'px';
        } else {
            teaserCt.style.height = '32px';
            ellipsis.style.visibility = 'hidden';
            teaser.innerHTML = d.teaser;
        }
        link.dom.href = d.articleURL;
        if (!d.forSale) orderLink.hide();
        else orderLink.show();
        
        if (win.childNodes.length > 0)
            bucket.dom.appendChild(win.childNodes[0]);
        DS.carousel.resizeImage(imgs[i-1]);
        win.appendChild(imgs[i-1]);
    };
    
    orderLink.on('click', function(e) {
        var img = carousel.child('div.photo-win img');
        if (img.dom.getAttribute('bought') === 'true') return;
        var full = img.dom.getAttribute('image_url');
        var thumb = img.dom.getAttribute('image_thumb');
        var galleryID = img.dom.getAttribute('gallery_id');
        var assetID = img.dom.getAttribute('asset_id');

        img.dom.setAttribute('bought', 'true');
        Ext.Ajax.request({
            url: '/service/PrintRoom.ashx?image_url=' + escape(full) + '&image_thumb=' + escape(thumb) + '&gallery_id=' + escape(galleryID) + '&asset_id=' + escape(assetID),
             params: {
                org_id: s.prop10,
                org_type: s.prop11,
                page_type: s.prop1,
                category: s.prop2,
                dma: s.prop5,
                zip: s.prop4,
                state: s.prop3,
                county_city: s.prop6,
                conference: s.prop13,
                school: s.prop14,
                assoc_clubs_aff_name: s.prop16,
                sport: s.prop7,
                gender: s.prop8,
                comp_level: s.prop9
            },
            method: 'GET',
            callback: function(o, success, r) {
                if (success){
                    (function() {
                        window.location = '/service/PrintRoom.ashx?checkout=1&org_id=' + s.prop10 + "&org_type=" + s.prop11 + 
                            "&page_type=" + s.prop1 + "&category=" + s.prop2 + "&dma=" + s.prop5 + "&zip=" + s.prop4 + 
                            "&state=" + s.prop3 + "&county_city=" + s.prop6 + "&conference=" + s.prop13 + "&school=" + s.prop14 +
                            "&assoc_clubs_aff_name=" + s.prop16 + "&sport=" + s.prop7 + "&gender=" + s.prop8 + "&comp_level=" + s.prop9 + "&refurl=" + escape(window.location.href.toString());
                    }).defer(500);
                }
            }
        });
    });

    btns.on('mouseover', function(e){
        var b = e.getTarget('div.button', 10, true);
        activeBtn = parseInt(b.dom.innerHTML);
        setActiveButton();
    });
    btns.on('click', function(e){
        var b = e.getTarget('div.button', 10, true);
        var i = parseInt(b.dom.innerHTML);
        window.location = DS.carousel.data[i-1].articleURL;
    });
    Ext.select('div.buttons div.control', false, carousel.dom).on('click', function(e){
        var c = e.getTarget('div.control', 10, true);
        if (c.id == 'control-prev'){
            activeBtn--;
        } else if (c.id == 'control-pause'){
            if (playing){
                dt.cancel();
                playing = false;
                c.addClass('control-play');
            } else {
                playing = true;
                c.removeClass('control-play');
            }
        } else {
            activeBtn++;
        }
        
        setActiveButton();
    });
    
    DS.carousel.resizeImage = function(img){
        if (img.offsetWidth > 385) img.style.width = '385px';
        if (img.offsetHeight > 272) img.style.height = '272px';
    };
    
    var imgs = null;
    var dt = null;
    (function(){
        for (var i = 0; i < DS.carousel.data.length; i++){
            bucket.dom.innerHTML += String.format('<img src="{0}" image_url="{1}" image_thumb="{2}" gallery_id="{3}" asset_id="{4}" onload="DS.carousel.resizeImage(this);" />', DS.carousel.data[i].imageURL, DS.carousel.data[i].imageFullURL, DS.carousel.data[i].imageThumbURL, DS.carousel.data[i].galleryID, DS.carousel.data[i].assetID);
        }
        imgs = dq.select('img', bucket.dom);
        dt = new Ext.util.DelayedTask(function(){
            activeBtn++;
            setActiveButton();
        }, this);
        
        var count = 0;
        var interval = setInterval(function(){
            setActiveButton();
            count++;
            if (count == 4){
                clearInterval(interval);
                setActiveButton(5000);
            }
        }, 250);
    }).defer(10);
})();