﻿var carousel_width = 0;
var max_width = 0;
var max_height = 0;
var folder, files;
var carousel_on_page = false;
var max_img_width = 0;
var max_img_height = 0;
var margin_left = 60, margin_left1 = 180;
var margin_top = 110;
var items = [];
var current = 2;
var is_rolling = false;

function currentCheck() {
    if (current < 0) current = files.length - 1;
    if (current == files.length) current = 0;
}

function preloadImages(start) {
    if (files.length > start) {
        var preload_img = new Image();
        preload_img.onload = function () {
            if (this.width > max_img_width) max_img_width = this.width;
            if (this.height > max_img_height) max_img_height = this.height;

            //add this image to the carousel            
            $('carousel_holder').insert({
                top: '<img class="carousel_item hidden_img" src="' + this.src + '" text_file="' + files[start] + '"/>'
            });

            //start to load next image
            start++;
            this.onload = null;
            preloadImages(start);
        }
        preload_img.src = '/GetThumb.ashx?img=' + folder + files[start] + '&w=' + max_width + '&maxh=' + max_height + '&shrink=only';
    }
    else {
        //get current from cookie
        var cur_cookie = getCookie("current");
        if (!cur_cookie) setCookie("current", current);
        else {
            current = parseInt(cur_cookie);
            currentCheck();
        }

        //positioning each carousel item
        items = $$('#carousel_holder img.carousel_item');

        var next = getNextPrev(1), next1 = getNextPrev(2), prev = getNextPrev(-1), prev1 = getNextPrev(-2);

        for (var i = 0; i < items.length; i++) {
            //set opacity to text
            if (items[i].hasAttribute('text_file')) {
                var attr = items[i].readAttribute('text_file');
                var t_elem = $('' + attr);

                if (t_elem) {
                    t_elem.setStyle({ display: 'block' });
                    if (t_elem.offsetHeight < max_img_height) t_elem.setStyle({ top: (max_img_height - t_elem.offsetHeight) / 2 - 14 + 'px' });
                    else {
                        if (t_elem.offsetHeight > $('phDesign_Carousel').offsetHeight) {
                            $('phDesign_Carousel').setStyle({ minHeight: t_elem.offsetHeight + 20 + 'px' });
                        }
                    }
                    t_elem.setOpacity(0);
                }
            }
            
            var item_size = items[i].getDimensions();
            //calculate offsets and add them to array
            var w = item_size.width * 0.25;
            var h = item_size.height * 0.25;
            var left = (carousel_width - w) * 0.5;
            var z = 1;

            items[i].removeClassName('hidden_img');
            if (i == current) {
                items[i].setOpacity(1);
                w = item_size.width;
                h = item_size.height;
                left = (carousel_width - w) * 0.5;
                z = 100;

                if (items[i].hasAttribute('text_file')) {
                    var attr = items[current].readAttribute('text_file');
                    if ($('' + attr)) $('' + attr).setStyle({ display: 'block' });
                }
            }
            if (i == next || i == prev) {
                items[i].setOpacity(1);
                w = item_size.width * 0.5;
                h = item_size.height * 0.5;
                left = margin_left + (max_img_width - item_size.width) * 0.25;
                if (i == next) left = carousel_width - left - w;
                z = 50;
                
            }
            if (i == prev1 || i == next1) {
                items[i].setOpacity(0.5);
                w = item_size.width * 0.25;
                h = item_size.height * 0.25;
                left = margin_left1 + (max_img_width - item_size.width) * 0.125;
                if (i == next1) left = carousel_width - left - w;
                z = 1;
                
            }

            var top = margin_top - h * 0.5;
            if (top < 0) top = 0;

            items[i].setStyle({
                width: w + 'px',
                height: h + 'px',
                top: top + 'px',
                left: left + 'px',
                zIndex: z
            });
        }
        
        if (cur_cookie) {
            rollCarousel(-1);
        }
    }
}

function getNextPrev(count) {
    var nextprev;
    var is_next = true;
    if (count < 0) is_next = false;
    nextprev = current + count;
    if (is_next) {        
        if (nextprev >= files.length) nextprev = nextprev - files.length;
    }
    else {
        if (nextprev < 0) nextprev = files.length + nextprev;
    }
    return nextprev;
}

function getMorphData(delta_current, to_who) {
    var who = getNextPrev(delta_current);

    var width, height, top, left, opacity;
    if (to_who == 0) {
        // from 1 to 0
        width = items[who].offsetWidth * 2;
        height = items[who].offsetHeight * 2;
        left = (carousel_width - width) * 0.5;
    }

    if (to_who == 1 || to_who == -1) {
        if (Math.abs(delta_current) > Math.abs(to_who)) {
            // from 2 to 1
            width = items[who].offsetWidth * 2;
            height = items[who].offsetHeight * 2;
            if (delta_current > to_who) left = carousel_width - margin_left - width - (max_img_width - items[who].offsetWidth * 4) * 0.25;
            else left = margin_left + (max_img_width - items[who].offsetWidth * 4) * 0.25;
            opacity = 1;
        }
        else {
            //from 0 to 1
            width = items[who].offsetWidth * 0.5;
            height = items[who].offsetHeight * 0.5;
            if (delta_current < to_who) left = carousel_width - margin_left - width - (max_img_width - items[who].offsetWidth) * 0.25;
            else left = margin_left + (max_img_width - items[who].offsetWidth) * 0.25;
        }
    }

    if (to_who == 2 || to_who == -2) {
        if (Math.abs(delta_current) > Math.abs(to_who)) {
            //from 3 to 2
            opacity = 0.5;
            if (delta_current > to_who) left = carousel_width - margin_left1 - items[who].offsetWidth - (max_img_width - items[who].offsetWidth * 4) * 0.125;
            else left = margin_left1 + (max_img_width - items[who].offsetWidth * 4) * 0.125;
        }
        else {
            //from 1 to 2
            width = items[who].offsetWidth * 0.5;
            height = items[who].offsetHeight * 0.5;
            if (delta_current > to_who) left = margin_left1 + (max_img_width - items[who].offsetWidth * 2) * 0.125;
            else left = carousel_width - margin_left1 - width - (max_img_width - items[who].offsetWidth * 2) * 0.125;
            opacity = 0.5;
        }
    }

    if (Math.abs(to_who) > 2) {
        // to 3
        opacity = 0; 
        left = (carousel_width - items[who].offsetWidth) * 0.5;
    }
    top = margin_top - height * 0.5;
    if (top < 0) top = 0;
 
    return { id: who, width: width, height: height, top: top, left: left, opacity: opacity };
}

function rollCarousel(direction) {
    if (!is_rolling) {
        is_rolling = true;
        var duration = 0.8;
        var to0, from0, to1, from2, toh, fromh;
        if (direction == 1) {
            to0 = getMorphData(-1, 0);
            from0 = getMorphData(0, 1);
            to1 = getMorphData(-2, -1);
            from1 = getMorphData(1, 2);
            toh = getMorphData(2, 3);
            fromh = getMorphData(-3, -2);
        }
        else {
            to0 = getMorphData(1, 0);
            from0 = getMorphData(0, -1);
            to1 = getMorphData(2, 1);
            from1 = getMorphData(-1, -2);
            toh = getMorphData(-2, -3);
            fromh = getMorphData(3, 2);
        }
        new Effect.Parallel([
            new Effect.Morph(items[to0.id], { sync: true, style: 'zIndex: 100; width: ' + to0.width + 'px; height: ' + to0.height + 'px; left: ' + to0.left + 'px; top: ' + to0.top + 'px;', duration: duration, transition: Effect.Transitions.sinoidal }),
            new Effect.Morph(items[from0.id], { sync: true, style: 'zIndex: 50; width: ' + from0.width + 'px; height: ' + from0.height + 'px; left: ' + from0.left + 'px; top: ' + from0.top + 'px;', duration: duration, transition: Effect.Transitions.sinoidal }),
            new Effect.Morph(items[to1.id], { sync: true, style: 'zIndex: 50; width: ' + to1.width + 'px; height: ' + to1.height + 'px; left: ' + to1.left + 'px; top: ' + to1.top + 'px;', duration: duration, transition: Effect.Transitions.sinoidal }),
            new Effect.Opacity(items[to1.id], { sync: true, from: 0.5, to: 0.99 }),
            new Effect.Morph(items[from1.id], { sync: true, style: 'zIndex: 5; width: ' + from1.width + 'px; height: ' + from1.height + 'px; left: ' + from1.left + 'px; top: ' + from1.top + 'px;', duration: duration, transition: Effect.Transitions.sinoidal }),
            new Effect.Opacity(items[from1.id], { sync: true, from: 1, to: 0.5 }),
            new Effect.Morph(items[toh.id], { sync: true, style: 'zIndex: 1; left: ' + toh.left + 'px;', duration: duration, transition: Effect.Transitions.sinoidal }),
            new Effect.Opacity(items[toh.id], { sync: true, from: 0.5, to: 0.01 }),
            new Effect.Morph(items[fromh.id], { sync: true, style: 'zIndex: 5; left: ' + fromh.left + 'px;', duration: duration, transition: Effect.Transitions.sinoidal }),
            new Effect.Opacity(items[fromh.id], { sync: true, from: 0.01, to: 0.5 })
        ], {
            duration: duration,
            delay: 0
        });

        if (items[current].hasAttribute('text_file')) {
            var attr = items[current].readAttribute('text_file');
            var text_div = $('' + attr);
            if (text_div) new Effect.Opacity(text_div, { from: 1, to: 0, duration: duration * 0.4 });
        }

        setTimeout(function () {
            is_rolling = false;         
            setCookie("current", current);
        }, duration * 1000);

        setTimeout(function () {
            items[to0.id].style.zIndex = 100;
            items[to1.id].style.zIndex = 50;
            items[from1.id].style.zIndex = 5;
            items[from0.id].style.zIndex = 50;
            items[toh.id].style.zIndex = 1;
            items[fromh.id].style.zIndex = 5;

            current -= direction;
            currentCheck();
            if (items[current].hasAttribute('text_file')) {
                var attr = items[current].readAttribute('text_file');
                var text = $('' + attr);
                if (text) new Effect.Opacity(text, { from: 0, to: 1, duration: duration * 0.6 });
            }

        }, duration * 400);
    }
}

var client_w = 0, client_w2;
function onLoad(event) {

    ModifyFAQ();

    var carousel_div = $('carousel_holder');
    if (carousel_div) {
        var carousel_size = carousel_div.getDimensions();
        carousel_width = carousel_size.width;
        //margin_top = parseInt(carousel_size.height * 0.5);
        max_width = parseInt(carousel_size.width * 0.6);
        max_height = parseInt(carousel_size.height * 0.9);
        carousel_on_page = true;

        if (current < 0) current = 0;
        if (current >= files.length) current = current - files.length;

        preloadImages(0);
    }
    document.onmousemove = function (e) { MouseMove(e); }
    client_w = getClientWidth();
    $('Layer1').style.left = (client_w - bkgr_w) / 2 + 'px';
    $('Layer2').style.left = (client_w - bkgr_w) / 2 + 'px';
    $('Layer3').style.left = (client_w - bkgr_w) / 2 + 'px';
    client_w2 = client_w / 2;
}

var searchText_empty = true;
function SearchFocused(elem) {
    if (searchText_empty) {
        $(elem).value = "";
    }
}

function SearchUnFocused(elem) {
    if (!elem.value || elem.value == '') {
        searchText_empty = true;
        $(elem).value = $('DefSearchHidden').value;
    }
    else searchText_empty = false;
}

if (window.attachEvent) window.attachEvent('onload', function(e) { onLoad(e); });
else window.onload = onLoad;


var current_x = 0;
var bkgr_w = 1800;
function MouseMove(event) {
    var new_coords = mousePageX(event);
    var new_x = new_coords.x;

    var carousel = $('Carousel');
    if (new_coords.y < (carousel.offsetTop + carousel.offsetHeight + $('MainContent').offsetTop)) {
        $('Layer1').style.left = (client_w - bkgr_w) / 2 + (new_x - client_w2) * 0.05 + 'px';
        $('Layer2').style.left = (client_w - bkgr_w) / 2 + (new_x - client_w2) * 0.025 + 'px';
        $('Layer3').style.left = (client_w - bkgr_w) / 2 + (new_x - client_w2) * 0.0125 + 'px';
    }
}

function mousePageX(e) {
    var x = 0;
    var y = 0;
    if (!e) e = window.event;

    if (e.pageX) {
        x = e.pageX;
        y = e.pageY;
    }
    else if (e.clientX || e.clientY) {
        x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
        y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
    }

    return { "x": x, "y": y };
}

function getClientWidth() {
    return document.compatMode == 'CSS1Compat' && !window.opera ? document.documentElement.clientWidth : document.body.clientWidth;
}

function SearchPressed(event, elem) {
    event = window.event || event;
    if ((event.keyCode == 0xA) || (event.keyCode == 0xD)) {
        __doPostBack('search', elem.value)
    }
}

function ModifyFAQ() {
    $$('.faq_answer').any(function (obj) {
        obj.innerHTML = "<div>" + obj.innerHTML + "</div>"; ;
        obj.setStyle({ display: 'none', height: obj.offsetHeight + 'px' });
    });
    $$('.faq_question').any(function (div) {
        div.observe('click', function (e) { QuestionClicked(e); });
    });
}

var open_answer = null;

function QuestionClicked(event) {
    event = event || window.event;
    var elem = event.target || event.fromElement;
    if (elem.className != 'faq_question') elem = $(elem).up(".faq_question") 
    else elem = $(elem);
    
    while (elem && elem.className != 'faq_answer') {
        elem = elem.nextSibling;
    }
    if (elem) {

        if (open_answer) {
            var siblings = open_answer.nextSiblings();
            for (var i = 0; i < siblings.length; i++) {
                if (siblings[i].hasClassName('faq_answer')) Effect.SlideUp(siblings[i]);
                if (siblings[i].hasClassName('faq_question')) break;
            }
            Effect.SlideUp(open_answer, { afterFinish: function () {
                if (open_answer != elem) {
                    openSiblings(elem);
                }
                else {
                    open_answer = null;
                }
            }
            });         
        }
        else {
            openSiblings(elem);
        }
    }
}

function openSiblings(elem) {
    open_answer = elem;
    Effect.SlideDown(elem);
    var siblings = elem.nextSiblings();
    for (var i = 0; i < siblings.length; i++) {
        if (siblings[i].hasClassName('faq_question')) break;
        else if (siblings[i].hasClassName('faq_answer')) Effect.SlideDown(siblings[i]); ;
    }
}
